Remember expanded detail grids on refresh in Kendo

Question

I have a scenario with grid within grid implemented using the detailInit method. Here when user makes edit, i do some calculations that will change the data in the both parent and child. and then to refresh data, i will call the datasource.read to render data. this works and the data is displayed, however any detail grid which are expanded will be collapsed, is there any way i can prevent this from happening.

Answer 1

Different but similar solution that i used for same problem:

       expandedItemIDs = [];

            function onDataBound() {
        //expand rows
                    for (var i = 0; i < expandedItemIDs.length; i++) {
                        var row = $(this.tbody).find("tr.k-master-row:eq(" + expandedItemIDs[i] + ")");
                        this.expandRow(row);
                    }
                }

        function onDetailExpand(e) {
            //refresh the child grid when click expand
            var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
            grid.dataSource.read();
            //get index of expanded row       
            $(e.detailCell).text("inner content");
            var row = $(e.masterRow).index(".k-master-row");
            if (contains(expandedItemIDs, row) == false)
                expandedItemIDs.push(row);
        }

        function onDetailCollapse(e) {
    //on collapse minus this row from array
            $(e.detailCell).text("inner content");
            var row = $(e.masterRow).index(".k-master-row");
            for (var i = 0; i < expandedItemIDs.length; i++)
                if (expandedItemIDs[i] == row)
                    expandedItemIDs.splice(i, 1);
        }

        function contains(a, obj) {
            for (var i = 0; i < a.length; i++)
                if (a[i] === obj) return true;
            return false;
        }

Answer 2

Actually all that is needed is the 'subgridChange()' function in the main grid 'dataBound' function:

 $('#' + grid_id).kendoGrid({
      ...
      dataBound: function (e) {
          gridDataMap.subgridChange();
      }
  });

Answer 3

When a user selects a row, record the index of the selected row. Then after your data refresh, use the following code to expand a row

// get a reference to the grid widget
var grid = $("#grid").data("kendoGrid");
// expands first master row
grid.expandRow(grid.tbody.find(">tr.k-master-row:nth-child(1)"));

To expand different rows, just change the number in the nth-child() selector to the index of the row you wish to expand.

Answer 4

To answer this and another question:

"I figured out how to set the data in the master from the child BUT, the whole table collapses the child grids when anything is updated, this is a very annoying behavior, is there anyway I can just update a field in the master table without it collapsing all the child elements? (basically, update the column, no mass table update)"

in another thread at: telerik

This is extremely annoying behavior of the Kendo Grid and a major bug. Since when does a person want the sub-grid to disappear and hide a change that was just made! But this isn't the only problem; the change function gets called a Fibonacci number of times, which will freeze the browser after a significant number of clicks. That being said, here is the solution that I have come up with:

In the main grid

 $('#' + grid_id).kendoGrid({
     width: 800, 
     ...
     detailExpand: function (e) {
         var grid = $('#' + grid_id).data("kendoGrid");
         var selItem = grid.select();
         var eid = $(selItem).closest("tr.k-master-row").attr('data-uid')
         if (contains(expandedItemIDs, eid) == false)
              expandedItemIDs.push(eid);
 },
 detailCollapse: function (e) {
    var grid = $('#' + grid_id).data("kendoGrid");
    var selItem = grid.select();
    var eid = $(selItem).closest("tr.k-master-row").attr('data-uid')
    for (var i = 0; i < expandedItemIDs.length; i++)
        if (expandedItemIDs[i] == eid) 
            gridDataMap.expandedItemIDs.splice(i, 1);
},

Unfortunately globally we have:

function subgridChange() {
      var grid = $('#' + grid_id).data("kendoGrid");
      for (var i = 0; i < expandedItemIDs.length; i++)
       grid.expandRow("tr[data-uid='" + expandedItemIDs[i] + "']");
}
function contains(a, obj) {
   for (var i = 0; i < a.length; i++) 
       if (a[i] === obj)  return true;
   return false;
}
expandedItemIDs = [];

Now the 'subgridChange()' function needs to be called every time a change is made to the subgrid.

The problem is that the number of times the change function in the subgrid gets called increases exponentially on each change call. The Kendo grid should be able to call a stop propagation function to prevent this, or at least give the programmer access to the event object so that the programmer can prevent the propagation. After being completely annoyed, all we have to do is to place the 'subgridChange()' function in the subgrid 'datasource' like so:

dataSource: function (e) {
    var ds = new kendo.data.DataSource({
        ...
        create: false,
        schema: {
            model: {
                ...
            }
        },

        change: function (e) {
            subgridChange();
        }
    });
    return ds;
}

I also had to place the 'subgridChange()' function in the Add button function using something like this

$('<div id="' + gridID + '" data-bind="source: prodRegs" />').appendTo(e.detailCell).kendoGrid({
      selectable: true,
      ...
      toolbar: [{ template: "<a class='k-button addBtn' href='javascript://'><span class='k-icon  k-add' ></span> Add Product and Region</a>" }]
});

$('.addBtn').click(function (event) {
    ...
    subgridChange();
});