Oh no!!

I have been working on a project where we need to provide Excel like checkbox filtering in grids. Being a project based on accounting domain, this is a really important feature for the end customers of our project. This is the case in almost every project which comes under accounting domain as those end customers are very much familiar with spreadsheet.

Our web application is based on Durandal 2.0 based Single page application architecture. Among the UI component providers we researched, we decided to go with KendoUI as it is the most matured and feature rich HTML 5 controls which can be used in our SPA (This is only my point of view though).

During this post I am going to walk you through how we can achieve Excel like checkbox based filtering step by step without even touching KendoUI source

Here is the default filtering UI:

And our final result should be something similar to this:

Although KendoUI gives us some flexibility to override the filter menu UI for some extend (which you can find in their Demo site under filter menu customization in here), it only exposes very limited customization. I had to dig deep into skunks of KendoUI source and find out how it works (Believe me it’s not pretty out there and it’s even scary to work it out from a minified version).

Anyhow, First thing that we need to do is to override the default UI with the custom UI and give the functionality to actually query for filtered data. 

Step 1: Override the default UI with custom UI

In order to replace the default UI with our custom UI, I am using couple of techniques here.

First thing is you need here is to override the filterMenuInit which Fires when the grid filter menu is initialized.

Using kendo.templates to render the custom view

Overriding OnFilterMenu event

For this example, I am only enabling custom excel like filter UI to “ShipCity” column. So, I am calling my own method “customizeFilterMenu” inside filterMenuInit method supplying it with the wrapper UI container and the list of options (shipCityList) which basically are the filter items.

Inside the customizeFilterMenu, I am removing the existing UI (Which I found out using the DOM scanningJ) and hook the custom UI specified as a kendo template in the HTML.

NOTE: As per my implementation, I am expecting the option list which passes into kendo template has to look something like this.

It’s just a JavaScript object where there should be an object array called list. Each object resides in the list should have a key which will be used to issue the filter query and the text which will be displayed in UI.

Kendo Template

There’s no rocket magic going on here. It’s just to loop through the list array passing into it and display them as a checkbox list with some styles applied. Apart from that, I am displaying a “Select all” option as well. So that’s only what we need from UI perspective. Now let’s look into how the functionality works behind the hood.

Step 2: Override the existing filter functionality for excel like filtering enabled columns

I am using a very powerful and useful feature in JavaScript called “extension methods” to get this done. This is really important as we don’t even need to touch original KendoUI source (To be honest, I actually started this in dirty way by manipulating the source, but later we refactored it to use extensions as it will enable us to upgrade KendoUI without any hassle).

If you take a look into KendoUI source (kendo.filtermenu.js to be exact), you’ll see couple of methods called _init (which will be called to render the filter form) and _submit (which will be called when clicking the filter button). I am overriding those two methods as you’ll see below. The trick here is to extend those methods without losing original functionality.

Overriding of the _init 

Overriding of the _submit

So that basically is it. You can download the source code of the project at the end of this post. Hope, this helps to those who are looking into “Excel like filtering in Kendo”

P.S.: Click here to download the sample project. Sample project is created in Visual studio 2013 using HotTowel SPA template. I am using Telerik's online datasource provider

In Kendo UI Mobile’s ListView demo, the "data-icon" attribute is added to each list item element, in order to create an icon image from Kendo UI's standard set of icons:

<ul> <li data-icon=”toprated”><a>Boston</a></li> <li data-icon=”toprated”><a>Chicago</a></li> </ul>

The example above positions the toprated icon on the left side; what if you want to position them somewhere else or even dynamically?  Initially I tried to add the data icon to the far right by putting it on a simple span tag.  This doesn’t work though:

<ul> <li> <a>Boston</a><span data-icon=”toprated”></span> </li> </ul>

Using Firebug, I noticed that “data-icon” renders as two class elements: class=”km-icon km-toprated”

After some experimentation, it’s clear that “km-icon” creates the icon and “km-[icon name]” states which icon to use (in this case: toprated, which looks like a star).  Applying this logic, the fixed up example is:

<ul> <li> <a>Boston</a><span class="km-icon km-toprated"></span> </li> </ul>

http://blogs.telerik.com/blogs/14-04-16/announcing-kendo-ui-core