Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

The accepted answer does not have a UI solution; only provides a jQuery answer. In case it helps anyone else, here is the solution that worked for our kendo grid in UI:

code snippet of Controller

        DataSourceResult result = new DataSourceResult()
        {
            Data = dataSet,
            Total = recordCount
        };

        return Json(result, JsonRequestBehavior.AllowGet);

code snippet of View

        .DataSource(dataSource => dataSource                
            .Ajax()
            .Read(read => read.Action("*<our method>*", "*<our controller>*")
        )