I have a grid in batch edit mode. I am using server-side paging. It seems like if I make some edits, then change the page, the changed cells are lost. I am already attaching to the save() event and capturing each cells' change to do some custom validation, so I don't lose any *data*, just the visual cue that the cell was edited. 

My current idea for a workaround would be to attach to the datasource's change() event, see if any of the loaded rows were in my unsubmitted changes, and re-mark the cells edited. Is there a more efficient way to accomplish this with the framework?

My current solution was to define a function on the dataBound() event:

dataBound: function (e) {
if (isGridEditatble) {
var dataLength = this._data.length;

for (var i = 0; i < dataLength; i++) {
var item = this._data[i];
var editedLength = itemsToValidate.length;

for (var j = 0; j < editedLength; j++) {
var editedItem = itemsToValidate[j];

if (item.Id == editedItem.Id && item.Value != editedItem.Value) {
item.Value = editedItem.Value;
item.OriginalValue = editedItem.OriginalValue;
item.dirty = true;
myGrid.refresh();
}
}
}
}
}

This sets the data correctly, but visually isn't recreating the red icon that indicated the cell was edited. Is there an easy way to get that from my current approach, or will I need to hunt down the cell itself and apply the CSS?

Hello,

any update on this?

I tried the approach above. I'm keeping all changes made in grid,
pushUpdate-ing them back to dataSource once the page where they were
made is active, there's no problem. The problem occurs when I want to
batch-send them to server after user clicks Save button in toolbar.

Because "saveChanges" event happens later than "requestStart" event,
changes done on not-active pages are not attached to dataSource data before
the request starts and are send in another batch which is unpleasant. I did some
nasty "hacks" to make things going, but it's not really a nice solution.

I tried to block the first request using preventDefault() method, but without success.

Hello Ori,

 

As far as I understand the main idea is to prevent going to another page if there are some not synced changes. 

 

The requestStart event of the Kendo UI DataSource is preventable as mentioned in the article. Additionally in order to check whether there are any not synced items in the Kendo UI DataSource you can use the hasChanges method. So if there are some not synced data items - you can prevent the request and perform saving/sync before navigating to another page. 

 

Regards,
Boyan Dimitrov
Telerik

Hello Boyan,

 that is very true and correct, but there was another problem with this approach: all filters, paging, page sizing etc. applied that caused requestStart event triggering stayed selected even though datasource was prevented from change. At first I tried to revert filtering etc. settings from a "cache" I made for this purpose, but there's so many various settings that it I thought automatic saving will be easier... Man, I was wrong and foolish :)

Hello Ori,

 

I am afraid that requestStart event is fired after the current state (filter, sorting expression and etc) is already applied and even if the event is prevented, it could not be revert to the previous state. 

 

This is a limitation and there is no easy way to overcome it. My suggestion in this case is either           1. Enable the autoSync option of the Kendo UI DataSource in order to sync any changed data with the server when the data item is modified. 

      2. Use inline or popup edit mode, where changes are synced with the server when update button is clicked. 

 

 

Regards,
Boyan Dimitrov
Telerik