Kendo UI Grid - Server Side Paging, Filtering and Sorting

There are a number of ways a DataSource can be handled with a Kendo UI Grid. In this article we are going to talk about binding data from a remote location on to a Kendo UI Grid with server side paging, filtering and sorting to ensure server response is smallest and light as possible for quick loading and to be able to handle if the data has thousands of records (that can lead to oversized response objects or time outs). I will give example code snippets to form an understanding of the solution.

The Grid

Below is a Kendo UI Grid declaration for which we will implement the server side manipulation.

The DataSource

The below DataSource sends a call to a server method, address to which is saved in svcSampleUrl and assigned to it in the "transport" property. There is no need to make an ajax call separately to fetch the data for the datasource,

Setting serverPaging, serverFiltering, and serverSorting as true enables the Kendo UI Grid DataSource to send server calls when any one of the following events are triggered by the user; change of page, change in filters, and change in sorting of a column.

The parameter map property allows us to send a set of default parameters along with our custom ones back to the server. The default parameters include "take", "skip", "sort", and "filter" that correspond to page size, amount of records to skip, sort criteria, and filter criteria array respectively. Since one may require to send other parameters as well, the default parameter values are set in the model that has other values. Kendo.stringify is applied to the model and returned as a complete request object.

Data and Total

The DataSource schema contains two properties; "data" and "total". Each of these are the names of attributes in the response object in which we expect our results. I have assigned "sampleDTOList" to the "data" property since my response object will contain the list of records under that name. Similarly, I have assigned "totalItems" to "total" property. The "total" property accepts a numerical value of the count of all records irrespective of how many are returned on the current page. That way the DataSource knows how many records there are in actual and how many pages to show.

Note: The model is not explored in this article and is just referenced as a place holder for any model that can be used.

The Request

The Request object contains the exact attributes as the default and custom parameters the DataSource is set to send to the server.

The Server End

This is where we receive the call with all the parameters needed to manipulate the data. This is a simple method that can call a database stored procedure with all the parameters for the filtered results. The stored procedure should then return a dataset according to the given page size, amount of records to skip, sort criteria, filter criteria array and any other filter parameter that me have been sent by the model included in the call request. Page number though requires to be calculated from the information we have.

Page Number

Since we receive "take" and "skip" from client end of the application, calculating required paged number is easy from the information given. When we know page size and amount of records to skip, we can obtain the page number by applying the following rule:

pageNo = (skip + take) / take

The Response

The Response object contains the two attributes needed by the DataSource as mentioned before; one for the "data" and one for the "total" property of the schema.