Bug? RadGrid + RadAjax + Responsive @media rules

[Dan]

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

[Maria Ilieva]

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

[Dan]

Excellent - this did it.  Thank you

[Maria Ilieva]

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

[Dan]

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

[Maria Ilieva]

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

[Dan]

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;}

[Maria Ilieva]

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

[Dan]

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

[Viktor Tachev]

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.

• http://demos.telerik.com/aspnet-ajax/grid/mobile-examples/overview/default.aspx?name=overview

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.

• http://www.telerik.com/blogs/the-most-mobile-friendly-grid-for-your-responsive-asp.net-web-forms-apps
• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/mobile-rendering/overview
• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/render-modes

Regards,
Viktor Tachev
Telerik