javascript - 记住 Kendo-UI 中刷新时扩展的细节网格

Question

我有一个使用DetailInit 方法实现的网格内网格的场景。在这里，当用户进行编辑时，我会进行一些计算，这些计算将更改父级和子级中的数据。然后为了刷新数据，我将调用 datasource.read 来渲染数据。这有效并且显示了数据，但是展开的任何详细网格都将被折叠，有什么方法可以防止这种情况发生。

Answer 1

回答这个问题和另一个问题:

“我想出了如何从子设备中设置主设备中的数据，但是，当任何内容更新时，整个表会折叠子网格，这是一个非常烦人的行为，无论如何我可以更新一个字段主表没有折叠所有子元素？(基本上就是更新列，没有批量表更新)”

在另一个线程中:telerik

这是 Kendo 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);
},

不幸的是，在全局范围内，我们有:

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();
});