CODEWITHSUNDEEP
asp.net-mvckendo-ui
Pankaj
Pankaj

Reputation: 4503

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

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

Upvotes: 30

Views: 69068

Answers (3)

Taersious
Taersious

Reputation: 779

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

Upvotes: 3

Deepak
Deepak

Reputation: 301

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

Upvotes: 0

Atanas Korchev
Atanas Korchev

Reputation: 30661

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

DataSource configuration settings

Upvotes: 63

Related Questions