Grid performance: Slow refresh with large data sets

4 posts, 0 answers
  1. Siddhartha
    Siddhartha avatar
    7 posts
    Member since:
    Apr 2012

    Posted 07 Aug 2012 Link to this post

    Hello all,

    Scenario:
    My web app consists of a Kendo grid bound to Kendo datasource with around 3000 rows. I am pushing updates from the server and updating the datasource, sometimes at the rate of 10 updates/second.

    Problem:
    Pushing data into the datasource and the resultant grid refresh is taking too much time (pushing data into datasource: 30ms and rendering: 300 ms), much slower than the speed with which updates are being delivered. This makes the UI unresponsive.

    Ask:
    I have already considered paging, but I want to avoid it. One of the things I want to do is limit grid refreshes to once every 500 ms, as updating the grids any faster will not be of perceptible advantage to the users. So, is there a way to have a datasource-connected grid refresh only at specific times instead of with every update?

    If I tweak the refresh() function for Grid class in kendo.web.js, and setTimeout() for 500 ms, then this seems to work, but is that a good way to achieve this "delayed" refresh, or can there be a better and more elegant way of achieving this?
    Code follows:

            /**
             * Reloads the data and repaints the grid.
             * @example
             * // get a reference to the grid widget
             * var grid = $("#grid").data("kendoGrid");
             * // refreshes the grid
             * grid.refresh();
             */
            refreshRequestScheduled: false,
            refresh: function(e) {
           
            //if there are requests, return as next refresh will take care of this update
            if (this.refreshRequestScheduled) {
    return;
            } else {
            //if there are no more requests, schedule one
            this.refreshRequestScheduled = true;
             var that = this;
            setTimeout(function(e) {

                            ... //original refresh() code

            that.refreshRequestScheduled = false;
            }, 500); //should be triggered in this much time
            }
           }
       });


    Thanks,
    Siddhartha
  2. Andrew
    Andrew avatar
    171 posts
    Member since:
    Jun 2009

    Posted 02 May 2013 Link to this post

    I am in exactly the same boat.
    Lots of data arriving very very quickly.

    Were you able to solve this?
  3. Kendo UI is VS 2017 Ready
  4. Kyle
    Kyle avatar
    17 posts
    Member since:
    Aug 2011

    Posted 22 Mar 2014 Link to this post

    I, too, am looking for a similar fix.

    I'd like to almost suspend the grid long enough for me to populate the datasource, and then resume the grid.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Mar 2014 Link to this post

    Hi,

    Calling e.preventDefault when handling the grid dataBinding event will prevent the refreshing. You can do something like this:

    var suspendRefresh = false;

    $("#grid").kendoGrid({
      /* other configuration */
     dataBinding: function(e) {
          if (suspendRefresh) { 
             e.preventDefault();
          }
     }
    });

    Then simply set suspendRefresh to true. After you have finished set it back to false and call the grid refresh method.

    suspendRefresh = true;
    /* update the grid */
    suspendRefresh = false;
    var grid = $("#grid").data("kendoGrid");
    grid.refresh();

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready