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

Question

任何人都可以告诉我如何使用客户端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

Answer 2

To implement server pagination, correct format should be return from server. For server side paging JSON format will be something like below JSON:-

{ "mytotal":1069, "mydata": [{ ProductID : 1, ProductName : "Chai"}, { ProductID : 2, ProductName : "Chang" }]}

Tell to kendo grid pick total number of records from mytotal object and data rows from mydata in schema

schema: {
    data: "mydata"
    total: "mytotal" // total is returned in the "total" field of the response
  }

Check detail example here

Answer 3

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