Kendo Grid: how to update data source from code when the row changes

Question

this follows on from a few of my previous posts, regarding updating the kendo grid datasource. The last thing I want to do is have this occur when the user goes to a new row (thanks to @Lars so far for much impressive help)

I am doing this by detecting a row change ( happen to be doing this in a directive), and calling back into the grids controller where I call the sych function on the data source...

  vm.rowChangedCallback = function () {
    console.log("calling vm.gridData.sync");

    // Calling this exits edit mode and we go back to cell (0, 0) :-(
    vm.gridData.sync();
}

Full example here. For example we may tab through the first row, select a new value from the drop down, and then keep tabbing, and when we reach the second row, the callback is called that does the saving. The only problem is the grid exits edit mode and goes back to cell (0, 0).

Is a way to do the data source syncing without interrupting the edit session? Does the call need to be async (somehow) or something like that?

Any help would be greatly appreciated!

Answer 1

This is a known problem with Kendo's grid, it can't do a partial refresh, it always rebuilds the full table. See my answer here on how you might deal with that.