上一主行关闭时,如何选择并打开下一主行明细行?

var gridData = [{
  "ID": "1",
  "FName": "Adam",
  "LName": "Zoo"
},
  {
      "ID": "2",
      "FName": "Ben",
      "LName": "York"
  },
  {
      "ID": "3",
      "FName": "Chris",
      "LName": "Xavier"
  },
  {
      "ID": "4",
      "FName": "Dan",
      "LName": "Went"
  },
  {
      "ID": "5",
      "FName": "Eddy",
      "LName": "Victor"
  },
  {
      "ID": "6",
      "FName": "Freddy",
      "LName": "Under"
  },
  {
      "ID": "7",
      "FName": "George",
      "LName": "Trenton"
  },
  {
      "ID": "8",
      "FName": "Harry",
      "LName": "Salvador"
  }
];

var detailData = [{
  "ID": "9",
  "City": "Arlen",
  "Province": "Ontario"
},
  {
      "ID": "10",
      "City": "Bancroft",
      "Province": "Ontario"
  },
  {
      "ID": "11",
      "City": "Calgary",
      "Province": "Alberta"
  },
  {
      "ID": "12",
      "City": "Dartmouth",
      "Province": "Ontario"
  },
  {
      "ID": "13",
      "City": "Embro",
      "Province": "Ontario"
  },
  {
      "ID": "14",
      "City": "Fullerton",
      "Province": "Ontario"
  },
  {
      "ID": "15",
      "City": "Georgetown",
      "Province": "Ontario"
  },
  {
      "ID": "16",
      "City": "Huntsville",
      "Province": "Ontario"
  }
]

$(document).ready(function () {
  LoadGridData();
});

function LoadGridData() {
  $('#MyGrid').kendoGrid({
      dataSource: {
          data: gridData
      },
      schema: {
          model: {
              id: "ID",
              fields: {
                  ID: {
                      type: "string"
                  },
                  FName: {
                      type: "string"
                  },
                  LName: {
                      type: "string"
                  }
              }
          }
      },
      columns: [{
          field: "ID",
          title: "ID"
      },
          {
              field: "FName",
              title: "First"
          },
          {
              field: "LName",
              title: "Last"
          }
      ],
      height: 550,
      detailInit: detailInitGrid,
      detailExpand: function (e) {
          this.select(e.detailRow.prev());
          this.collapseRow(this.tbody.find('> tr.k-master-row').not(e.masterRow));
      }
  });
}

var masterRow;

function detailInitGrid(e) {
  masterRow = e.masterRow;
  $("<div/>").appendTo(e.detailCell).kendoGrid({
      dataSource: {
          data: detailData
      },
      columns: [{
          field: "ID",
          title: "ID"
      },
          {
              field: "City",
              title: "City"
          },
          {
              field: "Province",
              title: "Province"
          }
      ],
      selectable: true,
      change: function (e) {
          let index = this.select().index();
          let dataItem = this.dataSource.view()[index];

          let grid = $("#MyGrid").data("kendoGrid");

          $(".k-master-row").each(function (idx, ele) {
              grid.collapseRow(this);
              $(this).removeClass("k-state-selected");

          });
          // open next master row...
          var nmr = +e.sender.element.closest('tr').prev().find('[role=gridcell]:first').text();
          grid.expandRow(".k-master-row:eq(" + nmr + ")");
          $(".k-master-row:eq(" + nmr + ")").addClass("k-state-selected");

      }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>


<div id="MyGrid"></div>