Implement serverPagination in kendo grid jQuery required JSON string

How to implement server side paging in kendo grid if you are returning result from java or any other web technology?

To implement server pagination, first need to understand, Which format of JSON to be return for serverPagination, what type of JSON string should be return and how to communicate between HTTP handler and kendo grid JavaScript. Here I am explaining example of java (servlet) to bind kendo grid and how to use server paging.

To enable server side paging set serverPaging attribute to true, it will leave the data item paging implementation to the remote service. Configure schema.total if you set serverPaging to true. In addition, pageSize should be set.

In below example, java servlet is called, when server paging is enabled, it will pass below query string parameters to http handler or servlet.

• page – the page of data item to return (1 means the first page).
• pageSize – the number of items to return.
• skip – how many data items to skip.
• take – the number of data items to return (the same as pageSize).

We can get value of page number and page size in java (servlet) using:-

request.getParameter("page") request.getParameter("pageSize");

In ASP.net http handler:-

context.Request.QueryString["page"] context.Request.QueryString["pageSize"]

In client side paging normally we return JSON string format to bind data to kendo grid.

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

In server side paging we need to return JSON object in 2 parts, In JSON string first object will be data and second object will be total number of records, In this case JSON format will be something like below JSON string:-

{ "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
  }

Javascript will look something like this:-

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
    read:  
    {                        
      url:'<%=request.getContextPath()%>/GetTestServlet,
      dataType: "json",
      cache: false
    }
  },
  serverPaging: true,
  schema: {
    data: "mydata"
    total: "mytotal" // total is returned in the "total" field of the response
  }
});
</script>

Same way we can implement serverFiltering and serverSorting.

15,661 total views, 33 views today