Grid remote data virtualization with custom transport.read method?

Question

I would like to use the Kendo grid with remote data virtualization. I also need to have a custom method for the transport.read property.

My grid is configured like this:

$(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;
            }

The problem is that the read method is only called once when the grid is initialized. It is not called when the scroll reaches the last item in the current visible set.

I suspect that the grid needs the total number of items but I cannot understand how to set the total number of items. Setting a method for the schema.total property does not work because the method is never called.

So I would like to ask you, is this scenario possible at all, to have the virtualization work with a custom transport.read method, which needs to be called every time to get the next page of data?

Why I am using a custom read? Well I cannot just set an url for the transport.read property because my remote call is made via an angularjs resource, involves setting authentication, etc...

JFlox JFlox · Accepted Answer · 2015-10-06T22:24:13

schema is a property of a kendo datasource. It looks like you have it outside of the datasource.

Should be:

$("#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" }
                ]
            });

Grid remote data virtualization with custom transport.read method?

1 Answers