[Solved] Grid looses selection on push updates

[Alexander]

Hi there.

We are going to use Kendo UI for our new product GUI. We want to display a list of nodes using a Grid. Because node information changes over time, this Grid needs to be refreshed every ~5s to reflect the current cluster status. Using the DataSource push functionality, this works without "flickering" (this happens if you call read() on the DataSource every time). But unfortunately the selection of the nodes is lost on every update, which is not good for the usability. Is there any convenient way to store the selection before the push update and restore it afterwards?

This is our small DataSource (perhaps there's a way to improve it, too):

var dataSource = new kendo.data.DataSource({
    type: 'json',
    transport: {
        push: function(callbacks) {
            setInterval(function() {
                $.ajax({
                    url: 'http://127.0.0.1:8093/api/updater/latest/nodes',
                    dataType: 'json',
                    username: 'admin', password: 'admin',
                    success: callbacks.pushUpdate,
                });
            }, 2000);
        },
    },
    schema: {
        data: 'nodes',
        model: {
            id: 'id',
        },
    },
});

Thank you for your help.

[Alexander Valchev]

Hello Alexander,

The behavior you described is expected and occurs because after data is changed the Grid widget is refreshed.
Please check this help topic to see how you can persists the selection.

• http://docs.telerik.com/kendo-ui/web/grid/how-to/Selection/persist-row-selection-while-paging

The help article is intended to show how to persists the selection after paging but the same approach is also valid for your case.
Basically you should use the change event of the Grid to store the IDs of selected records and the dataBound event of the Grid to re-select them.

Regards,
Alexander Valchev
Telerik

 

 

[Nisarg]

Hi Alexander,

The solution that you pointed out works well when there's only one grid. I have a tabstrip, and for each tab's content, I have a different grid. So what modifications should I make for my situation?

Thank you in advance,
Nisarg Patel

[Alexander Valchev]

Hi Nisarg,

Could you please explain what is the problem when you have multiple grids on the page? Which part of the implementation fails and what issue you observe?

Looking forward to your reply.

Regards,
Alexander Valchev
Telerik

 

 

[Nisarg]

I used this method: When the change event is fired, I store the selection of the grid that is on the current tab, and on dataBound event, I select the stored value. But all the selections aggregate to the first grid instead.

[Alexander Valchev]

Hello Nisarg,

You should store the selection for each grid in a separate variable. On DataSource you should read the value that corresponds to the Grid that is refreshed.

Regards,
Alexander Valchev
Telerik

 

 

[Nisarg]

Also, I wanted to ask if grid uses any unique identifier for its rows, or if one could be specified in the data model.

[Alexander Valchev]

Hi Nisarg,

Yes the Grid uses unique identifier for its rows - there is a UID attribute that corresponds to the auto generated item UID.

• http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#fields-uid

Regards,
Alexander Valchev
Telerik