Pager bleeds when not enough room

17 posts, 0 answers
  1. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 06 Aug 2015 Link to this post

    I think this is related to my post here:

    http://www.telerik.com/forums/grid-columns-bleed-when-using-bootstrap-theme#PmG5fVVMPku7AAjDa7F2LA

    But when using the bootstrap theme, when the pager is longer than the viewport it bleeds and extends past the grid.

    See screenshot for what it looks like when there is enough room and when it bleeds.​

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 07 Aug 2015 Link to this post

    Hello,

    This is a known bug which is already fixed and the fix is available in the latest internal build which you can download from your account. Please excuse us for the inconvenience caused.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 07 Aug 2015 in reply to Pavlina Link to this post

    Hi,

    I installed version: 2015.2.804.45

    And it is still occurring as per my screen shot.

    I made sure to clear my IIS cache, VS cache, and browser cache and it still happens...is there a newer internal build I should be using?

    Thanks.

  5. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 07 Aug 2015 in reply to Pavlina Link to this post

    I added this css and it scrolls the pager cell which doesn't look quite as bad.

    Is there a way to decrease the buttons with the page numbers; so instead of showing 10 buttons, it shows only 5?

    .RadGrid_Bootstrap .rgPager > td {
        overflow:auto !important;
    }
    .RadGrid_Bootstrap td.rgPagerCell {
        overflow:auto !important;
    }
    .RadGrid_Bootstrap .rgPagerCell {
        overflow:auto !important;
    }
    .RadGrid_Bootstrap .rgPagerCell .rgWrap {
        overflow:auto !important;
    }

  6. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Aug 2015 Link to this post

    Hello,

    Could you send us the grid declaration, so we can test it locally and find the cause for the issue you are facing? It is possible some custom style you added on the page to break the grid appearance when the bootstrap theme is used.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 11 Aug 2015 in reply to Pavlina Link to this post

    The bleeding only occurs with the advanced pager...so I stopped using it and used the simpler pager.
  8. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Aug 2015 Link to this post

    Hello,

    We tested advanced pager of the grid in the demo linked below with Bootstrap skin selected and it is working properly:
    http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/paging/basic-paging/defaultcs.aspx?skin=Bootstrap

    If you decide to switch to NextPrevNumericAndAdvanced pager mode again you can check the demo and see what is the difference in your case.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Shawn Krivjansky
    Shawn Krivjansky avatar
    86 posts
    Member since:
    Jan 2010

    Posted 15 Oct 2015 in reply to Pavlina Link to this post

    Pretty sure the original post was referring to the "NextPrevNumericAndAdvanced" pager option...and not just the "Advanced" pager option.  If you look at your demo page with this pager option... and slowly shrink your browser width to simulate other viewports, you'll see a few bad things... 1) the "Item X to Y of ZZ" seems to be right justified (float right) and DOES "bleed" through everything as the viewport shrinks. 2) Nothing gets stacked, removed, or shifted to other lines the way you might expect (at least) in a bootstrap design/skin.  Therefore, you have bleeding at best and complete overrun outside the grid boundaries for everything else at worst.

    At least for the bootstrap skin, I would expect that to be very fluid and stack the elements as the viewport changes... NOT become completely unusable and cram everything into one tiny line if there are enough pages that fill up the area and/or the viewport is small to begin with.  People want to use ONE pager design through an application (presumably the one with the best functionality for their app)...and the number of pages and viewport shouldn't play a part in that decision.  As it is, we either have to dumb-down our pagers to accommodate the most demanding situation (however rare)...else, go through media query hoops to remove the pager pieces that are screwed up at the lower viewports.

    It can't be that hard to make things less (one line) rigid and instead to make things fluid across many lines as the viewport dictates.

  10. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Oct 2015 Link to this post

    Hi,

    May I ask you record a video while testing our online demo following the described steps, so we can see what we are missing out. Once we replicate the problem locally we will be able to assist  you further.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. Shawn Krivjansky
    Shawn Krivjansky avatar
    86 posts
    Member since:
    Jan 2010

    Posted 17 Oct 2015 in reply to Pavlina Link to this post

    It's a little disappointing that my very simple instructions couldn't be followed to reproduce.

    At any rate, here is the video showing it:

    http://screencast.com/t/ClRt5LrKV

  12. Cradz
    Cradz avatar
    65 posts
    Member since:
    Nov 2005

    Posted 18 Oct 2015 Link to this post

    I've had this same issue and fixed it by reducing the number of page buttons using the PageButtonCount:

     

    <PagerStyle Mode="NextPrevNumericAndAdvanced"  Position="TopAndBottom" PageButtonCount="4"  />

  13. Shawn Krivjansky
    Shawn Krivjansky avatar
    86 posts
    Member since:
    Jan 2010

    Posted 19 Oct 2015 in reply to Cradz Link to this post

    That's a partial solution.  But, even that will have issues at the smaller mobile viewports.  I've tried that with a combination of other media queries (where I completely remove half or more of what gets spit out on the pager line and the smaller viewports), but the fact is... that whole line just isn't optimized at all for a fluid design.  "Optimized" is being generous... more like not designed at all for it.  It needs to be.  A few extra css classes there....certainly with the bootstrap theme and it could be done.
  14. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 20 Oct 2015 Link to this post

    Hi,

    If you set RenderMode property to Mobile grid will be optimized for mobile devices and you will not encounter this issue. For more information  about mobile rendering you can refer to the online example and help article linked below:
    http://demos.telerik.com/aspnet-ajax/grid/mobile-examples/overview/default.aspx?name=overview&utm_source=AJAX+Demos&utm_medium=QRcode&utm_campaign=Ajax_mobile_demos_qrcode
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/mobile-rendering/overview

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. Cradz
    Cradz avatar
    65 posts
    Member since:
    Nov 2005

    Posted 20 Oct 2015 in reply to Pavlina Link to this post

    Yup I set my Render Mode to Mobile as I prefer the look of the mobile version even on desktops.

    That's probably why it works fine for me regardless of screen size but I do still have to set a smaller page button count so it doesn't bleed over a containing div. I have a side menu I hide or show depending on screen size or if the user has it enabled and this caused the paging of any data grid in the div to the right to "bleed" over the boundaries of the div.

  16. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 23 Oct 2015 Link to this post

    Hi,

    When you have so many elements in the grid pager you can add custom media query and hide some of them by setting display:none. Thus you should be able to prevent pager bleeds.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  17. Shawn Krivjansky
    Shawn Krivjansky avatar
    86 posts
    Member since:
    Jan 2010

    Posted 23 Oct 2015 in reply to Pavlina Link to this post

    I've mentioned that I use media queries on more than one occasion in this thread already (I need to... just so the display doesn't look like crap, but I sacrifice all the functionality because of it).  I can't use the "mobile" render mode because that is only my 10-20% case.  I don't like the idea of crippling the 80% case just because the rendering sucks on the normal rendering modes.

    What I (and umm... everybody) need is all the functionality of NextPrevNumericAndAdvanced, but that it doesn't look like crap when you move away from a desktop resolution.

    I don't understand that if you are going to have a "bootstrap" theme, why is making something like this more fluid and "bootstrap-like" such a big deal?  I mean... "bootstrap" just isn't about gray and blue buttons. Not asking for the world here... just that things STACK and be fluid instead of running all over themselves. Doesn't seem like a crazy request.

  18. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 28 Oct 2015 Link to this post

    Hello Shawn,

    We understand your point of view very well, however as the grid is more complex control and it could cover many different scenarios (have different page count, width, height etc.) there is no universal solution to avoid the observed behavior on desktop devices. However, if you isolate the issue you are facing in sample runnable project and send it to us via support ticket we will be able to modify it so that the issue no longer exists in your application.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017