Distinguishing Between the Last Page and Last Numeric Button in Grid Pager

Environment

Product

Kendo UI Grid for Angular

Description

I need to determine whether the user has clicked the last page button or the last numeric button in the Pager of the Kendo UI for Angular Grid. How can I distinguish between these two actions?

This Knowledge Base article also answers the following questions:

• How to identify if the last page button is clicked in Kendo UI for Angular Grid?
• How to handle the click event of the last numeric button in the Grid's Pager?
• How to add custom event handlers for the different Pager buttons in the Grid?

Solution

To distinguish between a click on the last page button and the last numeric button in the Pager of the Kendo UI for Angular Grid, implement a Pager template using the kendoPagerTemplate directive of the Grid.

1. To first determine if the last page of the Grid is currently selected, compare the values of the currentPage and totalPages fields, provided by the template context of the kendoPagerTemplate directive.

   html

   <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
       {{ checkLastPage(currentPage, totalPages) }}
   </ng-template>

   ts

   public lastPage: boolean;
   
   public checkLastPage(current: number, total: number): void {
     this.lastPage = current === total;
   }

2. In the template, define the built-in PagerNumericButtonsComponent and PagerNextButtonsComponent, which contain the last numeric button and last page button respectively. Then, attach click event handlers to the added components and perform the desired logic when the respective button is clicked.

   html

   <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
       {{ checkLastPage(currentPage, totalPages) }}
       <kendo-pager-numeric-buttons (click)="onClickNumeric($event)"></kendo-pager-numeric-buttons>
       <kendo-pager-next-buttons (click)="onClickNext($event)"></kendo-pager-next-buttons>
   </ng-template>

   ts

   public onClickNumeric(e: MouseEvent): void {
     if (this.lastPage) {
       console.log('Last numeric button was clicked:', e.target);
     }
   }
   
   public onClickNext(e: MouseEvent): void {
     if (this.lastPage) {
       console.log('Last page button was clicked:', e.target);
     }
   }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

• Grid Pager Template Documentation
• API Reference of PagerTemplateDirective
• Kendo UI for Angular Grid Overview