PagerComponent
Represents the Kendo UI Pager component for Angular. Enables you to split a set of data into pages, providing a flexible and intuitive UI.
Definition
Package:@progress/kendo-angular-pager
Selector:kendo-datapager, kendo-pager
Export Name:Accessible in templates as #kendoDataPager, kendoPagerInstance="kendoDataPager, kendoPager"
Syntax:
@Component({
selector: 'my-app',
template: `
<kendo-pager
[total]="total"
[skip]="skip"
[pageSize]="pageSize"
(pageChange)="onPageChange($event)">
</kendo-pager>
`
})
export class AppComponent {
public total = 200;
public skip = 0;
public pageSize = 10;
public onPageChange(event: PageChangeEvent) {
this.skip = event.skip;
}
}Inputs
Determines whether the Pager adaptiveness functionality is enabled (see example).
'none'
buttonCount
number
Specifies the maximum number of numeric buttons before the buttons are collapsed.
10
info
boolean
Determines whether to display information about the current page and the total number of records.
true
navigable
boolean
Determines whether users can use dedicated shortcuts to interact with the Pager (see example).
By default, navigation is enabled. To disable it and make the Pager content accessible in the normal tab sequence, set the property to false.
true
pageSize
number
Specifies the number of data items per page.
pageSizeValues
boolean | number[] | PageSizeItem[]
Displays a dropdown for selecting the page size.
When set to true, the dropdown contains the default list of options - 5, 10, 20.
To customize the list of options, set pageSizeValues to an array of the desired values.
The array can contain numbers and PageSizeItem objects.
previousNext
boolean
Determines whether to display the Previous and Next buttons.
true
responsive
boolean
Determines whether the Pager responsive functionality is enabled (see example).
true
Specifies the padding of all Pager elements. The default value is set by the Kendo theme.
skip
number
Specifies the number of data items to skip.
0
total
number
Specifies the total number of data items in the collection.
0
Fields
maxItems
number
Gets the maximum number of items displayed on the current page.
Represents the collection of pager template directives.
Events
Fires when the current page of the Pager changes (see example). You have to handle the event and page the data.
Fires when the page size of the Pager changes. You have to handle the event and page the data. If the event is prevented, the page size remains unchanged (see example).