Kendo UI Grid

How To: Custom Date Filter Column in Kendo UI Grid using ASP.NET MVC Wrapper

In one of my previous blog post, i had written about how to have a custom date filter column in Kendo UI grid but the JavaScript way. You can read about it here. Video version of that blog post is available here. In this blog post i will showcase how to achieve the same scenario but using ASP.NET MVC Wrapper.

Prerequisite:

In order to follow along with this blog post, you will need to have downloaded our product “UI for ASP.NET MVC“. We have a 30 day trial of the product for evaluation purpose. You can download the trial from the product page here. Rest of this post, i am assuming you have installed the product and you are ready to follow along this post.

Northwind OData Service:

Instead of hand crafting a Web API or a MVC based JSON end point to read data, i will be using a demo OData service available at www.odata.org. It will be a Northwind OData Service and we will be using the Order table for this exercise. The service is available here.

Create New Project:

When you install Telerik “UI for ASP.NET MVC” product, one of the things we integrate with Visual Studio is that of Project Templates. We install a “Telerik C# ASP.NET MVC Application” project template. As the name goes, this project template will create a new ASP.NET MVC template and add reference to  Kendo UI class library and also add reference to Kendo UI JavaScript/Stylesheets.

Telerik C# ASP.NET MVC Application

Fig 1. Telerik C# ASP.NET MVC Application

Kendo UI Grid Creation:

First up, lets open index.cshtml file under Views > Home folder and instantiate a Kendo UI Grid. Here is the code snippet for instantiating the Kendo UI Grid using our MVC wrappers:

I have created a model class by the name Order. This class contains the properties i am interested to show in the grid and correspond to appropriate column on the service.

Bind Northwind OData Service to Grid:

Next, we will bind the Northwind Orders OData Service as the data source for the grid. The Kendo UI Grid wrapper exposes Datasource() helper method and we will use this to configure the data source for the grid. Here is the code snippet to configure data source:

While configuring the data source, we perform the following things:

  • Set Data Source Type – in this case we have set to “odata-v4”
  • Set the Read URL – the end point which will be invoked by grid data source to read data
  • Set Page Size
  • Set Server Side Paging to true
  • Set Server Side Filtering to true

Apart from the data source configuration we also configure the following things on the Grid itself:

  • Pageable – let the grid know that it is pageable. We will get the paging bar.
  • Sortable – let the grid know that it is sortable. Column headers will be made sortable  header
  • Selectable – let the grid know that the rows can be selected on a mouse click.
  • Columns – let the grid know which columns it should show in the grid

Below is a screenshot of the grid that is rendered as per the configuration we have done so far:

Kendo UI Grid

Fig 2. Kendo UI Grid

Enabling Filter on the columns:

To enable filtering on the grid columns, we just have to use Filterable() helper method. Filterable() helper method is set on  the grid itself. Here is the code snippet to enable the filter:

Let see the output of the grid after enabling filter:

Kendo UI Grid with Filters

Fig 3. Kendo UI Grid with Filters

But we 2 problems with the grid now. They are:

  • All columns have got the filter now. We want filter only on Ordered column.
  • When we check the operators available for Date column we see all the options supported out of the box. Instead what we need is “From Date” & “To  Date”.

Custom Date Filter Options:

In order to solve the above problem we need to perform the following actions:

  • Set Filterable to false on columns where we don’t need filters
  • On the grid Filterable() we will need to let the grid know that we don’t need all the options available out of the box but have only 2 options which is “Greater Than Or Equal To” and “Less Than Or Equal To”

Here is the code snippet which will solve the above filter problem:

Notice how we have enabled operators for “Date “data type. Kendo UI grid wrapper makes it easier to customize the gird according to our needs. Here is the output of the above code:

Kendo UI Grid with Custom Date Filter

Fig 4. Kendo UI Grid with Custom Date Filter

That’s it – we have customized the Kendo UI Grid column filtering according to our needs. We have provided a custom options for date column filter in Kendo UI Grid.

In this blog post i showcases how to work with our Kendo UI MVC Wrappers to instantiate a grid and customize a column filter. Hope this helps you in your project, if you have a similar requirement.

Till next time – Happy Coding !

 

Advertisements

One thought on “How To: Custom Date Filter Column in Kendo UI Grid using ASP.NET MVC Wrapper

  1. Pingback: Video: How to add custom Date filter column in Kendo UI Grid using ASP.NET MVC Wrapper | Telerik Helper - Helping Ninja Technologists

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s