PagerPageSizesComponent

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

Selector

kendo-datapager-page-sizes, kendo-pager-page-sizes

Inputs

Name	Type	Default	Description
pageSizes	PageSizeItem[] | number[]		The page sizes collection. Can contain numbers and PageSizeItem objects. ts @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-pager [skip]="skip" [pageSize]="pageSize" [total]="total" (pageChange)="onPageChange($event)"> <ng-template kendoPagerTemplate> <kendo-pager-page-sizes [pageSizes]="pagesizes"></kendo-pager-page-sizes> </ng-template> </kendo-pager> ` }) 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