Warm tip: This article is reproduced from stackoverflow.com, please click
asp.net-mvc javascript kendo-grid

Kendo Grid Select All and Save

发布于 2020-03-27 10:24:12

I'm working on a functionality on a Kendo Grid. There is a table and every row has a checkbox, there is a Select All option that checks all of the checkboxes and there is a button next to that Select All option to Update All rows, when you click on Update All it will update the Status of the selected rows within the Grid, but it hasn't updated yet on the database. To update those rows on the database you have to click a Save Changes button. The problem I'm having is that the performance is very very slow for more than a 100 rows when I click Update All button, and I know why, in the Javascript this is the code that makes the step very slow:

  var items = $('#grid').data().kendoGrid.dataSource.data();
$.each(selectedRows, function (index, r) {
 var indexOf = rows.indexOf(r);
 var item = items[indexOf];
item.set('STATUS', status); //This line of code is very slow for more than 100 records
});

So using the set method makes this process really slow, when there are more than 300 records Chrome becomes unresponsive. So I have changed it to this:

  var items = $('#grid').data().kendoGrid.dataSource.data();
$.each(selectedRows, function (index, r) {
 var indexOf = rows.indexOf(r);
 var item = items[indexOf];
item.STATUS = status; //It works fast now
});
kendoGrid.refresh();

The grid is updating correctly on the frontend, but when I click Save Changes the controller that should save those records on the database is not called, this is because the changes on the Status column are not being detected when I use the last syntax.. What is the difference between

item.set('STATUS', status);

and

item.STATUS = status; 
kendoGrid.refresh();

Why on the second step the rows are being saved to the database using the set() method but when I use item.STATUS = status; and click on Save Changes the rows that have changes are not being send on the request?

Questioner
AlexGH
Viewed
74
AlexGH 2019-07-03 23:02

So I found this answer : https://stackoverflow.com/a/20959758/5614045 And updated my syntax like this:

 var items = $('#grid').data().kendoGrid.dataSource.data();
$.each(selectedRows, function (index, r) {
 var indexOf = rows.indexOf(r);
 var item = items[indexOf];
item.STATUS = status; //It works fast now
item.dirty = true; //Added this line of code.
});
kendoGrid.refresh();

And it works now, apparently there is a dirty flag that when is set to true it means the item have changed...