记住在Kendo-UI中刷新时扩展的细节网格
我有一个使用detailInit方法实现网格内网格的场景。 在用户进行编辑时，我会进行一些计算，这些计算将改变父和子的数据。 然后刷新数据，我将调用datasource.read来呈现数据。 这样可以显示数据，但是展开的任何细节网格都会被折叠，有什么办法可以防止这种情况发生。
要回答这个问题和另一个问题：
“我想出了如何从子节点设置master中的数据但是，当更新任何内容时，整个表会折叠子网格，这是一个非常烦人的行为，无论如何我只能更新主表中的字段而不用它会折叠所有子元素？（基本上，更新列，没有质量表更新）“
在另一个主题： 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按钮函数中
$('').appendTo(e.detailCell).kendoGrid({ selectable: true, ... toolbar: [{ template: " Add Product and Region" }] }); $('.addBtn').click(function (event) { ... subgridChange(); });
当用户选择行时，记录所选行的索引。 然后在数据刷新后，使用以下代码展开一行
// 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()选择器中的数字更改为要扩展的行的索引。
实际上所需要的只是主网格’dataBound’函数中的’subgridChange（）’函数：
$('#' + grid_id).kendoGrid({ ... dataBound: function (e) { gridDataMap.subgridChange(); } });
我用于同一问题的不同但相似的解决方案：
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; }