Geek asks and answers

Remember extended part grids when upgrading in Kendo-UI

I have a script with a grid in a grid implemented using the detailInit method. Here, when the user does the editing, I do some calculations that will change the data for both the parent and the child. and then update the data, I will call datasource.read to visualize the data. this works and the data is displayed, however any extensible part mesh will be collapsed, is there any way to prevent this.

+1
source share
4 answers

To answer this and another question:

"I figured out how to set the data in the main one from the BUT child, the whole table destroys the child gratings when something is updated, this is very annoying behavior, anyway, I can just update the field in the master table without collapsing all the children ? (basically, update the column, no bulk update of the table)

in another thread: telerik

This is an extremely annoying Kendo mesh behavior and a major mistake. Since when a person wants the sub-segment to disappear and hide the change made! But this is not the only problem; the change function is called the Fibonacci number, which delays the browser after a significant number of clicks. That being said, here is the solution I came 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 = [];

subgridChange() , .

, , , . Kendo , , , , , . , , subgridChange() " " :

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

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

subgridChange() "", -

$('<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();
});
+4

, . ,

// 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)"));

, nth-child() , .

+2

In fact, all that is needed is the subgridChange () function in the mainbase dataBound function:

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

Another, but similar solution that I used for the 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;
        }
0
source

More articles:


All Articles