使用自定义transport.read方法进行网格远程数据虚拟化?

时间:2015-10-06 07:17:46

标签: kendo-ui telerik kendo-grid

我想将Kendo网格与远程数据虚拟化结合使用。我还需要为transport.read属性设置一个自定义方法。

我的网格配置如下:

$(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        serverPaging: true,
                        serverSorting: true,
                        pageSize: 100,
                        transport: {
                            read: function (options) {

                                // Get the template items, which could be products, collections, blogs or articles
                                getTemplateItems().then(function (data) {

                                    options.success(data);
                                });
                            }
                        }
                    },
                    schema: {
                      total: function(response) {

                          return 2000;
                      }  
                    },
                    height: 543,
                    scrollable: {
                        virtual: true
                    },
                    sortable: true,
                    columns: [
                                     { field: "title", title: "Title" }
                    ]
                });
            });


            function getTemplateItems() {

                var deferred = $q.defer();

                smartseoEntityMapping.getEntityInfo({ mappedEntityType: mappedEntityType.Product }).$promise.then(function (data) {

                    deferred.resolve(data);
                });

                return deferred.promise;
            }

问题是只在网格初始化时调用一次read方法。当滚动到达当前可见集中的最后一项时,不会调用它。

我怀疑网格需要项目总数,但我无法理解如何设置项目总数。为schema.total属性设置方法不起作用,因为永远不会调用该方法。

所以我想问你,这个场景是否可行,让虚拟化能够使用自定义的transport.read方法,每次都需要调用它来获取下一页数据?

为什么我使用自定义阅读?好吧,我不能只为transport.read属性设置一个url,因为我的远程调用是通过angularjs资源进行的,涉及设置身份验证等...

1 个答案:

答案 0 :(得分:2)

schema是kendo数据源的属性。看起来你在数据源之外有它。

应该是:

$("#grid").kendoGrid({
                dataSource: {
                    serverPaging: true,
                    serverSorting: true,
                    pageSize: 100,
                    transport: {
                        read: function (options) {

                            // Get the template items, which could be products, collections, blogs or articles
                            getTemplateItems().then(function (data) {

                                options.success(data);
                            });
                        }
                    },
                    schema: {
                      total: function(response) {

                          return 2000;
                      }  
                   }
                },

                height: 543,
                scrollable: {
                    virtual: true
                },
                sortable: true,
                columns: [
                                 { field: "title", title: "Title" }
                ]
            });