Progress® Kendo UI® for Angular Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 16 Sep 2021 17:20 by ADMIN
Bernd
Created on: 17 Sep 2018 11:32
Category: Grid
Type: Feature Request
17
Add an option to place the grid pager on top and/or bottom
Currently the pager is always at the bottom of the grid. I would love to see an option to place the pager at the top and/or bottom. Without adding custom code every time I need this.
6 comments
ADMIN
Carl
Posted on: 16 Sep 2021 17:20

Hey everyone!

Jumping in here to mention that the ability to control where the pager is rendered around the Grid was added with the recent R3 2021 release! This was actually added with the `v5.2.0` release of the Angular Grid package and the latest version as of this response is `v5.4.0`. As long as you update your packages to the `v5.2.0` or higher you are good to go!

The configuration in question is the `position` field, found in the pager settings of the Grid. This allows for the pager to be displayed at the top, bottom, or both. Check out the Angular Grid Pager Settings doc for more information.

Regards,
Carl
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Preslava
Posted on: 29 May 2020 12:39

Hello Bernd,

Indeed the ticket with ID 1469154 is a private ticket that is not available in public, but with Michael's permission, I am sharing the solution provided there:

'In order to show the Grid Pager at the top and bottom of the Grid, the Toolbar and the Pager template can be used together, as shown in the following example:'

https://stackblitz.com/edit/angular-ajraak-nwa5pq

It is worth mentioning, that the described custom approach is not fully tested and supported. Therefore, further modification might be needed.

Regards,
Preslava
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Michael
Posted on: 28 May 2020 19:06

Bernd - I was able to place the grid pager on both the top and the bottom. I'm not sure if you can look up my support ticket, but if you can, it's Support ID:1469154.

If you can't, I'm sure Telerik support will be happy to give you the same solution they gave to me. 

ADMIN
Preslava
Posted on: 02 Mar 2020 12:21

Hello Bernd,

Thank you for your input.

In general, the Grid pager is placed at the bottom of the Grid and currently, there is no supported option to change its position. However, I am happy to share that as part of our midterm plans is to release a dedicated Kendo Angular Pager component. Thus will solve the mentioned issue and will make it easier for developers to adapt the Pager to their needs. 

In the meantime the most straight-forward workaround is to overwrite the default flex layout order of the inner Grid elements, e.g.:

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

Please, check the following example which demonstrates this approach:

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

Regards,
Preslava
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Paul
Posted on: 25 Feb 2020 15:04
This should be standard functionality. To accomplish it now, I have to roll my own paging component and will probably have to use it in place of the standard grid pager. Just adding the pieces to the top using the Grid Toolbar do not work as they are not plugged into the events.
N25
Posted on: 16 Jul 2019 19:32
Add an option to place the grid pager vertically on right side of the table for mobile view. It's an impressive functionality many newer grids on mobile are showcasing.
Attached Files:
Create an account Log In
View
Type
Status
Category