javascript 记住在 Kendo-UI 中刷新时扩展的细节网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12095392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remember expanded detail grids on refresh in Kendo-UI
提问by Alexus
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.
我有一个使用 detailInit 方法实现的网格内网格场景。在这里，当用户进行编辑时，我会进行一些计算来更改父项和子项中的数据。然后刷新数据，我将调用 datasource.read 来呈现数据。这有效并显示数据，但是任何展开的细节网格都将折叠，有什么办法可以防止这种情况发生。
回答by user3329202
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
在另一个线程中：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:
这是 Kendo Grid 极其烦人的行为，也是一个主要错误。从什么时候开始，人们希望子网格消失并隐藏刚刚进行的更改！但这并不是唯一的问题；change 函数被调用斐波那契数次，在大量点击后会冻结浏览器。话虽如此，这是我提出的解决方案：
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.
现在每次对子网格进行更改时都需要调用“subgridChange()”函数。
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:
问题在于子网格中的更改函数被调用的次数在每次更改调用时呈指数增长。Kendo 网格应该能够调用停止传播函数来阻止这种情况，或者至少让程序员可以访问事件对象，以便程序员可以阻止传播。在完全生气之后，我们所要做的就是将 'subgridChange()' 函数放在子网格 'datasource' 中，如下所示：
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
我还必须使用类似这样的方法将“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();
});
回答by BentOnCoding
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.
要扩展不同的行，只需将nth-child()选择器中的数字更改为您要扩展的行的索引。
回答by user3329202
Actually all that is needed is the 'subgridChange()' function in the main grid 'dataBound' function:
实际上所需要的只是主网格“dataBound”函数中的“subgridChange()”函数：
$('#' + grid_id).kendoGrid({
...
dataBound: function (e) {
gridDataMap.subgridChange();
}
});
回答by Zeynep
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;
}
