Telerik网格:分组和排序在grid.refresh()中生存，但折叠的组被扩展；如何保持状态

Question

就像监视动态更改数据的“仪表板”应用程序中的网格一样，我的(Telerik) Kendo UI网格每隔60秒定期刷新新数据：

grid.dataSource.data(freshData);
grid.refresh();  // have been informed this refresh may not be necessary

架构不会更改，但一些新行可能会出现在数据集中，有些可能已被删除。

尽管grid.refresh()保持分组不变，排序状态也被保留，但任何折叠的组都会被展开。

问:如何保持(或恢复)组的扩展/折叠状态(因此，用户专注于某个特定的扩展组，而其他组被折叠，则不会因每个组默认重新展开的定期更新而感到不便/沮丧)？

编辑:一些Winforms网格提供了一种方法，在刷新数据之前“获取组展开/折叠状态的快照”，然后在数据源刷新后重新应用该状态。如果Kendo网格中的组标题行有UI (经过刷新后仍然存在)，则可以执行.，但请参阅下面建议的方法，它不涉及持久UI。

用例:对于这个特性，这里有一个典型的，虽然有点夸张的用例。疾病控制中心正在按城市实时监测一种特定类型流感的爆发情况.每15秒刷新一次数据集。他们现在正好把注意力集中在洛杉矶，城市扩张了，其他城市崩溃了。如果每隔15秒，整个电网就会扩大，这会激怒疾控中心的医生们，他们进去掐死程序员，然后回家打高尔夫球，洛杉矶的每个人都屈服了。肯多真的想为这场灾难负责吗？

可能的特性增强建议:忽略我对上面的UID的建议。这里有个更好的方法。网格

<div class="k-group-indicator" data-field="{groupedByDataFieldName}">
    ...
</div>

现在，如果k组指示符div可以包含data-field的不同值的列表，而每个键的关联数据都是相应部分的展开/折叠状态，那么在调用dataSource.data( someNewData)方法之前，可以将该列表保存到缓冲区中，然后在侦听dataBound事件时，可以重新应用这些展开状态。要找到分组值的相应分组部分，如果k-grouping-row可以有一个名为group-data-value的属性来保存特定分组部分的分组值，这将是非常有帮助的。“销售”或“市场营销”，如果一个人是按一个数据字段，称为部门。

<div class="k-group-indicator" data-field="dept" data-title="Dept" data-dir="asc">
       ...
   <div class="k-group-distinct-values">
     <div group-data-value="Sales" aria-expanded="false" />
     <div group-data-value="Events Planning" aria-expanded="true" />
   </div>  
</div>

然后在k-grouping-row：<tr class="k-grouping-row" group-data-value="Sales">中

Answer 1

这是可以理解的，这不是一个内置的功能。这非常复杂，因为如果您有嵌套分组，则必须记住它存在的层次结构中的每个折叠组。由于项目将进入和离开DataSource，这将是一个痛苦的跟踪。

这就是说，只要你不变得太复杂，这里有一种非常简单的方式来完成你想要的事情。它只使用groupHeaderTemplate属性向每个分组行添加一个UID。我只是使用列名+值作为UID，这在技术上是错误的，如果您进入多个分组，但它足以作为一个例子。

在刷新之前，您可以从Kendo现在拥有的ARIA属性中找到已折叠的组(请注意，您必须使用2012年的Q3才能工作)。然后向下钻取模板添加的UID。

刷新后，您可以找到具有匹配UID的行，并将它们传递给网格的.collapseGroup()函数以重新折叠它。

下面是一个可以工作的jsFiddle，它演示了这一点。

以及jsFiddle复制/粘贴到中的代码(请注意，我只在City列上设置了模板，因此在本例中只有City列将保留分组折叠)！

HTML：

<button id="refresh">Refresh</button>
<div id="grid" style="height: 380px"></div>

JavaScript：

var _getCollapsedUids = function () {
    var collapsedUids = [];
    $("#grid .k-grouping-row span[data-uid]")
        .each(function(idx, item) {
            if($(item)
               .closest(".k-grouping-row")
               .children("td:first")
               .attr("aria-expanded") === "false") {
                collapsedUids.push($(item).data("uid"));
            }
        }
    );
    return collapsedUids;
};

var _collapseUids = function (grid, collapsedUids) {
    $("#grid .k-grouping-row span[data-uid]")
        .each(function(idx, item) {
            if($.inArray($(item).data("uid"), collapsedUids) >= 0) {
                console.log("collapse: " + $(item).data("uid"))
                grid.collapseGroup($(item).closest("tr"));
            }
        }
    );
};

var refresh = function () {
    var collapsedUids = _getCollapsedUids();
    var grid = $("#grid").data().kendoGrid;
    grid.dataSource.data(createRandomData(50));
    _collapseUids(grid, collapsedUids);
};

$("#refresh").click(refresh);

$("#grid").kendoGrid({
    dataSource: {
        data: createRandomData(50),
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [ {
            field: "FirstName",
            width: 90,
            title: "First Name"
        } , {
            field: "LastName",
            width: 90,
            title: "Last Name"
        } , {
            width: 100,
            field: "City",
            groupHeaderTemplate: '<span data-uid="City-#=value#">#= value #</span>'
        } , {
            field: "Title"
        } , {
            field: "BirthDate",
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        } , {
            width: 50,
            field: "Age"
        }
    ]
});

就我个人而言，我一点也不喜欢这个解决方案。它太麻烦了，DOM遍历也太多了。但是，如果不重新实现网格小部件，我就想不出更好的方法了。也许这对你想要完成的事情足够好，或者给你一个更好的想法。

最后一个注意事项:我检查了Kendo源代码，它似乎没有跟踪哪些分组被展开/折叠。它们执行类似于我对aria属性所做的操作，而是检查驱动图标状态的类：

            if(element.hasClass('k-i-collapse')) {
                that.collapseGroup(group);
            } else {
                that.expandGroup(group);
            }

如果您没有使用Kendo 2012 Q3，并且不能使用aria展开属性，则可以更改代码以检查图标类。

Answer 2

我已经启动了一个健壮的组状态保存网格扩展，该扩展旨在与Kendo和ASP.Net RadGrid (利用公共功能的特定于控件的实现)一起工作。

此扩展对Telerik的组状态保存示例进行了重大改进，并增强了RadGrid，其他任何可用的功能都无法接近Kendo示例。您可以看到改进这里的列表，也可以查看代码这里。

我想知道你的想法。

Answer 3

“回答”我自己的问题，只是为了在答案编辑器中获得更好的代码格式可读性。这是讨论的延伸。

我同意嵌套分组更复杂。如果每个k-grouping-row都有一个包含分组所基于的不同数据值数组的JSON表示的属性，那么开发人员就可以从每个折叠的k分组行中提取数据值的不同组合。(如果k分组行直接指示它是展开还是折叠，但是可以从它包含的单元格中获取信息，这会有帮助，对吗？)

有了这组折叠组的不同值，您就可以构造自己的折叠组映射。不同的数据值可以充当此映射中对象的关键；每个不同的数据组合都是唯一的，并且只与网格中的一个分组部分相关联，无论涉及多少层嵌套。

例如，对于一个两层嵌套的by Department by ProductType，我们可以看到如下所示：

<tr class="k-grouping-row" data-distinct-values="['Sales','Toys, Games and Videos']">. 

部门价值为“销售”，ProductType值为“玩具、游戏和视频”。JSON处理数据值中的逗号。

对于由state, city, zipcode组成的三层分组，我们应该有：

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

这些数据值是在创建组时已知的，因此可以将它们作为唯一句柄注入到k分组行中。

虽然distinct值是唯一的句柄，但它们并不消除遍历DOM、在希望重新应用折叠状态时访问每个k-grouping-row的需要。然而，如果认为这是一项代价太高的操作，肯多电网将不必在默认情况下实现崩溃状态的恢复。但是，您将为开发人员提供一种使用data-distinct-values=[...]实现该功能的简单方法，并且开发人员可以自行决定性能影响(如果有的话)是否符合应用程序的要求。