BalaKrishnan웃
BalaKrishnan웃

Reputation: 4557

How to prevent the whole grid from refreshing when a single cell data changes in kendo grid?

While we can use virtualization or paging to speed up refreshing, the whole-grid refresh for each data change is not good at all. Is there a way to avoid this?

This gets worse when multiple data changes in the bound objects, the grid gets refreshed for each change, which is not good either.

function PresonDetails(_contactName, _contactTitle, _country, _companyName) {

Object.defineProperties(this, {
    "ContactName": {
        get: function () {
            return this._contactName;
        },
        set: function (value) {                
            this._contactName = value;
        },
        enumerable: true,
        configurable: true
    },
        "ContactTitle": {
        get: function () {
            return this._contactTitle;
        },
        set: function (value) {
            this._contactTitle = value;
        },
        enumerable: true,
        configurable: true
    },
        "Country": {
        get: function () {
            return this._country;
        },
        set: function (value) {
            this._country = value;
        },
        enumerable: true,
        configurable: true
    },
        "CompanyName": {
        get: function () {
            return this._companyName;
        },
        set: function (value) {
            this._companyName = value;
        },
        enumerable: true,
        configurable: true
    }
});

this.ContactName = _contactName;
this.ContactTitle = _contactTitle;
this.Country = _country;
this.CompanyName = _companyName;
}

    (function () {
        var details = [];
        details.push(new PresonDetails("ContactName1", "ContactTitle", "USA", "MICro")); 

        var refresh = window.kendo.ui.Grid.fn.refresh;

         window.kendo.ui.Grid.fn.refresh = function () {
             alert("Grid Refresh");
             refresh.call(this,arguments);
         }

        var $grid = $('#grid');
        $grid.kendoGrid({
            scrollable: true,
            dataSource: details,
            groupable: false,
            sortable: false,
            editable: true,
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 200
            }, {
                field: "ContactTitle",
                title: "Contact Title",
                width: 250
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150,
            }]
        });
    })();

here is the demo

Upvotes: 1

Views: 1445

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

Preventing the dataBinding event of the grid will stop the refresh:

funnction avoidRefresh(e) {
   e.preventDefault();
}

// stop refresh
grid.bind("dataBinding", avoidRefresh);


// allow refresh
grid.unbind(avoidRefresh);

Upvotes: 2

Related Questions