Search code examples
angularjskendo-uitelerikkendo-datasourcekendo-ui-grid

Kendo UI DataSource toJSON is behind by a value


I have an angular application where I am trying to create batch editing in a Kendo Grid. I am manually adding data to the grid, so not using the datasource's transport mechanism, but rather just calling the .data() on the datasource.

When I edit a cell it correctly fires the save event, which also passes the modified data item, however when I call .toJSON() in order to get the raw data of the model, the output of .toJSON() seems to be different from the output of the model itself. It is as if the .toJSON() is behind by an iteration because when I edit the cell again it's the previous value I get.

An example of it can be seen here: http://dojo.telerik.com/ujiSu/5

Try to edit the product name, then in the console you can see the output of model and the output of model.toJSON()

I have tried calling .read() on the datasource before .toJSON() but that results in the datasource being emptied for some reason.

I have also been looking at the dirty property of the model data, forcing it's dirty state to change, but also without any different results.

My goal is to get the raw current data which is displayed in the grid and the datasource.

Any help with this is much appreciated.


Solution

  • In the save event of the grid, the model has not yet been updated. It will be updated by the grid(i.e. pushed into the grid's dataSource) after the save event. This is because the save event is cancel-able via e.preventDefault(). http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save

    So, e.model contains the current state of the dataSource item and e.values contains the updated fields until after the save completes, at which point the values in e.values are pushed into the dataSource model.

    You either need to combine e.values with e.model in the grid save event or you may want to instead look at the DataSource change event http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-change where the action is "itemchange" as that will occur after the grid save event(as long as you haven't cancelled it).