Is there a possibility to mark the filter line in the grid column menu as active?
The menu button itself is marked with .k-state-active, but the popup itself or the filter line is not. So the elements are not reachable with CSS.
Is there any solution to reach the element?
Thanks for your help and best regards,
Andi
3 Answers, 1 is accepted
Indeed, by default the Grid Column Menu is rendered within a Popup that is appended to the application root and is not directly associated with the column menu icon in the Grid header.
To achieve the desired behavior, you can utilize the Column Menu template, and provide the inner building blocks in accordance with the desired Grid functionalities that need to be present:
https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/#toc-customizing-the-content
Then bind a custom class on the kendo-grid-columnmenu-filter component and implement some custom logic for checking whether a filter is applied to by the respective column field, and style the inner filter icon in accordance with your preference, e.g.:
https://stackblitz.com/edit/angular-ablrk8-q5wdby?file=app/app.component.ts
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimiter,
your code helped a lot!
I tried a similar solution, but my mistake was, that I added a [class.is-active]="hasFilterByField(service)" on the kendo-grid-numeric-filter-menu element. The result was, that the marker was on the form containing element and not the menu. :-)
In your for loop, your code also need a break if the result is true, otherwise only the last filter has a highlighted icon.
And the css rule should be bound to .k-icon.k-i-filter otherwise all icons in the form (e.g. dropdown icon) will also be changed.
Kindest regards and thank a lot for your help and excellent support!
Andi
Thank you very much for pointing out the provided enhancements so that other members of the community can also benefit from your feedback!
Regards,
Dimiter Topalov
Progress Telerik