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.

	$("#sampleGrid").kendoGrid({
	columns: [
	{ field: "ID", title: "ID", width: 50 },
	{ field: "Label", title: "Label", template: "<span class='k-link bold' title='${Description}'>${Label}</span>" },
	{ field: "Description", title: "Description" }
	],
	dataBound: function () { this.element.find('tbody tr:first').addClass('k-state-selected') },
	pageable: {
	refresh: true,
	pageSizes: [10, 15, 20, 25]
	},
	resizable: true,
	reorderable: true,
	filterable: true,
	groupable: true,
	selectable: true,
	sortable: true
	});

view raw KendoGrid_RemoteData.js hosted with ❤ by GitHub

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.

	var sampleDataSource = new kendo.data.DataSource({
	transport: {
	read: {
	url: svcSampleUrl,
	contentType: "application/json; charset=utf-8",
	type: "POST",
	dataType: "json"
	},
	parameterMap: function (options) {
	model.Take = options.take;
	model.Skip = options.skip;
	model.Sort = options.sort;
	model.Filter = options.filter;
	return kendo.stringify(model);
	}
	},
	schema: {
	data: "sampleDTOList",
	// another way to accept the response if some particular values need processing
	//data: function (response) {
	// //some implementation with the response values
	// return response.sampleDTOList;
	//},
	total: "totalItems",
	model: {
	fields: {
	ID: { type: "number" },
	Label: { type: "string" },
	Description: { type: "string" }
	}
	}
	},
	serverPaging: true,
	serverFiltering: true,
	serverSorting: true,
	pageSize: 10,
	});

view raw DataSource_RemoteData.js hosted with ❤ by GitHub

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.

	public class FilterDTO
	{
	public int Take { get; set; }
	public int Skip { get; set; }
	public List<SortCriteria> Sort { get; set; }
	public List<FilterCriteria> Filter { get; set; }
	public string ID { get; set; }
	}
	public class SortCriteria
	{
	public string field { get; set; }
	public string dir { get; set; }
	}
	public class FilterCriteria
	{
	public string field { get; set; }
	public string operator { get; set; }
	public string value { get; set; }
	}

view raw RequestObject_RemoteData.cs hosted with ❤ by GitHub

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.

	[HttpPost]
	[ActionName("GetItems")]
	public SampleResponse GetItems(FilterDTO filterDTO)
	{
	//Calling a different layer for the read operation based in the parameter values
	return BusinessLayer.GetItems(filterDTO);
	}

view raw ServerCall_RemoteData.cs hosted with ❤ by GitHub

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.

	public class SampleResponse : BaseResponse
	{
	private List<SampleItems> SampleDTOList;
	public List<SampleItems> sampleDTOList
	{
	get { return SampleDTOList; }
	set { SampleDTOList = value; }
	}
	public int totalItems { get; set; }
	}

view raw ResponseObject_RemoteData.cs hosted with ❤ by GitHub