Hi, I try to implement DropDownList to filter inside the columnMenu for the field Product Name.
the problem is that even when I select value the filter button is disabled, how can I make it work?
here is my example code: https://stackblitz.com/edit/react-s9pvmb-hgbvrt?file=app/main.jsx
1 Answer, 1 is accepted
Hello Daniel,
Thank you for sharing an example demonstrating the issue.
After going through the implementation I have noticed that you are not using the provided onChange handler from the props of the filter in the column menu as shown in the following example:
In your case, you need to use the firstFilterProps.onChange to trigger the change of the filter value:
function handleChange(event) {
const value = event.target.value.ProductName;
const { firstFilterProps } = props;
firstFilterProps.onChange({
value,
operator: 'eq',
syntheticEvent: event.syntheticEvent,
});
}
return (
<div>
<DropDownList
textField="ProductName"
filterable
data={sampleProducts}
value={value}
defaultItem={'choose store'}
{...props}
onChange={handleChange}
/>
</div>Here is the modified example:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Hi, Konstantin.
Today I need to add the filter operator's options to the dropdown filter, how can I do that?
Hi Daniel,
Within the properties passed to the custom filter cell you can find an array with all operators (props.operators).
You can use that date to populate a DropDownList or DropDownButton (https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/) and handle its onChange event to pass it to the manual filter (where the props.onChange is called).
The current operator (the value that you can bind to the dropdown with the operators will be within props.operator).
Hope this helps.