data binding - Kendo-UI grid Set Value in grid with Javascript

Question

I'm just wondering how you go about changing a value of a row in a grid in JavaScript so that it is marked as 'dirty' in the grid and the underlying datasource.

e.g. I have a list of Contact/Customer. They have 3 fields FirstName/LastName/IsPrimaryContact. There can only be 1 primary contact, so when the primary contact is set to true on a record I have JavaScript code that loops through the datasource and sets any other contacts set as primary to false.

The JavaScript all fires fine and the data fields are set correctly but there are two problems: 1. The grid is not updated with the changes I make under the hood to the datasource 2. The records changed are not marked as "dirty" and therefore not sync'd back when I call a Datasource.sync()

I can fix the second issue by manually setting the dirty field on the record, but this doesn't seem right. It feels like I should be updating the field at the grid level so that it takes care of it in both the UI and the datasource.

Any ideas on how to go about this?

Thanks

Answer 1

Basically when you want to update a record you should use the set method of the model. For example to update the first record of the dataSource you should update it like this:

var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('FirstName','The updated Name');

The above should automatically mark the flag as dirty and it will notify the Grid that there are changes, so the Grid will automatically refresh.

Also if you want to retrieve the object related to a specific row directly you could use the dataItem method of the Grid.