Customizing kendo UI angular Grid Filter buttons

2 posts, 1 answers
  1. Rajeev
    Rajeev avatar
    48 posts
    Member since:
    Feb 2008

    Posted 22 Apr Link to this post

    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

     

     

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1279 posts

    Posted 24 Apr Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top