Currently, if we set the kendo-grid filterable="menu", clicking on the filtericon in a grid column opens a dialog with a dropdownlist of filter operators, an input text field, a dropdownlist of logical operators (AND, OR), a dropdownlist of filter operators and an input text field. (see attached png).
For my project, I only want to show one dropdownlist of filter operators and one input field in the filter menu popup dialog. Is it possible to customize the kendoGridFilterMenu template?
Thanks for any suggestion.
4 Answers, 1 is accepted
You can customize the Grid Menu template, as described in the following sections of our documentation:
https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/built-in-template/
https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/built-in-template/#toc-customizing-filter-menus
https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-operations/filtering/reusable-filter/#toc-filter-menu
You can use either the available built-in Grid filter components within the Grid Filter Menu template, or create and use a reusable custom filter component.
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Can you please explain me how we can Change the label of the boolean filter, when there is multiple column containing boolean filter in a grid.
Suppose IsActive and IsVerified. So specifically we have to change the filter label to "isTrue"-Active, "IsFalse" - Inactve and for the other column "isTrue"-Verified, "IsFalse"-UnVerified.
Hello Rahul,
When the Filter Menu template is used, the developer has full control over the content of the filtering UI. The custom boolean filters can have whatever labels necessary, based on some custom logic depending on the field the respective column is bound to, for example:
https://stackblitz.com/edit/angular-tjmedw?file=app/app.component.ts // all custom logic required for hooking the custom UI elements with the Grid filter service and functionality is in the hands of the developer, and is described in details in the article on Filter Menu Template, linked above.
There is a much more straight-forward approach for changing the labels of the built-in Grid boolean filter menu, but it will affect the whole Grid, and the custom texts cannot be different in different columns - the Grid texts can be customized via the custom messages component:
https://www.telerik.com/kendo-angular-ui/components/grid/globalization/#toc-custom-messages
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Thanks Dimiter, that helped.