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
-
Use the
kendoPagerTemplate
directive to create a custom pager that includes buttons with letters for filtering.<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>
-
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.public onClick(letter: string): void { this.gridView = products.filter((item) => item.ProductName.startsWith(letter) ); }
The following example demonstrates the suggested approach.