Automatic mobile responsivness?

[mike]

Hello,
I am very new to Telerik controls and working on proof of concept with the controls and have a question.

I have created a simple radmenu example which is in a RadPageLayout with GridType="Fluid".
If I take the web browser and manually decrease the width of the browser my assumption was it would automatically change the radmenu into a mobile "menu".
For example:  if i go to the Bootstrap page http://getbootstrap.com/examples/navbar/ and decrease the width the navigation bar would turn mobile friendly.
I have upload a (choppy) video of it here for viewing: http://tinypic.com/r/1znoi8o/8

Doing a bit more reading i found there is a property on the radmenu control called "RenderMode".
If I set it to "Mobile" i will see the mobile dropdown (although the child menu doesn't show up) but this isn't what i'd want because that would mean i would need to create multiple pages based on device detection.  I tried RenderMode=Auto but that didn't work either.

I hope my question makes sense.
Perhaps I am missing setting a property?
thanks.

[Travis Cotton]

I would also like some information on this as well.  I have tried multiple ways to get this to work automatically but to no avail.  Please do not reference the responsive demo since it doesnt appear to include any source :0

[Travis Cotton]

This demo looks awesome and is what I would like but there is no source so Ive no idea how you accomplish this:

http://demos.telerik.com/responsive-web-design-aspnet/samples/adaptive/menu.aspx?utm_source=AJAX+Demos&utm_medium=QRcode&utm_campaign=Ajax_responsive_demo_qrcode

Like the original poster said perhaps Im missing a property or something but ive tried all the various render modes and its no happening for me. 

[Magdalena]

Hello Travis,

Thank you for contacting Telerik support.

The property render mode auto run a device detection by used browser not by the width of the window. So if you set this property to auto, the RadMenu will render in mobile render mode on mobile devices. In browsers on PC it will be rendered in lightweight render mode even if you increase the window. Changing the render mode automatically on the PC is not supported scenario and it is necessary to add additional code. We are sending you an exemplar solution how you can achieve it. The breakpoints that it set in the solution is 1000 pixels. We hope this will resolve your problem.

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

 

 

[David]

change-render-mode.zip works as-is, but doesn't work when I add a submenu item to the main menu items.  How do I get this to work with submenu items?

[Magdalena]

Hi David,

Thank you for getting back to us.

Please, find a corrected solution in the attachment. We have also added setting of render mode for the first page load and necessary styles for properly displaying the menu in the mobile render mode.

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

 

 

[Keith]

Thanks Magdalena!

I was looking for something like the solution that you provided.

 

Sincerely,

Keith Jackson