Implementing an Alphabetic Pager for the Grid

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

How can I implement an alphabetic pager for the Kendo UI for Angular Grid component?

Solution

1. Use the kendoPagerTemplate directive to create a custom pager that includes buttons with letters for filtering.

   html

   <ng-template kendoGridToolbarTemplate position="bottom">
       <button kendoButton (click)="onLoadAll()">ALL</button>
       <button *ngFor="let letter of letters" kendoButton (click)="onClick(letter)">
           {{ letter }}
       </button>
   </ng-template>

2. To filter the Grid data based on the clicked letter, handle the click event of the buttons and pass the letter string as a filter parameter.

   ts

   public onClick(letter: string): void {
       this.gridView = products.filter((item) =>
           item.ProductName.startsWith(letter)
       );
   }

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...

Suggested Links

• Pager Template