在 Kendo 网格内更改数据太慢

Question

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

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

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

Answer 1

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

这是关于虚拟滚动的 telerik 页面的 link： 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
}

在 Kendo 网格内更改数据太慢

Changing the data within a Kendo grid is too slow

javascript

kendo-ui

kendo-grid