I have added a custom column menu to my kendo grid. It has a dropdown list element, where users can choose an option and the grid data is filtered. This all works successfully.
I have one issue. When the user clicks on the Filter or Clear Button, the column menu does not disappear. Clicking outside the column menu does not hide the column menu.
I have to click on the column menu again to focus it, then when I click outside the column menu, it disappears.
I cannot get access to the div 'k-grid-columnmenu-popup', as this is controlled by kendo and does not appear in my column menu component.
Has anyone come up against this problem and solved it?
2 Answers, 1 is accepted
Hi,
I have tested our example for custom column menu filter and it closes correctly in both of the scenarios that you are describing:
If the issue persists, please share a stackblitz example demonstrating the issue, so we can test it locally.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Iron
Veteran
Iron
is there a way to send custom props to the filterUI?
My filter is not a boolean, it is text and the dropdownlist needs data provided.
And I don't have GridColumnMenuFilterUIProps in my version of kendo
<GridColumnMenuFilter {...props}
data={data}
defaultItem={'Select type'}
onChange={onChange}
selectedType={selectedType}
filterUI={DropdownTypeFilterMenu} />I can only see the props being passed to the component.
Rank 1
Iron
Veteran
Iron
Because my column menu is 100% custom, I had to recreate the entire popup including the Clear & Filter buttons.
In a useEffect I am refocusing on 'k-grid-columnmenu-popup' so that clicking outside the popup closes the column menu.
When I click on the Clear or Filter buttons, I am running the onCloseMenu() function, which closes the popup.
I should say that my filter is server-side filtering, so it was more complex to capture the filter value and create the dataState.filter.
Hi,
I am glad to see that you have managed to implement the custom filter.
As for the GridColumnMenuFilterUIProps, it is an interface introduced 5 years ago, so it should be present in the Grid package for all version in that period.
Regarding the boolean filter, note that this is just an example on how to provide and handle custom components, so it can be replaced with any other component for different type of values. For passing additional data to the custom filter (the DropDownList for example) you can either load it directly in the custom filter or pass it with React Context from the main component to the custom filter.