CODEWITHSUNDEEP
jquerykendo-uikendo-gridkendo-asp.net-mvc
Gowtham Alan
Gowtham Alan

Reputation: 234

How to check existing row values changed or not at onDataBound event for Kendo UI Grid?

I am using Kendo UI Grid in Asp.Net MVC.

I called the below event inside document ready function.

function RefreshGrid() {
        setInterval(function () {
            $("#MediaBatchGrid").data("kendoGrid").dataSource.read();
            $(".k-loading-image").hide();
        }, 5000);
    }

whenever invoke this above function while request makes to the server. whole data will be bind in the Kendo grid UI. so, the problem is, Grid was flickering even retain that existing values in the Grid. My concern is, How to stop this flickering in the client side? what if new data was different from existing value, then only on databound event will happen is awesome, otherwise return & No need to any UI change in the Grid

Upvotes: 0

Views: 604

Answers (1)

Gowtham Alan
Gowtham Alan

Reputation: 234

I struggle with this for a while, finally, I found the simple solution.

we should define an event for databinding in the HTML. i.e,

 .Events(x => x.DataBinding("Grid_DataBinding"))

Jquery code:

Grid_DataBinding = function (e) {



    var displayedData = $("#Grid").data().kendoGrid.dataSource.view();// this is to get Existing values from Grid

    var displayedDataAsJSON = JSON.stringify(displayedData);
// then convert it as JSON
    var newData = e.sender._data;// to get new data coming from Server

    var newDataAsJSON = JSON.stringify(newData);// convert it too as JSON

    if (newDataAsJSON === displayedDataAsJSON) {// Equal check

        e.preventDefault();// if both are equal, just prevent data binding event
        $(".k-loading-mask").hide();// this is to avoid grid flickering, hiding loader too


    }


}

Upvotes: 1

Related Questions