Modifying datasource values is very slow with bigger data sets

8 posts, 0 answers
  1. ICT
    ICT avatar
    17 posts
    Member since:
    May 2013

    Posted 12 Jun 2013 Link to this post

    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.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. ICT
    ICT avatar
    17 posts
    Member since:
    May 2013

    Posted 13 Jun 2013 Link to this post

    Thank you Atanas, this is exactly what I was looking for!
  5. Dan Foster
    Dan Foster avatar
    21 posts
    Member since:
    Jun 2010

    Posted 12 Sep 2013 Link to this post

    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?
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Dan Foster
    Dan Foster avatar
    21 posts
    Member since:
    Jun 2010

    Posted 13 Sep 2013 Link to this post

    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.
  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Ali
    Ali avatar
    1 posts
    Member since:
    Apr 2014

    Posted 07 Apr 2015 in reply to Atanas Korchev Link to this post

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

     

     

     

     

     

     

Back to Top
Kendo UI is VS 2017 Ready