CODEWITHSUNDEEP
kendo-ui
OnaBai
OnaBai

Reputation: 40887

KendoUI grid modify cell removes selection

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?

Upvotes: 0

Views: 2706

Answers (2)

Mika Lammi
Mika Lammi

Reputation: 1298

I was able to find solution for a very similar problem. I tried to select next row after modifying selected row, but updating data item cleared selection.

The trick was to save data-uid of the element to be selected. After update, I simply select element by uid.

var selected = grid.select();
var next = selected.next();
var nextUid = next.data("uid");
var dataItem = grid.dataItem(selected);
if (dataItem) {
    dataItem.set("value", dataItem.get("value") - 1);
    if (next.length)
        grid.select($("#grid").find("*[data-uid='" + nextUid + "']"));
}

You can try it here.

Upvotes: 0

Petur Subev
Petur Subev

Reputation: 20193

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

Upvotes: 2

Related Questions