Add search functionality to the Filter field dropdown
Environment
| Product Version | 13.2.0 |
| Product | Progress® KendoReact Filter |
Description
I am using the Filter component and I have many fields. I want to add a search option within the DropDownList that displays field names, so that users can easily find the field they want to create a filter expression for.
Solution
Although there is no direct option for changing the rendering of the DropDownList used for the field names, using the DropDownListPropsContext allows you to change the default properties of the component.
Since there will be multiple DropDownList components within each row in the Filter, you can use the ariaLabel property to identify the DropDownList for the field names within the DropDownListPropsContext. When the callback is called for the field names DropDownList, add an onFilterChange event handler and set the filterable property to true.
Following is an example demonstrating this approach: