New to Kendo UI for Angular? Start a free 30-day trial

PagerPageSizesComponent

Displays a drop-down list for the page size selection (see example).

Selector

kendo-datapager-page-sizes

Inputs

NameTypeDefaultDescription

pageSizes

boolean | undefined[]

The page sizes collection. Can contain numbers and PageSizeItem objects.

@Component({
   selector: 'my-app',
   template: `
       <div *ngFor="let item of pagedData" style="border: 1px solid black; padding: 10px;">
           <span>{{item.ProductID}}. </span>
           <span>{{item.ProductName}}</span>
       </div>
       <kendo-datapager
            [skip]="skip"
            [pageSize]="pageSize"
            [total]="total"
            (pageChange)="onPageChange($event)">
          <ng-template kendoDataPagerTemplate>
              <kendo-datapager-page-sizes [pageSizes]="pagesizes"></kendo-datapager-page-sizes>
          </ng-template>
       </kendo-datapager>
   `
})
class AppComponent {
   public data: any[] = products;
   public pagedData = [];
   public skip = 0;
   public pageSize = 2;
   public total = products.length;
   public pagesizes = [{text: 'One', value: 1}, {text: 'Two', value: 2}, {text: 'All', value : 'all'}];

   public ngOnInit() {
       this.pageData();
   }

   public onPageChange(e) {
       this.skip = e.skip;
       this.pageSize = e.take;
       this.pageData();
   }

   private pageData() {
       this.pagedData = this.data.slice(this.skip, this.skip + this.pageSize);
   }
}

const products = [{
  'ProductID' : 1,
  'ProductName' : "Chai",
  'SupplierID' : 1,
  'CategoryID' : 1,
  'QuantityPerUnit' : "10 boxes x 20 bags",
  'UnitPrice' : 18.0000,
  'UnitsInStock' : 39,
  'UnitsOnOrder' : 0,
  'ReorderLevel' : 10,
  'Discontinued' : false

}, {
  'ProductID' : 2,
  'ProductName' : "Chang",
  'SupplierID' : 1,
  'CategoryID' : 1,
  'QuantityPerUnit' : "24 - 12 oz bottles",
  'UnitPrice' : 19.0000,
  'UnitsInStock' : 17,
  'UnitsOnOrder' : 40,
  'ReorderLevel' : 25,
  'Discontinued' : false
}, {
  'ProductID' : 3,
  'ProductName' : "Aniseed Syrup",
  'SupplierID' : 1,
  'CategoryID' : 2,
  'QuantityPerUnit' : "12 - 550 ml bottles",
  'UnitPrice' : 10.0000,
  'UnitsInStock' : 13,
  'UnitsOnOrder' : 70,
  'ReorderLevel' : 25,
  'Discontinued' : false
}, {
  'ProductID' : 4,
  'ProductName' : "Chef Anton\'s Cajun Seasoning",
  'SupplierID' : 2,
 'CategoryID' : 2,
  'QuantityPerUnit' : "48 - 6 oz jars",
  'UnitPrice' : 22.0000,
  'UnitsInStock' : 53,
  'UnitsOnOrder' : 0,
  'ReorderLevel' : 0,
  'Discontinued' : false
}, {
  'ProductID' : 5,
  'ProductName' : "Chef Anton\'s Gumbo Mix",
  'SupplierID' : 2,
  'CategoryID' : 2,
  'QuantityPerUnit' : "36 boxes",
  'UnitPrice' : 21.3500,
  'UnitsInStock' : 0,
  'UnitsOnOrder' : 0,
  'ReorderLevel' : 0,
  'Discontinued' : true
}, {
  'ProductID' : 6,
  'ProductName' : "Grandma\'s Boysenberry Spread",
  'SupplierID' : 3,
  'CategoryID' : 2,
  'QuantityPerUnit' : "12 - 8 oz jars",
  'UnitPrice' : 25.0000,
  'UnitsInStock' : 120,
  'UnitsOnOrder' : 0,
  'ReorderLevel' : 25,
  'Discontinued' : false
}];

size

PagerSize

Specifies the padding of the dropdown.

The possible values are:

  • small
  • medium (default)
  • large
  • none

In this article

Not finding the help you need?