3

I am trying to use Kendo UI's Grid with remote data virtualization to connect to a datasource that contains anywhere from 100K to 10M records. I know that most of my configuration is working correctly as datasource.transport.read() fires my custom function on the initial page load and the returned data renders correctly. However, when the initial 100 rows is scrolled to the bottom, the datasource.transport.read() does not fire again to load the next page of data. I have verified this in Chrome dev tools networks tab.

I have a Kendo UI Grid defined inside an AngularJS template like this...

...
<div id="myGrid"
    kendo-grid="myGrid"
    k-options="myGrid.gridOptions"
    k-columns="myGrid.columns">
</div>
...

The gridOptions are defined like this...

_this.gridOptions = {
        dataSource: new kendo.data.DataSource({
            serverPaging: true,
            serverSorting: true,
            pageSize: 100,
            schema: {
                data: "data",
                total: "total"
            },
            transport: {
                read: gridReadHandler  // call a REST service and return data
            }
        }),
        height: 600,
        scrollable: {
            virtual: true
        },
        selectable: false,
        sortable: true,
        resizable: true
    };

The service returns data to the UI in this format...

{ 
    "total": 100000,
    "data": [{...},{...}]
}

GridReadHandler simply creates a POST request and fires off the request via AngularJS's $http provider. As I mentioned above, the first request returns data and displays it correctly but when I scroll to the bottom, I would expect Kendo to fire off another read request for data. Can anyone see what I might be missing?

Thanks in advance.

spink
  • 31
  • 1
  • 1
    SOLVED: What I neglected to mention in my OP was the fact that this issue is presenting itself in an AngularJS application. My gridReadHandler function was indeed returning result for the first get but this block has to be included in the datasource definition so Kendo and Angular are in sync 'schema: { data: function (data) { return data.data; }, total: function (data) { return data.total; } }' – spink Jan 12 '16 at 20:22

0 Answers0