Displaying all Grid records by using the built-in DropDownList in the Pager

Environment

Description

How to display all Grid records by using the built-in DropDownList in the Pager?

Solution

1. Implement a kendoPagerTemplate and define the built-in PagerPageSizesComponent inside the template.

   Copy Code<ng-template kendoPagerTemplate>
       <kendo-pager-page-sizes></kendo-pager-page-sizes>
   </ng-template>

2. Create an array of PageSizeItem objects and define an object with value all.

   Copy Codepublic pageSizes: PageSizeItem[] = [
       { text: 'All', value: 'all' },
       ...
   ];

3. Finally, bind the pageSizes property of the PagerPageSizesComponent to the collection of PageSizeItem objects.

   Copy Code<ng-template kendoPagerTemplate>
       <kendo-pager-page-sizes 
           [pageSizes]="pageSizes"
       >
       </kendo-pager-page-sizes>
   </ng-template>

The following example demonstrates how to implement the described approach.