Calling refresh() from within dataBound

2 posts, 0 answers
  1. Serdar Kilic
    Serdar Kilic avatar
    4 posts
    Member since:
    Nov 2004

    Posted 13 Nov 2017 Link to this post

    I'm having issues refreshing the grid after doing some work post data-bind.

    Within the DataBound event on a Kendo Grid I have the following code block:

    var items = this.dataSource.data();
     
    for (i = 0; i < items.length; i++) {
         
        var row = this.dataSource.at(i);
         
        switch (row.ChangeStatus) {
            case 0:
                row.ChangeStatus = 'Pending';
                break;
            case 1:
                row.ChangeStatus = 'Approved';
                break;
            case 2:
                row.ChangeStatus = 'Declined';
                break;
            default:
                break;
        }
    }

     

    When I run this and put it through the debugger I can see that the values are updated pretty quickly. To then update the grid I'm calling this.refresh() but I'm seeing a massive slowdown (and sometimes the page becomes unresponsive).

    If I remove the call to $('#gridPortChanges').data("kendoGrid").refresh(), the grid renders just fine (albeit with 0,1, 2 in the ChangeStatus field). Additionally, if I manually call refresh() from the developer after the page loads it too runs fairly quickly, so it's only an issue when called from dataBound.

  2. Georgi
    Admin
    Georgi avatar
    574 posts

    Posted 15 Nov 2017 Link to this post

    Hello Serdar,

    The described behavior is expected since calling refresh in a function related to the data-binding mechanism of the Grid causes endless loop. In other words refreshing the grid leads to rebinding it, which leads to refreshing...

    If you want to refresh the grid only once when the grid is bound to its data I recommend you to attach the handler using the one method. This way the handler will be executed only the first time dataBound is triggered.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top