Question

我正在为kendo-ui使用AngularJs网格，并希望激活virtualization of remote data功能。为了测试我设置了pageSize: 5。以下是来自telerik网站的virtualization of remote data的说明：

有些情况下您可能需要使用大量数据在网格中，立即获取和处理这些数据由于浏览器资源有限，性能下降。幸运的是，Kendo UI网格有一个称为数据虚拟化的解决方案这可以减轻大量运行时的任何减速数据。通过scrollable-＆gt;虚拟配置选项启用时，它显示网格内容的垂直滚动条并仅显示通过网格数据的pageSize属性设置的项目数资源。拖动滚动条并超出pageSize之后发出自动请求以检索和呈现下一组网格行。网格支持本地和远程数据虚拟化功能，而在此演示中获取记录来自远程端点。

我也设置了以下内容：

HTML：

<div kendo-grid k-options="mainGridOptions" id="historyGrid" style="width: auto;"></div>

JS for grid：

    var vm = $scope;
vm.viewMode = {
    mainGridOptions: {
    visible: true
    }
};
vm.mainGridOptions = {

            columns: [
                // here columns
            ],
            onRegisterApi: function (gridApi) {
                vm.gridApi = gridApi;
            },
            dataSource: {
                schema: {
                    model: {
                        fields: {
                            YearBalance: { type: 'number' },
                            Typezalezh: { type: 'string' },
                            License: { type: 'string' },
                            ObjectName: { type: 'string' },
                            ZalezhName: { type: 'string' },
                            PlastName: { type: 'string' },
                            Category: { type: 'string' },
                            Parameter: { type: 'string' },
                            LastVal: { type: 'string' },
                            Val: { type: 'string' },
                            Operation: { type: 'string' },
                            EndT: { type: 'date' }
                        }
                    }
                },

                pageSize: 5,
                transport: {
                    read: function(e) {
                        dataservice.getImportResultReport().then(function(data) {
                            e.success(JSON.parse(data));
                            console.log(data);
                        });
                    }
                }
            },
            serverPaging: true,
            height: screen.height - 330,
            minwidth : 1190,
            batch: true,
            scrollable: {
                virtual: true
            },
            sortable: true,

            serverSorting: true,
            filterable: {
                extra: false,
                operators: {
                    string: {
                        // here filters
                    },
                    number: {
                        // here filters
                    },
                    date: {
                        // here filters
                    }
                }
            }
        };

在telerik网站（官方网站）上，它说没有什么需要做的了。在滚动时，我应该看到对服务器的请求，在我的情况下应该是dataservice.getImportResultReport()调用。但这不会发生。此函数仅调用一次，并返回所有数据。

可能是因为我没有设置type: "odata"吗？但我使用另一种类型的数据源。

如何使用此功能？

Answer 1

在你的html中添加k-scrollable指令，如下所示，它呈现你的剑道网格：

<div kendo-grid k-data-source="mainGridOptions" k-scrollable="{virtual:true}"></div>

此外，您必须对数据源使用k-data-source指令。希望它有所帮助。

工作演示plunkr

如何使用Kendo-ui网格虚拟化远程数据？

1 个答案: