Question

Modifying an element using set of a KendoUI grid removes the selection.

If a have a KendoUI DataSource defined as:

var dataSource = new kendo.data.DataSource({
    data    : [
        { "id": 1, "item": "item1", "value": "foo" },
        { "id": 2, "item": "item2", "value": "foo" },
        { "id": 3, "item": "item3", "value": "foo" },
        { "id": 4, "item": "item4", "value": "foo" }
    ],
    pageSize: 5
});

and the grid as:

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    columns   : [
        { field: "item", title: "Item" },
        { field: "value", title: "Value" }
    ],
    selectable: "row"
}).data("kendoGrid");

If I click in a row (select it) and then update the model using the following code:

dataSource.data()[0].set("value", "bar");

The selection gets lost.

Sample code in JSFiddle here

Instructions:

1. Select any row.
2. Click the button for changing the value of the first row.

Is there any way of preserving selection when updating a local DataSource?

Answer 1

This is expected behavior when a change event of the dataSource occurs the Grid reacts and it is redrawn. You can silently update the field like this:

dataSource.data()[0].value = "bar";

However this will not trigger the change event and the Grid wont be updated either.

To preserve the selection of the Grid between ‘refreshes’ you can use the approach covered in this code library article. You can store them in a cookie or in the memory, it is up to you.

Regards