KendoUI Grid control is very flexible and powerful widget to present table data. It provides us a set of useful features. All of them is described very well in Kendo Grid documentation. However there is some cases that these possibilities is not enough to fulfill our requirements.

KendoUI Grid support filters and sorting data in user interface. These filters can do some complex logic. Especially if we decide to pass them to API layer and evaluate server side. Let’s imagine that user set a complex filtering and sorting rules that helps him to manage his data. Then he move to another page and when he want to get back he have to set all filters again.

Persist state functionality

One solution for this problem is persist state mechanism provided to us by KendoUI. It gives a functionality of saving and loading Grid state (filtering, sorting and all information about columns). However all information saved by this mechanism is quite large, so we should use a localStorage to save them.

With this option we can add user a functionality to save and load filters produced by him. Also he can give names to this predefined setups and so on.

But what if we want to do this automatically. To restore filters when user get back to previous page. We can also use this mechanism but it definitely fail if user opens a multiple tabs in web browser and set a different filters on each of them.

Storing settings in query string

To solve this problem we have to write some custom implementation, because there is no that option in Kendo. We decide to store that kind of information in query string because it is a place contextually belonging to single page. We can modify query string when filters changes and restore then on page load.

In following Gist I present a sample code how we can do this. This will be done using Angular framework, but can be also simply adapted to any popular SPA framework.

This service provides us 2 methods: addFilterStoring, which is responsible for adding and restoring query parameters

kendoStateStore.addFilterStoring({
    dataSource: {
        type: "odata",
        transport: {
            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        }
    },
    height: 550,
    columns: [{
        field: "ContactName",
        title: "Contact Name",
        width: 240
    }, {
        field: "ContactTitle",
        title: "Contact Title"
    }, {
        field: "CompanyName",
        title: "Company Name"
    }, {
        field: "Country",
        width: 150
    }]
}}

Other function provided by our service is a rememberLocationParametersIn. It enables to execute some code e.g. change Grid filtering with remember of query parameters. We can use it as follow:

kendoStateStore.rememberLocationParametersIn(function() {
    // change filters 
    // grid.dataSource.filter(filtersUpdated);
});

This little snippet gives me a missing functionality to powerful Kendo Grid control. I hope that it can help you also.

Image source