How to select and open next master row detail row when previous master row is closed?

Question

I have a grid that uses detailInit and when I expand a row and select a value from the grid in the detailrow it collpases the masterrow but I have no idea on how to select and open the next row's detail cell after the masterrow is closed.

Here are some screenshots that provide a better explanation

I select a row from the detail rows grid

it closes and should look like this

Am not really sure how to accomplish this

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;
  $("").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(index) {
        grid.collapseRow(this);
        $(this).removeClass("k-state-selected");
      });
    }
  });
}

user_3880585 · Answer

You may compute the value of current master row ID in the change event:

var nmr = +e.sender.element.closest('tr').prev().find('[role=gridcell]:first').text();

So, after the each loop you can open the next master row:

grid.expandRow(".k-master-row:eq(" + nmr + ")");
$(".k-master-row:eq(" + nmr + ")").addClass("k-state-selected");

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;
  $("").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");

      }
  });
}

How to select and open next master row detail row when previous master row is closed?

1 Answers