How can I use the AutoComplete components instead of the default input field in the ColumnMenuFilter of the Grid?
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.