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?
7 Answers, 1 is accepted
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?
dataBound: function (e) {
if (isGridEditatble) {
var editedLength = editedItems.length;
for (var i = 0; i < editedLength; i++) {
var editedItem = editedItems[i];
var model = myGrid.dataSource.get(editedItem.Id);
if (typeof model != 'undefined') {
if (model.Value != editedItem.Value) {
model.set('Value', editedItem.Value);
}
}
}
}
}
However, it still isn't at 100% - the value is updating in the cell, but the TD is not being updated with the class "k-dirty-cell" the way it does when you edit it through the UI.
Does anyone have a suggestion besides finding the TD and manually setting the class?
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