As a web user we are all familiar with the importance of filters on lists/grids on our site. If we provide good filters on grids with some additional functionality, it turns out to be a more useful feature.
Kendo UI provides some nice filters for grids. It even has the facility to customize the filter menus. But it has its own limitations. It will allow us to customize its values but not the actual filter menu options if we want to filter our data. But today we'll see how we can totally override Kendo UI Grid Filters.
If you want to have a look at the Kendo UI filter customization demo, here is the link:
http://demos.telerik.com/kendo-ui/web/grid/filter-menu-customization.html
This blog intends to make it easy for you to create custom filters as shown in the image below:
The custom filter displays a list of events in the main grid. As you will notice, the filter displays the same event names as the check box list. The filter menu itself contains several functionalities. It is a custom search filter widget. If you want to have a look at how this widget is created, refer to the 1st part of this blog, PART 1: Create a Custom Kendo UI Search Widget. The blog contains a demo link and an explanation about the full functionality of this widget.
In this widget, when you select the event names from the filter menu and click on “Filter” it will filter the main grid and display information for selected events.
Now, you will learn how to create a basic grid and how you can bind the custom Kendo UI Search widget as a Grid Filter option.
STEP 1: Create Grid Definition
The
filterMenuInit event is called when filter menu is initialized. We can utilize this event for some UI fixes. The main declaration for us is createMultiSelectFilterOption method. That is actually used to
Initialize our filter UI widget. You can refer it’s documentation on Kendo UI site.
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns-filterable-ui
STEP 2: Create a method for filter menu customization
Create a method to initialize the Kendo UI Custom filter for columns.
Code snippet for that method is pictured below:
Here, the kendoMultiSelectSearchBox is the widget which was created in the first series.
There is one comment in this code. It reveals the trick to remove data binding from the filter element. The second trick applied here is to clear out the filter menu HTML and append the new HTML of our kendoMultiSelectSearchBox. Now, we have created the search widget and we have full control over it. Our next step is to filter the main grid data source based on filtration of filter menu search box.
STEP 3: Filter Main Grid Data from Custom Filter Options
Here, we can perform a lot of operations based on requirements like, Sort by “A-Z”, “Z-A”, “Select All” etc. as shown in the figure at the start. But I will explain only the basic functionality here. As soon as the user selects some event names from filter menu and click on “filter”, the filter menu is hidden. After the filter menu is hidden, we get the selected events from the filter menu options and we filter the main grid data source based on that selected event.
Code snippet for the “Filter” button is shown below:
As you can see in the orange colored box sections, eventDataSource is the main grid data source. We have applied the filter based on the selectedEventIds from the filter menu search box. It filters the eventDataSource from “Event Name” if that is the case of “Select All”. You can see this code in the first block itself.
After all the filter options are applied, we have one thing pending - hide the Grid Filter Menu grid. To achieve this, I’ve applied a trick, I’ve just triggered the click event of filter icon button, and presto! the menu is automatically hidden!
That’s it - you can now easily create customized Kendo UI widgets. All you have to do is try your hand at using jQuery and Kendo UI widgets in different combinations. Best of luck!