Kendo UI Grid with server paging filtering and sorting (with MVC3)

I gave the Kendo UI framework a try today. I needed a grid that could do anything (filtering, sorting and paging – the real kind, on the server that is).

Going about my coding business I came across some things that I found hard to solve using the existing documentation, which inspired this blogpost.

As I mentioned, this is about the Kendo UI KendoGrid. The definition of the grid itself is very easy to when you use the “getting started” tutorial and I ended up with something like this:

$(document).ready(function () {
        $("#reportGrid").kendoGrid({
            dataSource: {
                type: "json",
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                allowUnsort: true,
                pageSize: 10,
                transport: {
                    read: {
                        url: "Export/PagedData",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"
                    },
                    parameterMap: function(options) {
                        return JSON.stringify(options);
                    }
                },
                schema: { data: "Items", total: "TotalItemCount" }
            },
            pageable: true,
            sortable: true,
            filterable: true,
            columns: [
                    { field: "CustomerName", title: "Klant" },
                    { field: "SerialNumber", title: "Serienummer" },
                    { field: "CertificateNumber", title: "Polisnummer" },
                    { field: "ReportDate", title: "Melddatum" },
                    { field: "ReportType", title: "Meldingtype" },
                    { field: "Description", title: "Omschrijving" }
                ],
        });
    });

One point of interest in this code here, the parameterMap in the transport section of the datasource. Without that mapping there, MVC3 will have a hard time reading the parameters that are posted by the grid. The stringify function translates it to something we can use in our controller action.

Lets take a look at that:

public JsonResult PagedData(int skip, int take, int page, int pageSize, List sort, FilterContainer filter)
        {
            int itemCount = 0;
            var data = _export.GetData(page - 1, pageSize, out itemCount, filter, sort);

            return Json(new ExportModel(data, itemCount), JsonRequestBehavior.AllowGet);
        }

The first four parameters are straightforward and let me handle the paging in my query. Note that you need to define the serverXXXXX properties on the grid for these to be posted to the controller on the server! The schema tells the grid the properties to look for when data is read from the server. When paging serverside, you will also need to tell the grid how many items exist on the server so it can calculate the number of pages to show.

After that, things get interesting. Before I came to the solution I now have I spent a fair amount of time searching high and low on how to solve the parsing of array in the querystring. I gave up on that after finding out about the stringify function for the parameterMap in the grid.

If you want some more insight on how to configuring the datasource, look here:

http://www.kendoui.com/documentation/framework/datasource/configuration.aspx

It has everything on configuring a datasource for the Kendo Grid. I was looking for filtering and sorting, which comes down to this:

When filtering, the grid produces and object that contains an array of objects that hold our filter parameters. It holds the columnname, the filter value and the operator used in the filter.

When sorting, an array of objects is produced where each element has an object that contains the column and sort direction for every sort operation.

Translating that into code, we come to this:

public class SortDescription
    {
        public string field { get; set; }
        public string dir { get; set; }
    }

public class FilterContainer
    {
        public List filters { get; set; }
        public string logic { get; set; }
    }

public class FilterDescription
    {
        public string @operator { get; set; }
        public string field { get; set; }
        public string value { get; set; }
    }

If you look at the parameters in the controlleraction, we have a list of sortdescriptions, and an object that contains a list of filters.
The controller is now aware of the filtering and sorting on the grid and all you have left to do is translate the filters and sorting into a query.