How to implement Server side paging in Client side Kendo UI grid in asp.net mvc

Question

Can anyone tell me how can I implement server-side paging with client-side Kendo UI Grid?

Answer 1

UPDATE: We have released an open source .NET library which makes paging, sorting an filtering a lot easier.

The grid will send the current pageSize and skip once you set serverPaging to true. On the server side you should page your data using the provided info and return it together with the total number of items. Here is a code snippet:

Action

public ActionResult Products(int pageSize, int skip) 
{
     using (var northwind = new NorthwindDataContext())
     {
        var products = northwind.Products;
        // Get the total number of records - needed for paging
        var total = products.Count();

        // Page the data
        var data = products.Skip(skip).Take(pageSize).ToList();

        // Return as JSON - the Kendo Grid will use the response
        return Json(new { total = total, data = data });
     }
}

View

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
               url: "home/products",
               dataType: "json",
               type: "POST"
            }
        },
        schema: {
            data: "data", // records are returned in the "data" field of the response
            total: "total" // total number of records is in the "total" field of the response
        },
        serverPaging: true // enable server paging
    }
});

Reference

Paging with LINQ

• Take() and Skip()

DataSource configuration settings

• serverPaging
• schema.data
• schema.total