Place pager controls above and beneath grid

[n/a]

Our user experience expert requires that our grids have page controls above and beneath the grid table.

How can I implement this in Kendo UI for angular?

 

 

[Dimiter Topalov]

Hi John,

Indeed, currently the only built-in option is the Grid pager to be rendered at the bottom. You can use pure CSS to place it on top:

styles:[
    `
    .k-grid-pager {
      order: -1;
      border-width: 0 0 1px;
    }
    `
  ],
  encapsulation: ViewEncapsulation.None,

https://stackblitz.com/edit/angular-efdzrn?file=app/app.component.ts

Having multiple pagers is not supported out-of-the-box, but can be achieved via using the Toolbar and Pager template for the additional Pager, e.g.:

https://stackblitz.com/edit/angular-ajraak-32nsay?file=app/app.component.ts

Providing the opportunity to render multiple pagers in the Grid, and/or setting the Pager position is not among our immediate plans, but we are tracking several Feedback feature request items in this direction:

https://feedback.telerik.com/kendo-angular-ui/1360833-add-an-option-to-place-the-grid-pager-on-top-and-or-bottom

https://feedback.telerik.com/kendo-angular-ui/1360566-pager-component

https://feedback.telerik.com/kendo-angular-ui/1360606-pagercomponent-outside-of-gridcomponent

Please support the ones most relevant to your use case - this helps us estimate the customer demand for certain features and components, and to prioritize accordingly when updating our roadmap. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik