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?

score 63 · Accepted Answer · edited Jun 20 '20 at 09:12

63

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 17 '12 at 07:29

Atanas Korchev

30,562
8
59
93

Can you please post the MVC4 wrapper approach for this? – LCJ Aug 05 '13 at 10:16
5

The MVC wrapper does this automatically when the ToDataSourceResult extension method is used. Here are the docs: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding – Atanas Korchev Aug 05 '13 at 11:43
Suppose I am using a stored procedure instead of any ORM. How can we pass the page number to the stored procedure? And how can we set the total? – LCJ Aug 05 '13 at 12:30
1

Check the custom binding help topic: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/custom-binding – Atanas Korchev Aug 05 '13 at 13:59
Are we forced to request the total number of rows in every query we send for paging ? Can we set the total once and never think about that after that ? – Christophe Gigax Mar 14 '16 at 16:07
1

And why POST ? Why not GET ? – Christophe Gigax Mar 14 '16 at 16:21
POST is almost always used when you call a method that returns a JSON response, to prevent CSRF attacks. By default, MVC won't even let you create a GET that returns JSON - it will give you an error. Here's an explanation http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/ – NibblyPig Jan 25 '17 at 17:09
@NibblyPig According to OWASP, using POST by itself doesn't prevent CSRF attacks. It's harder to do, but its still possible. ["Applications can be developed to only accept POST requests for the execution of business logic. The misconception is that since the attacker cannot construct a malicious link, a CSRF attack cannot be executed. Unfortunately, this logic is incorrect."](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)) – May 02 '17 at 17:48
MVC will stop you doing a cross-domain post by sending the appropriate Access-Control-Allow-Origin header to the client's browser. So either the dev would have to override this default behaviour or the client's browser would have to be compromised. – NibblyPig May 04 '17 at 08:53

score 3 · Answer 2 · answered Jan 24 '19 at 16:48

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

score 0 · Answer 3 · answered Apr 26 '17 at 16:19

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