Add a Filter Panel to Your Kendo Grid

03 Feb 2016 15:26
Tags filter grid kendo

Back to list of posts

Overview

When filters are applied to a column in the Kendo UI grid, the filter icon indicates that there is a filter, but there is no way to see what the filter is on the column without clicking on the icon. When there are filters on multiple columns, the user now has several filter icons to click on to see all the filters. It is just as painful to the user to clear all the filters by having to go to each column that contains a filter, click on the filter icon and clear the filter.

To solve this problem, I created a Filter Panel widget that I can display below the grid that shows the filters that have been applied and a button to clear the filters. Here is what it looks like:

Kendo_Grid_With_FilterPanel.png

The DataSource for the Examples:

All the examples will refer to the following kendo.data.DataSource:

var employees = new kendo.data.DataSource({
    data: [
        { firstName: "Margaret", lastName: "Gonzalez", title: "Junior Quality Assurance Engineer", age: 35 },
        { firstName: "Kevin", lastName: "Walker", title: "Software Engineer", age: 55 },
        { firstName: "James", lastName: "Young", title: "Director", age: 46 },
        { firstName: "Thomas", lastName: "Turner", title: "Deputy Project Manager", age: 45 },
        { firstName: "Steven", lastName: "Hall", title: "Systems Engineer", age: 61 }
    ]
});

About the ExtFilterPanel

I created the ExtFilterPanel widget by extending the kendo.ui.Widget (the Ext prefix for Extension). The ExtFilterPanel subscribes to the change event of a kendo.data.DataSource and displays the information about the filters that have been applied to the DataSource. The DataSource is passed in as a configuration option or set with the setDataSource function. To display a user friendly name for a field, the field titles are passed in as a configuration option or set with the setFieldTitles function. Field titles is an array of objects that contain a field and a title attribute. The field attribute is the name of the field in the DataSource and the title is the user friendly name for the field that is displayed to the user.

Sometimes there are filters that are applied to a DataSource that you do not want to show to the user. This can be configured with the hideFilterFields configuration option or the hideFilterFields function. The hideFilterFields configuration option is an array of field names for the fields that will not appear in the ExtFilterPanel and cannot be cleared when the Clear Filter button is clicked.

Configuring the ExtFilterPanel with the Grid

To setup the Grid with the ExtFilterPanel, place the div for the ExtFilterPanel below the Grid like this:

<div id="grid"></div>
<div id="filter"></div>

Here is the code to initialize the Grid and ExtFilerPanel:

var grid = $("#grid").kendoGrid({
  dataSource: employees,
  columns: [
    { title: "First Name", field: "firstName", width: 150 },
    { title: "Last Name", field: "lastName", width: 150 },
    { title: "Title", field: "title" },
    { title: "Age", field: "age", width: 65 }
  ],
  filterable: true,
  pageable: true
}).data("kendoGrid");
 
var filter = $("#filter").kendoExtFilterPanel({
  dataSource: employees,
  fieldTitles: grid.options.columns
}).data("kendoExtFilterPanel");

jsFiddle

The Kendo UI Grid and ExtFilterPanel Fiddle demonstrates the use of the ExtFilterPanel.

Downloads

kendo.web.plugins.filterpanel.js


Comments: 0

Add a New Comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License