Grid remote data virtualization with custom transport.read method?

[Milen]

Hi Guys,

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);
                                });
                            }
                        }
                    },
                    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 need to because my remote call involves setting authentication, etc...

Thanks

[Rosen]

Hello Milen,

Custom transport logic for data visualization is the same as with server paging via the pager. The current page number as well as pageSize value will be passed to the transport.read function via the options.data. Those should be use to return the correct "page" of data. The data and the total number of records can should passed into the options.success callback. Note that this will require setting a schema.data and schema.total in order to instruct the DataSource which are the fields in the response which holds the data and the total values. Thus, the DataSource declaration should look like similar to the following:

dataSource: {
    serverPaging: true,
    serverSorting: true,
    pageSize: 100,
    schema: {
        data: "data",
        total: "total"
    },
    transport: {
        read: function (options) {
             //TODO: pass paging information and return the correct page
            getTemplateItems(options.data.page, options.data.pageSize).then(function (data) {
                options.success(data); // data should look according to the schema similar to the following { data: [/* records*/], total: 1000 }
            });
        }
    }
}

Regards,
Rosen
Telerik

 

 

[Milen]

Hi Rosen,

Thanks a lot for the answer! You are right, I have mistakenly put the schema configuration outside the datasource configuration

and the grid was not picking the total. Without the total the virtualization does not work. Maybe this should be explicityly stated in the documentation. Because initially I thought that maybe when the grid reaches the end of the current data set it would make a read request.

 Best Regards,

 Milen

[Rosen]

Hello Milen,

Indeed, the total is vital when serverPaging is enabled. This is mentioned in the schema.total configuration as well as here.

Regards,
Rosen
Telerik