Customizing kendo UI angular Grid Filter buttons

[Rajeev]

Hi

Is there any way to customize the "Clear" and "Search" button texts in the kendo UI angular Grid. The water mark appearing in the search text also i need to customize. Is it possible do this in the new kendo UI angular Grid. Is there any kendoGridFilterMenuTemplate avaliable for this ?

 

Thanks in Advance

Rajeev

 

 

[Dimiter Topalov]

Hi Rajeev,

The content of the Clear and Filter buttons of the Grid Filter Menu can be customized via the Grid custom messages:

https://www.telerik.com/kendo-angular-ui/components/grid/globalization/#toc-custom-messages

https://www.telerik.com/kendo-angular-ui/components/grid/api/CustomMessagesComponent/#toc-filterclearbutton

https://www.telerik.com/kendo-angular-ui/components/grid/api/CustomMessagesComponent/#toc-filterfilterbutton

Here is a runnable example demonstrating this approach in action:

https://stackblitz.com/edit/angular-d9k3sw?file=app/app.component.ts

I am not sure what is meant by "The water mark appearing in the search text", but if it is the Kendo UI - specific styling for a disabled button (the Filter button is disabled when the filter is empty), this can be done via overwriting the built-in CSS, for example:

encapsulation: ViewEncapsulation.None,
styles: [`
  .k-grid-filter-popup .k-filter-menu .k-button.k-primary {
    color: white;
    background: green;
    opacity: 1;
  }
`]

https://stackblitz.com/edit/angular-d9k3sw-zrjvgk?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik