Implementing Different Filter Mode per Column in Kendo UI for Angular Grid
Environment
| Product | Progress® Kendo UI® for Angular Grid |
Description
I want to set up the Kendo UI for Angular Grid component so that some columns use a filter row and others use a filter menu. How can I configure a different filter mode per column within a single Grid?
This Knowledge Base article also answers the following questions:
- How can I use both filter row and filter menu in the same Angular Grid?
- Is it possible to specify different filter modes for each column in a Kendo UI for Angular Grid?
- Can I customize the filtering UI per column in Angular Grid?
Solution
To achieve a different filter mode for each column in the same Grid component, enable both filtering modes for all columns by setting the filterable property to 'menu, row'. After that, customize the filtering UI for each column by hiding either the filter menu or the filter row for the corresponding columns.
Hiding the Filter Menu for Specific Columns
To hide the filter menu for particular columns, define a custom class for the column's header through the headerClass option and use custom CSS to remove the filter menu from the header.
-
Set the
headerClassoption to a custom class:html<kendo-grid-column field="ProductName" title="Product Name" headerClass="custom-class"> </kendo-grid-column> -
Include the custom class in the following CSS declaration to set the
displayof the specific filter menu to'none':css.custom-class kendo-grid-filter-menu { display: none; }
Hiding the Filter Row for Specific Columns
To hide the filter row for certain columns, define an empty kendoGridFilterCellTemplate for those columns.
<kendo-grid-column field="UnitPrice" title="Unit Price" filter="numeric">
<ng-template kendoGridFilterCellTemplate>
</ng-template>
</kendo-grid-column>The following example demonstrates the proposed suggestions in action.