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?
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...