update icons and current/total page details in pagination

1 Answer 27 Views
Grid Pager
Top achievements
Rank 1
Vignesh asked on 20 Jul 2021, 10:47 AM


I am using kendo grid to display data with AngularJS which uses serve pagination.

Currently it uses the existing icons provided by kendo for first page, last page, previous and next page icons.

I need to update the icons as per the below image.

I am able to update icon for previous (k-i-arrow-chevron-left) and next page (k-i-arrow-chevron-right), but I am unable to update for first page and last page icons.

Also currently it just shows the current page number as per below image. 

But I need current page along with total number of page available between the icons as mentioned in first image. 

Please let me know how to achieve the above mentioned points.




1 Answer, 1 is accepted

Sort by
Telerik team
answered on 23 Jul 2021, 08:42 AM

Hi Vignesh,

You could use the 'k-i-arrow-end-left' and 'k-i-arrow-end-right' in order to customize the 'Go to first' and 'Go to last' page icons.

Regarding displaying the Grid pager in the desired format note that the Grid Pager does not support a suitable template in order to achieve the desired appearance. However, you could use the Grid pageable options to configure the pager. Below is an example:

pageable: {              
              input: true,
              numeric: false,
              messages: {
                of: "from {0}"


Here is a Dojo example where the above-mentioned classes are used in order to change the color of the pager icons.

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Grid Pager
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question