Question

我有一个使用detailInit方法实现网格内网格的场景。在用户进行编辑时，我会进行一些计算，这些计算将改变父和子的数据。然后刷新数据，我将调用datasource.read来呈现数据。这样可以显示数据，但是展开的任何细节网格都会折叠，有什么办法可以防止这种情况发生。

Answer 1

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

“我想出了如何从子节点设置主节点中的数据当更新任何内容时，整个表会折叠子网格，这是一个非常讨厌的行为，无论如何我可以只更新一个字段没有它的主表折叠所有子元素？（基本上，更新列，没有质量表更新）“

在另一个帖子中：telerik

这是剑道网格非常讨厌的行为和一个主要的错误。从什么时候开始，人们希望子网格消失并隐藏刚刚发生的变化！但这不是唯一的问题;更改函数被称为Fibonacci次数，这将在大量点击后冻结浏览器。话虽如此，这是我提出的解决方案：

在主网格中

 $('#' + 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'中，如下所示：

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

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

我还必须使用类似的东西将'subgridChange（）'函数放在Add按钮函数中

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

Answer 2

当用户选择一行时，记录所选行的索引。然后在数据刷新后，使用以下代码展开行

// 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()选择器中的数字更改为您要扩展的行的索引。

Answer 3

实际上所需要的只是主网格'dataBound'函数中的'subgridChange（）'函数：

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

Answer 4

我用于同一问题的不同但相似的解决方案：

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

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

4 个答案: