启用虚拟化时选择kendo网格中的行

时间:2014-04-23 15:41:16

标签: javascript kendo-ui kendo-grid

我使用kendoUI网格小部件来显示数据集。由于数据集的大小非常大(200-400k),我使用虚拟化功能来提高性能和可用性。设置网格时,我遇到了以下问题:由于启用了虚拟化,每次更改页面时都会刷新网格DOM对象(我的意思是表行)。网格的实现导致以下行为:我可以选择行,但在向下滚动到下一页并向后滚动选择消失后。以下是可以复制此问题的示例:http://trykendoui.telerik.com/OkOg

也许有人有类似的问题,可以提供一些解决方法。

1 个答案:

答案 0 :(得分:0)

您可以在网格的dataBound事件中恢复选择,例如像这样(请注意,这仅适用于单行选择,因此您可能需要适应其他模式):

$("#grid").kendoGrid({
    dataSource: dataSource,
    change: function () {
        this._lastSelectedItem = this.dataItem(this.select());
    },
    dataBound: function () {
        var row;
        if (this._lastSelectedItem) {
            row = $(this.tbody).find("tr[data-uid='" + this._lastSelectedItem.uid + "']")
            if ($(row).length > 0) {
                // or this.select(row); if you don't mind the 
                // change event getting triggered again
                $(row).addClass("k-state-selected");     
            }
        }
    },
    height: 430,
    scrollable: {
        virtual: true
    },
    selectable: true,
    columns: columns
});