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

Environment

Product

Progress® Kendo UI for Angular Grid

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.

   html

   <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.

   ts

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

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

   html

   <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.

Change Theme

Theme

Loading ...