如何使用Angular更新Kendo-UI网格上的数据并持久化层级选择?

How do I update data on Kendo-UI grid and persist hierarchy selection using Angular?

本文关键字：持久化 选择 数据 Angular 何使用 更新 Kendo-UI 网格      更新时间：2023-09-26

我有一个Angular单页应用，它有一个剑道网格，绑定到一个RESTful API。当这些数据在外部更新时，我有一个web套接字(PubNub)函数，我触发的目的是刷新和显示外部更改的数据，同时保留网格的层次结构以及选定的行。

我可以刷新数据网格，但这不会用来自API的更改数据刷新数据源。如果我包含一个dataSource.read()，那么它似乎阻止了我的层次结构的持久性，IE它关闭了以前打开的层次网格。

我已经尝试使用这里列出的Telerik Docs中的示例:在刷新后保存扩展的行

vm.savestate = function(e) {
        console.log('save pressed:');
        var grid = $scope.responseGrid;
        var expanded = $.map(grid.tbody.children(":has(> .k-hierarchy-cell .k-minus)"), function(row) {
            console.log(row);
            console.log($(row).data("uid"));
            return $(row).data("uid");
        });
        grid.one("dataBound", function() {
            grid.expandRow(grid.tbody.children().filter(function(idx, row) {
                return $.inArray($(row).data("uid"), expanded) >= 0;
            }));
        });
         grid.refresh();

    };

解决方案实际上相当简单。你不能使用uid，因为它是在每次读取可观察数组时生成的。正确的选择是使用模型id，如下例所示:

vm.savestate = function(e) {
    console.log('save pressed:');
    var grid = $scope.responseGrid;
    var expanded = $.map(grid.tbody.children(":has(> .k-hierarchy-cell .k-minus)"), function(row) {
        console.log(row);
        console.log($(row).data("uid"));
        return grid.dataItem($(row)).EmployeeID; //Use Model Data instead of uid
    });
    grid.one("dataBound", function() {
        grid.expandRow(grid.tbody.children().filter(function(idx, row) {
            return $.inArray(grid.dataItem($(row)).EmployeeID, expanded) >= 0;//Use Model Data instead of uid
        }));
    });
     grid.refresh();

};

感谢Telerik支持团队的响应。下面是他们更新的示例，说明在需要dataSource.read()时，如何在刷新Kendo-UI Grid后持久化展开的行。

相关文章：