So What is Keno UI Grid?
Kendo UI Grid is a feature rich HTML5 Grid control provided as part of Telerik’s Kendo UI Web framework. Kendo Grid provides a lot of features out of the box, such as filtering, grouping, paging, sorting, and support for various data formats.
The default filtering interface for Kendo Grid is very powerful. However, it is generic to accommodate for all kind of data that you can throw at it.
To give you a quick example, here are different filter interfaces for different data type:
In my case, the built-in filtering interface was not desirable. There were couple of reasons for that.
- I didn’t want to retrain my users. A previous Web Forms based version of the application was already using dropdown boxes for filtering Telerik Rad Grid.
- The filtering interface, although very powerfull, can be confusing. My aim was to provide dropdown boxes, with distinct values for the users to filter on.
To The Code…
My scenario is very simple. I have a Machines table, which lists some machine names along with their operating system and the network they are on.
Setting up Kendo Grid is very simple. Here’s the code for my grid embedded in a Razor view:
For a simpler dataset, represented as an HTML table, you can use the following code to quickly initialize a grid around it.
Manipulating the Grid
Kendo Grid provides a client side API, which you can leverage to access and manipulate the Grid object.
logicspecifies and or or logic for the filters.
filtersspecifies an array containing the individual filter objects.
For my example, I have defined two dropdowns and one button. The dropdown will dynamically update the filter via
change event handler. The button will be used to clear all filters. I’ll skip the HTML code for the dropdowns and the button.
The following function takes a field name to filter on and a value for the filter. It applies a filter based on the following logic:
- Get currently applied filter(s) to the Grid
- If no filters are applied, created an empty array to hold new filter(s)
- Iterate through current filters, if a filter is found for the currently specified field, remove it.
- If the value is not
0, create a new filter object and add it to the filters array.
- apply the new filters to the grid.
This function will let you progressively apply multiple filters. It will also remove a single filter if the dummy value is chosen for the dropdown.
The syntax for a new filter is:
This example uses
equal filter operation. You can read up on various different filter operators at the following Telerik Grid Filter Operators.
Clearing All Filters
The following simple function will clear all filters on the grid.
Putting It All Together
I’ve put together a fully functional example with the functions referenced above, which uses a simple table as the grid data source.
You can take a look at the following JSFiddle to see the logic and code in action.