This is a migrated thread and some comments may be shown as answers.

Paging and batch editing

7 Answers 311 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 19 Jun 2012, 05:41 PM
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?

7 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 19 Jun 2012, 07:01 PM
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?
0
Steve
Top achievements
Rank 1
answered on 20 Jun 2012, 05:04 PM
Based on this forum post from january, I was able to improve the code:

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?
0
Ori
Top achievements
Rank 1
answered on 28 Jan 2016, 11:00 AM

Hello,

any update on this?

0
Ori
Top achievements
Rank 1
answered on 29 Jan 2016, 03:11 PM

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.

0
Boyan Dimitrov
Telerik team
answered on 03 Feb 2016, 08:02 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ori
Top achievements
Rank 1
answered on 04 Feb 2016, 09:31 AM

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 :)

0
Boyan Dimitrov
Telerik team
answered on 09 Feb 2016, 11:50 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
Ori
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or