如何在kendo网格中更改单个单元格数据时防止整个网格刷新?

时间:2014-04-07 16:56:48

标签: kendo-ui kendo-grid

虽然我们可以使用虚拟化或分页来加速刷新,但每次数据更改的整个网格刷新都不是很好。有没有办法避免这种情况?

当绑定对象中的多个数据发生更改时,这会变得更糟,每次更改都会刷新网格,这也不好。

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,
            }]
        });
    })();

这是demo

1 个答案:

答案 0 :(得分:2)

阻止网格的dataBinding事件将停止刷新:

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

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


// allow refresh
grid.unbind(avoidRefresh);