Modifying datasource values is very slow with bigger data sets

[ICT]

Hi,

I was working with Datasource and Grid and doing some mass updates for the data (see my earlier post about what I'm trying to achieve). For smaller datasets everything went okay.

Then I tried with real data, having a couple of thousand rows. It's quite big, but I would like to avoid server pagination at this point, since I'd like to use Kendo filters and sorting on the data.

It turns out setting data values is roughly of quadratic complexity and for my use it takes far too long to be actually usable. My timing test results are as follows:
100 rows of data, ~1200 ms
200 rows of data, ~4600 ms
400 rows of data, ~16000 ms

My question is, am I doing something wrong? What is the correct and performance-aware way of updating Datasource contents? Here's the code that causes the problem:

01.$("#testi").click(function() {
02.    var data=DS.data();
03.    for (var i=0; i<data.length; i++) {
04.        var row = DS.at(i);
05.        if(row.fi==row.en) {
06.            row.set("ok", true);
07.        } else {
08.            row.set("ok", false);
09.        }
10.    }
11.});

It seems that row.set is the slow one. I tried accessing the data on if condition with both "row.fi" and "data[i].fi", but turns out they are both very fast.

I also tried replacing var row = DS.at(i); with var row = data[i]; but they seem to do virtually the same thing with no performace difference.

For what it's worth, I'm on Google Chrome 27.

[Atanas Korchev]

Hello Janne,

 Changing a value using set will trigger the data source change event and the whole grid will be rebound. If you want to perform lots of updates you can avoid the set method and call the grid's refresh method when the update is finished:

$("#testi").click(function() {

02.    var data=DS.data();

03.    for (var i=0; i<data.length; i++) {

04.        var row = DS.at(i);

05.        if(row.fi==row.en) {

06.            row.ok = true;

07.        } else {

08.            row.ok = false;

09.        }

10.    }
          grid.refresh();

11.});

Regards,
Atanas Korchev
Telerik

[ICT]

Thank you Atanas, this is exactly what I was looking for!

[Dan Foster]

If you have an aggregate sum on one of the columns (using an AJAX datasource with ServerOperations set to false), it is not updated when grid.refresh() is called, or even grid._footer() - any thoughts on why?

[Atanas Korchev]

Hi,

 You can call the sync() method of the grid's data source instead. Here is a live demo: http://jsbin.com/iPOceHo/1/edit

Regards,
Atanas Korchev
Telerik

[Dan Foster]

Hello, thanks for the reply. As mentioned, the datasource is using an AJAX call to a remote service, so calling .sync is not an option as further changes may be required (e.g. I don't want to save the data just yet).

Thanks again.

[Atanas Korchev]

Hi Dan,

 This then looks like a quite different issue from the one discussed in this thread. I would ask you to provide a runnable version of your project which we can examine. Then we would get back with a solution suitable for your use case. Feel free to open a new forum thread or support ticket.

Regards,
Atanas Korchev
Telerik

[Ali]

Changing or modifying value with set method in DataSource is very slow, especially if you have to make a bulk change to grid bound datasource. You can use the below code to update/modify dataSource much faster than set method and even if you have to update/modify a particular field this code will work for that as well. I have example for both. DataSource is nothing just a JSON structure and we can use and modify data within structure easily the way I am doing in this.

//Start----All Fields-------

function AnyName(){

var data = $('#gNSF').data("kendoGrid").dataSource.data();
$.each(data[2].toJSON(), function (field, value) {
                    data[2]["'" + field + "'"] = value * (percentMultiplyer / 100);
            }
    });

//Refresh Grid
$('#gNSF').data("kendoGrid").refresh();

}
 //End-----All Fields-------

 //Start----Particular Fields-------

function AnyName()

{

var data = $('#gNSF').data("kendoGrid").dataSource.data();
$.each(data[2].toJSON(), function (field, value) {

if(field.indexOf('week') != -1)

  {
       data[2]["'" + field + "'"] = value * (percentMultiplyer / 100);
   }

}
});

//Refresh Grid
$('#gNSF').data("kendoGrid").refresh();}

//End-----Particular Fields-------