记住在Kendo-UI中刷新时扩展的细节网格 [英] Remember expanded detail grids on refresh in Kendo-UI

问题描述

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

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.

推荐答案

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

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

在另一个线程中： telerik

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

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:

在主网格中

 $('#' + 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（）'函数。

Now the 'subgridChange()' function needs to be called every time a change is made to the subgrid.

问题是子网格中的更改函数被调用的次数会在每次更改调用时呈指数级增长。 Kendo网格应该能够调用停止传播函数来防止这种情况，或者至少让程序员访问事件对象，以便程序员可以阻止传播。在完全恼火之后，我们所要做的就是将'subgridChange（）'函数放在子网格'datasource'中，如下所示：

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:

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

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

我还必须在添加按钮中放置subgridChange（）函数功能使用类似这样的东西

I also had to place the 'subgridChange()' function in the Add button function using something like this

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

这篇关于记住在Kendo-UI中刷新时扩展的细节网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！