1

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

1 Answer 1

2

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);
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.