• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Use AutoComplete in the ColumnMenuFilter of the Grid

Environment

Product Version4.5.0
ProductProgress® KendoReact

Description

How can I use the AutoComplete components instead of the default input field in the ColumnMenuFilter of the Grid?

Solution

This can be achieved using the filterUI property of the Grid ColumnMenuFilter to customize the interface of the ColumnMenuFilter.

The three DropDownLists which contain the logic and filters that will be applied to the Grid should be rendered and the logic and filter operators are available in the props passed to the filterUI handler. The input fields should be replaced with AutoComplete components.

The values of the DropDownLists that contain the filter operators should be kept in the state, because those values need to be passed to the corresponding onChange events from the props (onFirstFilterChange - part of firstFilterProps, onSecondFilterChange - part of secondFilterProps). The DropDownList that contains the logic operator ("And" or "Or") should call the onLogicChange event from the props. The onChange events from the props will filter the content in the Grid accordingly.

The onChange event handlers of the AutoComplete components will be the ones that call the firstFilterProps.onChange and secondFilterProps.onChange events and will pass the operators from the state and the value from the event.

Example
View Source
Change Theme:

In this article

Not finding the help you need?