New to Kendo UI for Angular? Start a free 30-day trial
PagerInputComponent
Displays an input element which allows the typing and rendering of page numbers.
@Component({
selector: 'my-app',
template: `
<kendo-grid
[kendoGridBinding]="gridData"
[pageSize]="1"
[pageable]="true"
>
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Price" width="80" format="{0:c}">
</kendo-grid-column>
<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
<kendo-pager-prev-buttons></kendo-pager-prev-buttons>
<kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
<kendo-pager-next-buttons></kendo-pager-next-buttons>
<kendo-pager-input></kendo-pager-input>
<kendo-pager-info></kendo-pager-info>
</ng-template>
</kendo-grid>
`
})
class AppComponent {
public gridData = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": false
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": true
}
];
}
Selector
kendo-pager-input