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

Question

I have an Angular single page app with a kendo grid that is bound to a RESTful API. When this data is updated externally, I have a web socket (PubNub) function I am triggering with the intent to refresh and display externally changed data while preserving the hierarchy of the grid as well as selected row.

I can get the data grid to refresh but this doesn't refresh the datasource with the changed data from the API. If I include a dataSource.read(), then it seems to prevent my persistence of the hierarchy, IE it closes previously opened hierarchical grids.

I have an tried to use the example from the Telerik Docs for this listed here: Persist expanded rows after refresh

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();


    };

Jim Hankins Jim Hankins · Accepted Answer · 2015-10-21T19:16:40

The solution was rather simple actually. You can't use the uid as this is generated upon each new read for the observable array. The correct choice is to use a model id as the below example:

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();


};

Thanks to the Telerik support team for this response. Here is their updated example on how to persist expanded rows after a refresh of a Kendo-UI Grid when a dataSource.read() is required.

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

1 Answers