Custom Pager styling kendo grid

[Vikas]

 

Can we achieve the below pager template in Kendo grid

[Hetali]

Hi Vikas,

Use Pager Template of the Kendo UI Grid to make the desired changes. For example:

<kendo-grid>
  <ng-template kendoPagerTemplate 
    let-currentPage="currentPage" 
    let-pageSize="pageSize" 
    let-total="total" 
  >
    <span>
      Showing 
      <span style="color: blue">{{currentPage * pageSize}}</span> 
      of {{ total }} records
    </span>    
    <kendo-pager-spacer></kendo-pager-spacer>
    <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
    <kendo-pager-numeric-buttons [buttonCount]="5"></kendo-pager-numeric-buttons>
    <kendo-pager-next-buttons></kendo-pager-next-buttons>
  </ng-template>
</kendo-grid>

Hide the unwanted buttons using the following CSS:

.k-pager-first, 
.k-pager-last,
.k-pager-numbers .k-pager-nav:last-child {
  display: none;
}

Output:

I have demonstrated the above snippets in this StackBlitz example. 

Please give it a try and let me know if it helps or if I can further assist you.

Regards,
Hetali
Progress Telerik