Kendo Grid kendoGridFilterMenuTemplate directive popup / buttons customization

[Jens]

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. 

 

[Yanmario]

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

[Jens]

Hi Yanmario,

thanks for the in-depth answer and the stackblitz :) This resolves my question.