PagerInputComponent

Displays an input element which allows the typing and rendering of page numbers.

Copy Code
@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