It is important for my users to be able to invoke the GridColumnMenuFilter directly from the grid header. ie. The jQuery version has the filter icon beside the header text (Rather than having to click a menu and then click "Filter" - which is necessary if all I want is a filter.
I know this is possible with some CSS. But it is important that there is a visual indicator that the filter is on (which the jQuery version supports but doesn't seem currently possible with the React version)
Thanks
Hello,
Thank you for your detailed feedback.
First, I would like to say that I do agree that having some sort of class name added to the header if filter expression for the column field is present will be beneficial, because it is a common request for adding indicator for the column menu icon.
With the above in mind, I have re-opened the issue and we will discuss it within the team to see if we can add this in the immediate planning as an enhancement.
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.
@stefan
I completely understand your comment with respect to "based on many years of experience and the React concept, we allow many of the components can be customized or directly replaced with a custom alternative." And you're right, this is one of the most wonderful things about React.
I struggle to understand the difficulty, however, in providing such a feature. As of v5.5.0-dev.202207010714, line 730 of Grid.tsx determines whether or not a column is sorted and this is applied in line 758, adding the class name `k-sorted`. Could something very similarly-simple not be done to determine whether or not a filter is being applied to the column and, hence, adding a `k-filtered` class?
You don't have to answer in technical detail - I'm really mentioning as food for thought and to hopefully prod Telerik in your promise to "keep an eye for an option to apply an visual indication that the filter is applied and keep the customization."
We have followed the example that @michael mentions (https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/#toc-styling-the-column-menu-icon), but this is definitely not ideal. For every column of every grid, we'd need to determine if the column is filtered and apply our own class name using the `headerClassName` prop of the `GridColumn` component.
Our other recourse is to provide overrides/extensions to the Kendo-provided `GridHeaderCell`, `GridColumn` and (possibly) `Grid` components to implement what, we feel, is basic-level functionality. As you can understand, this would create a maintainability issue for us in that for every new release of KendoReact, we'd have to update our overrides/extensions. While doing so would push more of the "cost" up front (making it easier on our Developers by requiring they use the overridden `GridColumn`, let's say), we do not want our implementation to be so "fragile" and disconnected from the KendoReact baseline (that we are paying for).
Please heavily consider imparting the "column is filtered" indicator icon functionality to within the KendoReact `Grid` component. Such has already been done for the sorted indicator and it seems only natural to have the same exist for filtering.
Thank you,
R. J. Lewis III
Actually it appears you already have this:
.k-i-more-vertical::before, .k-i-vbars::before {
content
:
"\e129"
;
}