Kendo Grid kendoGridFilterMenuTemplate directive popup / buttons customization

1 Answer 260 Views
Grid Styling
Jens
Top achievements
Rank 1
Jens asked on 28 May 2021, 07:15 AM

Hello, 

when using customized filter menus (as explained in the following) is there any way to customize the appearance of the popup that is displayed especially the buttons that are placed inside the popup as seen in the screenshot below? (In this case `Clear` and `Filter`)

I know that the text can be customized by using the CustomMessagesComponent. But what if I want to place my own buttons or remove them? I have found the following answer from 2019 that there is only the functionality to style them but only inside the styles property from the component that uses the kendo grid component. 

Version Information

"@progress/kendo-theme-default": "^4.38.1",

"@progress/kendo-angular-grid": "^5.0.2",

Thanks in advance for any help or information. 

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Yanmario
Telerik team
answered on 01 Jun 2021, 02:35 PM

Hi Jens,

Thank you for the provided details and screenshot.

Indeed, the article about customizing filter menus is the correct approach to achieve the desired requirement. 

1. Styling the popup filter menu/s could be achieved by applying some custom CSS as shown in the following article from our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/scope-grid-popups/

Please make sure to set the encapsulation to ViewEncapsulation.None to set the style locally.

2. By default, the Grid filter menu template has a "Clear" and "Filter" buttons, and they can be removed using some custom CSS.

 .k-action-buttons.k-button-group {
        display: none;
      }

This will allow the developer to add custom buttons that can be styled and run custom business logic depending on the application requirements.

I've managed to create a StackBlitz example demonstrating the described functionality from point one and two:

https://stackblitz.com/edit/grid-custom-filter-buttons?file=app/app.component.ts

I hope this helps. Please let me know if I can provide any further assistance on this matter.

Regards,
Yanmario Menev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jens
Top achievements
Rank 1
commented on 04 Jun 2021, 06:52 AM

Hi Yanmario,

thanks for the in-depth answer and the stackblitz :) This resolves my question.
Tags
Grid Styling
Asked by
Jens
Top achievements
Rank 1
Answers by
Yanmario
Telerik team
Share this question
or