Bug? RadGrid + RadAjax + Responsive @media rules

10 posts, 1 answers
  1. Dan
    Dan avatar
    135 posts
    Member since:
    Feb 2011

    Posted 28 Jul 2015 Link to this post

    I started to isolate my code - then realized that ​this problem is easily reproduced.

    Take this example:

    http://www.telerik.com/support/code-library/responsive-radgrid-d82dc6333682#eAgo5lqhwEm1m86WcKeqJQ

    1. Add AllowSorting="True" to the RadGrid

    2. Wrap the RadGrid in a RadAjaxPanel - or wire it to a RadAjaxManager

    3. In a normal desktop resolution that should NOT apply the @media CSS rules - Click a Column heading to sort

    NOTE: The @media rules are applied to the grid erroneously.  I have also had this apply other @media rules on my page - outside of the radgrid and radajax on column sort or grid paging.  This problem stops if you remove the Ajax wiring - which then of course makes the page much less usable.

     

    Tested in the latest version of Chrome on Windows 8.1 and using the latest 2015.2 release

  2. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 31 Jul 2015 Link to this post

    Hi Dan,

    Please try to set the EnablePageHeadUpdate property for the RadAjaxPanel to "false" and see if this fix the issue you are facing after ajaxifying the RadGrid control.

    Regards,
    Maria Ilieva
    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. Dan
    Dan avatar
    135 posts
    Member since:
    Feb 2011

    Posted 11 Aug 2015 in reply to Maria Ilieva Link to this post

    Excellent - this did it.  Thank you

  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Aug 2015 Link to this post

    Hi Dan,

    I'm glad that the provided solution helps. Do not hesitate to contact us back in case further assistance is needed.

    Regards,
    Maria Ilieva
    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
  5. Dan
    Dan avatar
    135 posts
    Member since:
    Feb 2011

    Posted 22 Aug 2015 Link to this post

    As a follow-up on this one - is there a suggested CSS reworking to get the Advanced Paging area to collapse up to something usable on a mobile screen size?  Right now I have to hide that grid area - but this leaves no way to go to the next page of data
  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 24 Aug 2015 Link to this post

    Hello,

    i would suggest you to set the RenderMode of the RadGrid control to "Mobile" or to "Auto" so it changes based on the device. This way you should not face any issues on Mobile devices with the RadGrid control.

    Regards,
    Maria Ilieva
    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. Dan
    Dan avatar
    135 posts
    Member since:
    Feb 2011

    Posted 24 Aug 2015 in reply to Maria Ilieva Link to this post

    Following this same example

    http://www.telerik.com/support/code-library/responsive-radgrid-d82dc6333682#eAgo5lqhwEm1m86WcKeqJQ

    I have rendermode set to auto.  In my testing - if the grid pages - and you have the pager set to 

    <PagerStyle Mode="NextPrevAndNumeric" />

    When you collapse your browser width to test - the pager messes up the responsive layout.  However if I hide the footer area like this then the display works:

    .RadGrid thead,.RadGrid tfoot{    display: none;}
  8. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 27 Aug 2015 Link to this post

    Hi,

    Note that the mentioned code library present an approach for achieving responsiveness in case of classic RenderMode is used. When you have the RenderMode set to Auto you do not need these additional settings in order to have to control properly render on mobile devices. When Auto RenderMode is used, this option will automatically decide how to render the control on a smartphone, tablet or PC and will switch between Classic and Mobile render modes (depending on the used device).
    Therefore please try to remove the additional code and use simply the Auto RenderMode and  see how it goes. If this does not help it will be best if you can send us your page markup as well as the related code behind, so that we can test it locally and advise you further.

    Regards,
    Maria Ilieva
    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. Dan
    Dan avatar
    135 posts
    Member since:
    Feb 2011

    Posted 30 Aug 2015 in reply to Maria Ilieva Link to this post

    Thanks Maria - perhaps I should start a new thread.  

    I can run the demos and I see that they are not immediately responsive like this sample code (as you change the width of the browser window) - but when I use the emulator with Chrome - I can see them rending differently for the mobile devices with a hard refresh of the page.  This is nice.

    However, it appears that the mobile rendering of a grid wants to simply make the grid left-right scrollable.  I much prefer turning the cells into display:block elements as in the example I linked to in this thread.  Is there a setting on the RadGrid that will allow me to tell the grid to use this block mode responsive design instead of the left-right scrolling.

    For reference I am using this page - running it in Chrome's emulator for the iPhone 5 or 6 to see how the grid looks with the default mobile rendering: http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx?skin=MetroTouch

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2391 posts

    Posted 02 Sep 2015 Link to this post

    Hi Dan,

    Please note that in the Overview demo you are referring to the RadGrid control is set in Classic RenderMode. Thus, the look and feel of the control will be the same regardless of the device you are using to open the page.

    Note that RadGrid provides rendering that is designed with mobile devices in mind. Thus, the look and feel of the control is different in that mode. Please check the following example as reference.



    If you would like additional information regarding the responsiveness of RadGrid and the different RenderModes that are available you would find the following resources interesting.



    Regards,
    Viktor Tachev
    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