Completed
Last Updated: 11 Apr 2022 07:37 by ADMIN
Release 3.2.0
Nick
Created on: 19 Nov 2019 14:05
Category: Grid
Type: Feature Request
27
Responsive layout for the pager

Hi,

I'm testing the grid on mobile and I've noticed that the pager can end up being cut off the edge of the screen. The app is designed to not allow scrolling in the HTML window but it does allowing scrolling in the grid (and navbar). This works, but the pager is cutting off. Is there any way it can be made more responsive or made to wrap in a relatively neat way without breaking the control?

See attached image.

 

Thanks,

Nick

Attached Files:
8 comments
Oemer
Posted on: 23 Feb 2021 12:26

    .k-pager-numbers-wrap {
        display: none;
    }

Daniel's above approach is what I can use with version 2.21.1. Just arrows. Custom pager does not work when items filtered by searchbox. This way I have a less functional but better looking mobile views.

 

 

ADMIN
Marin Bratanov
Posted on: 02 Nov 2020 18:32

I've added your Vote for the other one to raise its priority, and I recommend you Follow that too, as they may get delivered at different times.

 

Regards,
Marin Bratanov
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/.

Scott
Posted on: 02 Nov 2020 18:27
Yes, a combination of these two features, is what our product owner is asking for.
ADMIN
Marin Bratanov
Posted on: 02 Nov 2020 18:06

Hi Scott,

Are you looking for this feature: https://feedback.telerik.com/blazor/1465946-grid-page-navigation-number-of-pages-setting? If not, could you provide some more details on what and how you expect it to be exposed?

 

Regards,
Marin Bratanov
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/.

Scott
Posted on: 02 Nov 2020 15:16
It would be nice if when implementing this feature we could set the max number of pages to show on any display resolution.
Daniel
Posted on: 02 Jun 2020 15:28

I worked around this by adding a display:none style rule for the k-pager-numbers-wrap class to hide the page number buttons when I hit a small enough breakpoint.  You're left with just the arrows.

 

@media (max-width: 767.98px) {
    .k-pager-numbers-wrap {
        display: none;
    }
}

Nick
Posted on: 11 Dec 2019 12:42

Just to add to this, my ideal scenario for default behaviour would be something like this:

  • As the page width reduces the number of page buttons reduces to the point they are not displayed if necessary.
  • The height of the pager doesn't increase. It does this currently because the "1 - 50 of 11438 items" text flows over 2 lines despite not actually being shown on the screen because it is cut off. Possibly this text could just be hidden at a certain point


Also it would nice to have options to:

1. Not show the page buttons at all (just the arrows).

2. Choose the maximum number of page buttons to display.

ADMIN
Marin Bratanov
Posted on: 20 Nov 2019 09:41

Hi Nick,

I moved this to the Feedback portal so you can Follow it. Here's a link for you: https://feedback.telerik.com/blazor/1442883-responsive-layout-for-the-pager.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor