grid - Telerik Kendo UI 网格 : grouping and sorting survive 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 网格中的组标题行具有 UID(在刷新后仍然存在)，则可以完成。 但请参阅下面不涉及持久 UID 的建议方法。

使用案例:
这是此功能的典型用例，但有些戏剧性。疾病控制中心正在按城市监测特定流感病毒株的实时爆发情况。每 15 秒刷新一次数据集。他们目前正专注于洛杉矶，并扩大了这座城市，而其他城市则崩溃了。如果整个网格每 15 秒扩大一次，就会激怒 CDC 的医生，他们进去掐死程序员，然后回家打高尔夫球，洛杉矶的每个人都屈服了。剑道真的要为那场灾难负责吗？

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

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

现在，如果那个 k-group-indicator 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

可以理解，这不是内置功能。这非常复杂，因为如果您有嵌套分组，则必须记住它所在层次结构中的每个折叠组。由于项目将移入和移出数据源，因此跟踪起来会很麻烦。

也就是说，只要你不要太复杂，这里有一个非常hackish 的方式来完成你想要的。它只是使用 groupHeaderTemplate 属性为每个分组行添加一个 UID。我只是使用列名 + 值作为 UID，如果您进入多个分组，这在技术上是错误的，但作为示例已经足够了。

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

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

Here is a working jsFiddle that demonstrates this.

来自 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"
        }
    ]
});

就我个人而言，我根本不喜欢这个解决方案。它太hacky了，而且DOM遍历太多了。但是，如果不重新实现网格小部件，我想不出更好的方法来做到这一点。也许它足以满足您尝试完成的任务或为您提供更好的想法。

最后一个音符；我检查了 Kendo UI 源代码，它似乎没有跟踪哪些分组被展开/折叠。他们做了一些类似于我对 aria 属性所做的事情，但检查驱动图标状态的类:

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

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