Automatic mobile responsivness?

7 posts, 0 answers
  1. mike
    mike avatar
    5 posts
    Member since:
    May 2014

    Posted 07 May 2014 Link to this post

    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.
  2. Travis Cotton
    Travis Cotton avatar
    10 posts
    Member since:
    Sep 2009

    Posted 07 May 2014 in reply to mike Link to this post

    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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Travis Cotton
    Travis Cotton avatar
    10 posts
    Member since:
    Sep 2009

    Posted 07 May 2014 in reply to Travis Cotton Link to this post

    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. 
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 12 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. David
    David avatar
    4 posts
    Member since:
    Oct 2010

    Posted 09 Feb 2015 in reply to Magdalena Link to this post

    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?
  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 12 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 08 Aug in reply to Magdalena Link to this post

    Thanks Magdalena!

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

     

    Sincerely,

    Keith Jackson

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017