row is not moved into correct group when dataitem cell value is changed

[Tim R]

What is the proper way to cause a row to be moved into another group when the value in the relevant cell of its underlying dataItem is changed programmatically?  For example, assume that the grid is being grouped by [department] and then, with the rows grouped beneath the various departments, the following updateTest() method shown below is invoked. We want the updated row to be moved to into the FOO department grouping when the grid is refreshed; also, if the grid did not previously contain a group for FOO, we want a new group created. 

Why am I trying to do this? My application is polling the database server every 30 seconds, and I am trying to figure out how to update existing data as required,  and how to insert new rows into the dataItems array real-time while the users are looking at the grid on their screens, and to do this without causing the entire grid to be rebound [with dataSource.data(someNewFreshDataWithSameSchema) ] as the dataSource.data() method destroys any groupings the users may have established, expanding all groups by default.

EDIT: Updating the underlying dataitems seemed a promising alternative approach to the data() method, but we need the refresh() method to re-apply the sorting/grouping, if not by default, then as an option:   grid.refresh( {resort:true, regroup:true}).  BUT...the re-sort/re-group should not automatically expand collapsed groups.

EDIT: if the user clicks on the ascending/descending sort button on the grouping widget in the k-grouping-header, then the updated row is correctly moved to the proper group based on its new cell value. The grid.refresh() is apparently not calling whatever re-sort method is invoked by that user action.  If the grid.refresh() called that method as well, then the code below would work. Alternatively, the API could expose the appropriate sort method and I could call it myself.

     

function updateTest() {

         var grid = $("#grid").data("kendoGrid");

         var item = $(grid.tbody).find("> tr:not(.k-grouping-row, .k-detail-row, .k-group-footer):first")       

         var dataitem = grid.dataItem(item);       

         dataitem["department"] = "FOO";

        grid.refresh();

     }

[Alexander Valchev]

Hello Tim,

DataSource contains observable items. In order to change the data programmatically please use the set method of the model. In this way the grid will be notified for the change and will refresh in order to apply the changes.

function updateTest() {
    var grid = $("#grid").data("kendoGrid");
    var item = $(grid.tbody).find("> tr:not(.k-grouping-row, .k-detail-row, .k-group-footer):first")
    var dataitem = grid.dataItem(item);
    dataitem.set("department", "FOO");
    //widget will be refreshed out of the box, groups will be changed too
}

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team