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 6 7 8 ...16 where 6 would be an input box.
6 Answers, 1 is accepted
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
Rank 1
Veteran
Oh perfect! That's exactly what I was hoping for. Any idea when this might go into an official release build?
Kara
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/.
Rank 1
Veteran
Hi Stefan,
Great, thank you!
Kara
Rank 1
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.
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/.