Kendo Angular Grid Pager Button Title/Tooltips

[Mike]

Is it possible to customize the titles/tootips and look/color for a grids pagination buttons (First, Previous, Next, Last)?  I'd like it ot matach the look and feel of other tooltips we have in our application.

[Hetali]

Hi Mike,

Yes, it is possible to change the title and the style of the Kendo UI Grid Pager navigation buttons.

To change the title of the buttons, use the following inputs of the CustomMessagesComponent:

• pagerFirstPage
• pagerLastPage
• pagerNextPage
• pagerPreviousPage

Example:

<kendo-grid>
  <kendo-grid-messages
    pagerFirstPage="First page"
    pagerLastPage="Last page"
    pagerNextPage="Next page"
    pagerPreviousPage="Previous page"
  >
  </kendo-grid-messages>
</kendo-grid>

To modify the style of the buttons, use the following CSS:

.k-link.k-pager-nav {
  background: blue;
}

.k-link.k-pager-nav .k-icon {
  color: white;
}

Please make sure to set the encapsulation to ViewEncapsulation.None to apply the styles locally.

In this StackBlitz example, I have changed the title and the style of the Grid Pager navigation buttons.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik