Unplanned
Last Updated: 28 Jul 2023 11:38 by ADMIN
Michael
Created on: 23 Apr 2019 17:42
Category: Data Grid
Type: Feature Request
3
GridColumnMenuFilter - Visual indicator

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

 

5 comments
ADMIN
Konstantin Dikov
Posted on: 13 Dec 2022 11:42

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.

R. J.
Posted on: 06 Dec 2022 17:23

@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.

  1. That sizes up to being a lot of repetitive work for our Developers
  2. We are limited to using the pseudo CSS selector `:after` to "inject" our filtered indicator icon. In the aforementioned spirit of React, it would be much more beneficial to utilize a `span` DOM element in the same approach as the sorted column indicator.

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

ADMIN
Stefan
Posted on: 18 Jun 2019 12:55
Hello, Michael,

Yes, I we saw that this was a commonly asked question we decided to make an example on how to achieve this effect with the current version of the Grid.

I hope it proves helpful.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Michael
Posted on: 13 Jun 2019 18:05
ADMIN
Stefan
Posted on: 24 Apr 2019 06:09
Hello, Michael,

Thank you for the request.

As this is discusses already inside the ticket, I will post the same response here for better visibility:

1) Having a filter menu on click in the header. This effect can be achieved with the columnMenu as well. It will require setting only the "GridColumnMenuFilter" component inside the columnMenu and setting its expanded property to true. This will create the visual effect as the jQuery filter menu.

Also, the following CSS will be needed for the icons:

.k-i-more-vertical::before, .k-i-vbars::before {
  content: "\e129";
}


This is an example of this implementation:

https://stackblitz.com/edit/react-hw19xy-gel8zy?file=index.html

2) The visual indication that there is already applied filter: This is currently not added because the column menu may have custom components, and as these components can come from outside, the Grid will not receive information if there is a filter set to them. It is possible in the other Grid because everything is internal, but 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.

We will keep an eye for an option to apply an visual indication that the filter is applied and keep the customization.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items