This post is one of the Customer Problem Solution kind of blog post. I will be talking about a requirement i was given and the solution to that requirement. If you had a similar requirement in any of your projects – well the solution is available in this post. So read on.

Recently one of our customer came up with a Kendo UI Grid Column Filtering requirement to us. They  had a date column being rendered as part of the Kendo UI Grid. They wanted a filter on that column but they wanted “From Date” and “To Date” as the options available for filtering. A typical scenario that most of you would be having in your projects. So lets see how to solve this problem.

Northwind OData Service:

I am a big fan of OData protocol and OData based services. Good news is that Kendo UI DataSource supports OData protocol out of the box. So for this blog post i will be using publicly available Northwind OData Service hosted at http://www.odata.org. Here is the Northwind Orders Service that i will be using: http://services.odata.org/V4/Northwind/Northwind.svc/Orders

Kendo UI Grid Creation:

Lets first start by instantiating a Kendo UI Grid on a page. Create a empty div and give it a name. And on page load instantiate Kendo UI grid on the div. Here is the code

Next up, lets wire up the data source to the grid.

Bind Northwind OData Service to Grid:

We make use of the dataSource property of the grid and point it to Northwind OData Service available at http://www.odata.org. Here is the code snippet:

Let me walk you through the code we see above:

• First, I set dataSource property of the grid. I set the type of the data to “odata-v4” as i am connecting to a OData V4 Service. Then i set the transport > read property to the URL where the service is available. Then i set the pageSize property to a value 15 and let the dataSource know that paging will be done on the server and not locally. With this setting dataSource knows how to send metadata to server for paging scenarios.
• Next I set the grid to be pageable.
• Finally, i provide the columns that i want to see on the grid.

Here is the output of the above code:

Enabling Filter on the Grid Columns:

Now that we have a grid up & running we will now enable the filtering of the Ordered date column. We don’t want other columns to be filterable but just the Ordered date column. In order to achieve this we will need to do the following things:

• add property filterable on the grid
• turn off filtering for all columns except ordered date

Here is the code snippet to enable filtering:

Here is the output of the above code:

We have the filter coming up on the Ordered date column. But we have a problem. The filter operators are showing options as if the column was a string – notice we have options like “Starts with” & “Contains”. We know that the column is a date data type but why is Kendo UI Grid treating this as a string. Well the answer is – we never told the Kendo UI DataSource what is the shape of the data it is getting from the server. The data source treats every column that came back from the server as a string data type and hence we see filter options for a string based comparison. So lets see how to set this right.

Schema Definition on Data Source:

When you know the shape of the data you are going to get back from a service, its always a good practice to let our Kendo UI Data Source know what is that shape. You do this by adding Schema property on the data source and setting the shape with its data type manually. Here is the code snippet to set the Schema:

Notice that we have the schema > model > fields property defined and we have told the data source what is the data type of the fields that are coming from the server. This gives the data source a hint on what options to show when filter is enabled on a particular column.

Here is the output we get from the above code:

We now have the right options being shown in the filter UI for ordered date column. But our requirement is not met. What we need is to have just 2 options “From Date” & “To Date” to filter. Next up lets see how to achieve this.

Custom Date Filer Option:

When we enabled filter option on the grid, we just set the filterable property of the grid to true. The filterable property supports more than just setting the boolean property to enable filter on the grid. We can customize the operator texts that we can show based on a data type. In our case we are looking at “date” data type. Out of the box the operators available for date data type are:

• Is Equal To
• Is Not Equal To
• Is Null
• Is Not Null
• Is after or equal to (otherwise gte i.e. greater than or equal to)
• Is After
• Is before or equal to (otherwise lte i.e. lesser than or equal to)
• Is before

The options that we need here is “Is after or equal to” & “Is before or equal to”. All we need  to do is tell Kendo UI – that – instead of showing the out of the box texts we need a custom message to be shown for gte & lte options. below is the code snippet on how to do this:

And here is the output of the above code:

And we have successfully fulfilled the customer requirement.

The source code for this demo is available on our Kendo UI Dojo here: http://dojo.telerik.com/@kashyapa/EdorI

With Kendo UI most of the things are available out of the box as API. You will just need to understand how the widget works and what API to set. In this blog post i have showcased you how to work with Filtering feature of the grid. I hope this helps you in your project if you have a similar requirement.

Till next time – Happy Coding !