Telerik Kendo UI grid：对grid.refresh（）进行分组和排序，但折叠的组会被扩展；如何保存状态

与监控动态变化数据的“仪表板”应用程序中的网格一样，my（Telerik）Kendo UI网格每隔60秒定期刷新一次新数据：

grid.dataSource.data（freshData）；
grid.refresh（）；//已通知可能不需要此刷新

架构不会更改，但数据集中可能会显示一些新行，而一些新行可能已被删除

尽管

grid.refresh（）

使分组保持不变，并且排序状态也保持不变，但任何折叠的组都会展开

问题：如何保留（或恢复）组的展开/折叠状态（这样，在其他组已折叠的情况下，专注于特定展开组的用户不会因每个组默认重新展开的定期更新而感到不便/沮丧）

编辑：某些Winforms网格提供了一种方法，可以在刷新数据之前“拍摄组展开/折叠状态的快照”，然后在数据源刷新后重新应用该状态如果剑道UI网格中的组标题行具有UID（在刷新后仍然存在），则可以执行此操作。但请参阅下面建议的不涉及持久UID的方法

用例： 这里是这个特性的一个典型用例，尽管有些戏剧性。疾病控制中心正在按城市实时监测一种流感病毒的爆发。数据集每15秒刷新一次。他们现在正把注意力集中在洛杉矶，使这个城市扩张，而其他城市则崩溃了。如果每15秒整个网格就扩展一次，就会激怒CDC的医生，他们进去掐死程序员，然后回家打高尔夫球，洛杉矶的每个人都会屈服。剑道真的想为那场灾难负责吗

可能的功能增强建议： 忽略我关于上面UID的建议。这里有一个更好的方法。 网格已经

...

现在，如果k-group-indicator div可以包含

数据字段

的不同值列表，每个键的关联数据都是相应部分的展开/折叠状态，那么在调用dataSource.data（someNewData）方法之前，可以将该列表保存到缓冲区，然后在侦听数据绑定事件的eventhandler中，可以重新应用这些展开状态。要为分组值找到相应的分组部分，如果

k-grouping-row

可以有一个名为

group data value

的属性，该属性保存特定分组部分的分组值，例如“Sales”或“Marketing”，如果其中一个是通过名为Department的数据字段进行分组的话

...

---

然后在

k-grouping-row

：

首先，您很少需要从代码中调用refresh。网格（以及所有数据绑定的剑道小部件）正在侦听数据源的更改，并将相应地刷新

---

通过设计，组的展开/折叠状态是而不是保留的。更改数据源将导致所有组都被扩展（这是它们的默认状态）。

可以理解，这不是内置功能。这是相当复杂的，因为如果您有嵌套的分组，那么您必须记住层次结构中存在的每个折叠组。由于项目将移入和移出数据源，这将是一个难以跟踪的问题

---

这就是说，这里有一个非常简单的方法来实现你想要的，只要你不变得太复杂。它只使用

groupHeaderTemplate

属性向每个分组行添加UID。我只是使用列名+值作为UID，如果您进入多个分组，这在技术上是错误的，但对于一个示例来说已经足够好了

从那里，在刷新之前，您可以从剑道现在拥有的ARIA属性中找到折叠的组（旁注，您必须使用2012 Q3才能工作）。然后向下钻取并获取模板添加的UID

刷新后，您可以找到具有匹配UID的行，并将它们传递给网格的

.collapseGroup（）

函数以重新折叠它

来自jsFiddle copy/pasted in的代码（请注意，我只在City列上设置了模板，因此在本例中只有City列将保留分组折叠！）：

HTML:

刷新

JavaScript:

var\u getCollapsedUids=函数（）{
var collapsedUids=[]；
$（“#grid.k-grouping-row span[data uid]”）
.每个（功能（idx，项目）{
若有（$（项目）
.最近（“.k-分组-行”）
.儿童（“td:第一”）
.attr（“aria扩展”）=“false”）{
collapsedUids.push（$（item.data（“uid”））；
}
}
);
回缩；
};
var_collapseUids=函数（网格，collapseUids）{
$（“#grid.k-grouping-row span[data uid]”）
.每个（功能（idx，项目）{
if（$.inArray（$（item.data（“uid”），collapsedUids）>=0）{
console.log（“折叠：”+$（项）.data（“uid”））
网格.collapseGroup（$（项目）.closest（“tr”）；
}
}
);
};
var refresh=函数（）{
var collapsedUids=_getCollapsedUids（）；
var grid=$（“#grid”）.data（）.kendoGrid；
grid.dataSource.data（createRandomData（50））；
_羽衣甘蓝（网格，羽衣甘蓝）；
};
$（“#刷新”）。单击（刷新）；
$（“#网格”）.kendoGrid({
数据源：{
数据：createRandomData（50），
页面大小：10
},
分组：对，
可排序：是的，
可分页：{
刷新：是的，
页面大小：正确
},
列：[{
字段：“名字”，
<tr class="k-grouping-row" data-distinct-values="['Sales','Toys, Games and Videos']">. 

   ...  data-distinct-values="['California','Beverly Hills','90210']"

var expandedGroups = [];

    function updateExpandedGroupsList() {
    expandedGroups = []; // reset state

    // find the list of group labels adjacent to expanded group icons
    var listOfExpandedGroupsLabels = $("#gridId .k-icon.k-i-collapse~span");
    for (i = 0; i < listOfExpandedGroupsLabels .length; i++) {
        expandedGroups.push(listOfExpandedGroupsLabels [i].innerHTML);
    }
  }

    collapseGroups(expandedGroups);

  // method collapse groups, excluded groups will not be touched
    function collapseGroups(listOfExcludedGroups) {
    var grid = $("#gridId").data("kendoGrid");   
    if (!listOfExcludedGroups) {
        listOfExcludedGroups = [];
    }
        $(".k-grouping-row").each(function () {            
            var groupName = $(this).find("span")[0].innerHTML;
            if (groupName && listOfExcludedGroups.indexOf(groupName) > -1) {
                return; // continue
            }
            grid.collapseGroup(this);
        });   
    }