This is a migrated thread and some comments may be shown as answers.

Custom Grid Pagination?

6 Answers 25 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kara
Top achievements
Rank 1
Veteran
Kara asked on 19 Aug 2020, 05:59 PM

Hi,

We are working on rebuilding our application with React and I'm just getting to a page that will use a Kendo grid. We have an existing pagination system that I think we'd like to continue using going forward, so I need to recreate it for the Kendo Grid. Is it possible to build custom pagination in the grid footer, or would I have to build it outside of the grid and hope it looks decent?

For example, I need the page details (row and total) on the far left, and the pagination and page size selection on the right. Also, we use both input and numeric pagination together. For example, if I have 16 pages of data my pagination might look like 1...4 5 7 8 ...16 where 6 would be an input box.

6 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 20 Aug 2020, 06:36 AM

Hello, Kara,

We have just introduced a custom pager functionality for the Grid which can be helpful in this case:

https://www.telerik.com/kendo-react-ui-develop/components/grid/paging/#toc-custom-pager

This feature is still in the dev version of the packages, and can be tested by installing the dev package:

https://www.telerik.com/kendo-react-ui-develop/components/installation/development-builds/

I hope this is helpful.

Regards,
Stefan
Progress Telerik

0
Kara
Top achievements
Rank 1
Veteran
answered on 20 Aug 2020, 02:16 PM

Oh perfect! That's exactly what I was hoping for. Any idea when this might go into an official release build? 

Kara

0
Stefan
Telerik team
answered on 21 Aug 2020, 05:06 AM

Hello, Kara,

We are planning to make an official release built next week.

The version will be 3.16.0.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Kara
Top achievements
Rank 1
Veteran
answered on 21 Aug 2020, 05:08 PM

Hi Stefan, 

Great, thank you!

 

Kara

0
James
Top achievements
Rank 1
answered on 25 Aug 2020, 04:53 PM

How about changing the physical location of the pager. I have a UI/UX team that requires that the current pager lives above the grid in the right corner. Do you have an example of how to make that happen?

 

Thanks.

0
Stefan
Telerik team
answered on 26 Aug 2020, 07:02 AM

Hello, James,

Currently, by design, the pager is only rendered at the bottom. 

We have a CSS solution to render it at the top or to use the external Pager component and place it on the required place:

https://github.com/telerik/kendo-react/issues/263

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Kara
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Kara
Top achievements
Rank 1
Veteran
James
Top achievements
Rank 1
Share this question
or