How to use Kendo-ui grid for virtualization of remote data?

Question

I'm using kendo-ui grid for AngularJs and want to activate virtualization of remote data functionality. For testing I have set pageSize: 5. Below is description of virtualization of remote data from telerik site:

There are cases when you may need to operate with large amount of data in the grid, and fetching and processing this data at once would impose a performance penalty due to limited browser resources. Luckily, the Kendo UI grid has a solution called data virtualization that alleviates any slowdowns when operating with huge volumes of data. When enabled via the scrollable->virtual configuration option, it displays a vertical scrollbar for the grid content and renders only the number of items set via the pageSize property of the grid data source. After you drag the scrollbar and the pageSize is exceeded, it makes automatic requests to retrieve and render the next set of grid rows. Both local and remote data are supported with the grid virtualization feature, whereas in this demo the records are obtained from a remote endpoint.

Also I have set following:

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

On telerik site (Official website), it says that nothing more needs to be done. On scrolling, I should see a request to the server which in my case should be a dataservice.getImportResultReport() call. But this does't happen. This function is called only once and all data is returned.

May be it's occurring because I have not set type: "odata"? But I use data source of another type.

How to use this functionality?

Answer 1

Add k-scrollable directive as follows in your html that renders your kendo grid:

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

Also you have to use k-data-source directive for your dataSource. Hope it helps.

Working demo plunkr