Kendo UI grid with large data set

Question

I am trying Kendo UI out and I am using the examples provided for studying purpose. Let's suppose I am using a large data source of several hundreds of thousand elements. If I'm using paging and the page size is 10, I would really like to be able to get only 10 elements from the web-page and if Kendo UI was able to know that in reality the number of elements is much bigger, but we are showing only 10. This is what I currently have: ``` var initGrid = true; var grid2Data; function getDataSource() { return grid2Data.Data; } var grid; function getPageIndex() { if (!(grid)) { return 0; } return grid.pager.page() - 1; } function getPageSize() { if (!(grid)) { return 10; } return grid.pager.pageSize(); } function getFilters() { if (!(grid)) { return ""; } return grid.dataSource.filter(); } function getSorts() { if (!(grid)) { return ""; } return grid.dataSource.sort(); } function getParams() { return getPageSize(); } function postTest() { if (initGrid) { $.post('myurl' + getParams(), functi…

Accepted Answer

When you choose `serverPaging` in the `DataSource` by setting it to `true`. You receiver in the server information about the page number (`page`), the page size (`pageSize`), number of records to skip (`skip`)... (look for serverPaging in http://docs.kendoui.com/api/framework/datasource) and in exchange you should return not only the array with the data of that page but also the total number of rows. Then you implement in `schema.total` the function for accessing the number of records. I.e. Lets assume that you return as result the following object:

```
{
    rows: [ 
        { id: 1, col1: "col1.1", col2: "col1.2" },
        { id: 2, col1: "col2.1", col2: "col2.2" },
        { id: 3, col1: "col3.1", col2: "col3.2" }
    ],
    totalRows : 1000
}
```

Then you might implement `schema.total` as:

```
schema: {
    total: function (response) {
        return response.totalRows;
    }
}
```

Where `response` is the object received from the server.

NOTE: Actually in this case would be enough defining the `schema` as:

```
schema: {
    total: "totalRows";
    }
}
```

Since `total` is directly stored in `totalRows` field.

Check http://demos.kendoui.com/web/grid/remote-data.html for an example.

Kendo UI grid with large data set

Solution

Problem