Custom Grid Pagination?

7 posts, 1 answers
  1. Kara
    Kara avatar
    16 posts
    Member since:
    Oct 2019

    Posted 19 Aug 2020 Link to this post

    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.

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 20 Aug 2020 Link to this post

    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

  3. Kara
    Kara avatar
    16 posts
    Member since:
    Oct 2019

    Posted 20 Aug 2020 in reply to Stefan Link to this post

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

    Kara

  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 21 Aug 2020 Link to this post

    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/.

  5. Kara
    Kara avatar
    16 posts
    Member since:
    Oct 2019

    Posted 21 Aug 2020 in reply to Stefan Link to this post

    Hi Stefan, 

    Great, thank you!

     

    Kara

  6. James
    James avatar
    26 posts
    Member since:
    Sep 2010

    Posted 25 Aug 2020 Link to this post

    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.

  7. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 26 Aug 2020 Link to this post

    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/.

Back to Top