The right way to handle server-side paging

[Mike]

I'm having trouble figuring out how to create a REST API to service a Kendo UI Grid.  Option #1 - use the REST API for paging, Option #2 - read the entire result set at once and have the Grid control handle the paging.

Here are the problems I've run into with both:

1) I pass the Page and PageSize parameters through the query string.  The service get them, queries the data model, and returns just the number of records requested (e.g. 50 items from page 4).  The problem is that the paging controls then shows *page size* for the number of items in the grid.  That is, if my page size is 50 and there are 3,000 records in the result set, the Grid shows a total 50 with a displays a single "page" button on Page 1.  How do you force the Kendo UI Grid to use the total number of records?  How do you do this without running the query twice (once for the total, a second time to apply the Skip and Take values)?

2) I only have 3,000 records, so it's really no big deal to read the whole data set, but each time I hit the 'page forward', I get a spinner and the request for the entire data set goes out again.  Is there any way to tell the Kendo Grid to suck down the entire set of 3,000 records, but locally page in chunks of, say, 50 items per page.

[Angel Petrov]

Hello Mike,

Straigh to the questions on hand.

1) I strongly suggest examining this online demo which demonstrates the use case. If you inspect the response from the read action you will notice that it has the following format.

{
    "Data": [{
        "OrderID": 10248,
        "CustomerID": "VINET",
        "ContactName": "Paul Henriot",
        "Freight": 32.38,
        "ShipAddress": "59 rue de l-Abbaye",
        "OrderDate": "1996-07-04T00:00:00",
        "ShippedDate": "1996-07-16T00:00:00",
        "ShipCountry": "France",
        "ShipCity": "Reims",
        "ShipName": "Vins et alcools Chevalier",
        "EmployeeID": 5
    },.......],
    "Total": 830,
    "AggregateResults": null,
    "Errors": null
}

For your convenience I have highligthed the main parts. If you pass the data collection under a Data property and the total number of records under Total in the response the grid will show only the paged subset of data but indicate how many items there really are in the database. 

2) Indeed, there is a way to get the total amount of records and page them on the client. For that purpose you will need to disable the server operations(which are turned on by default). If we take for example the prevously linked demo grid and want to configure it in such a manner we can do the following:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false).Width(100);
        columns.Bound(p => p.Freight).Width(100);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).Width(150);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

With the above configuration the grid will try to get the entire data and later perform paging, sorting, filtering and etc on the client.

Regards,
Angel Petrov
Progress Telerik