更改 Kendo 网格中的数据太慢答案

【问题标题】：Changing the data within a Kendo grid is too slow更改 Kendo 网格中的数据太慢
【发布时间】：2021-02-19 23:28:31
【问题描述】：

我有一个剑道网格，显示 4000-6000 行之间，有 7 列，并且能够被用户过滤以仅显示用户定义的日期范围内的数据。此网格不会使用新数据进行更新，而是仅显示在初始化时检索到的完整数据集的子集。当我更改正在显示的子集时，会出现非常明显的 5 秒停顿。 我想知道是否有更有效的方法可以更改数据，因为我知道一些程序使用 Kendo Grid 以更好的性能显示 10,000 行。

这是我用来更新网格的代码。前四行创建了一个数据数组，然后我调用 dataSource.data() 函数将其放入网格中。这会导致我在剑道网格中的日期格式重置，因此我重新定义了剑道网格选项中的列。

//Create new data array based o nthe user defined date range
    let x = chart.scales["x-axis-0"];
    var min = new Date(x.min);
    var max = new Date(x.max);
    var newData = vm.createDataArrayAtDates(min, max)

//place data into the kendo datasource object
    grid = $("#grid").data("kendoGrid");
    data = grid.dataSource.data(newData);

//redefine the columns of the kendo grid
    var options = grid.getOptions();
    options.columns = vm.createGridColumns();
    grid.setOptions(options);

【问题讨论】：

标签： javascript kendo-ui kendo-grid

【解决方案1】：

我找到了一种方法来提高我的剑道网格的性能（这也改进了页面上的其他所有内容）。为此，我在剑道网格中启用了“虚拟滚动”。开启此功能将 5 秒延迟变为 5 毫秒延迟！

这里是关于虚拟滚动的 Telerik 页面的链接： https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/

这是我的实现：

          vm.kendoGrid = $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: vm.createDataSource(),
                        type: "odata",
                        sortable: true,
                        scrollable: {
                            virtual: true
                        },
                        filterable: {
                            extra: false
                        },
                        columns: vm.createGridColumns(),
                        height: 450
                    })
                });

我在下面复制了虚拟滚动所需的特定行：

sortable: true,
scrollable: {
    virtual: true
}

【讨论】：