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>*")
)