Adaptive Behavior

13 posts, 0 answers
  1. Issac
    Issac avatar
    21 posts
    Member since:
    Mar 2012

    Posted 12 Mar 2014 Link to this post

    How can we enable Adaptive Behavior to a menu.
    What version do we need for this to work, I am on 2014.1.225.35?
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Mar 2014 Link to this post

    Hello Issac,

    To be able to fully take advantage of the newly introduced functionalities of the different control on the first place you will need to upgrade to the latest version of the Telerik controls ( that would be the 2014.1.225 version). I noticed that you mentioned you are currently using this version, I would suggest however that you verify on the version that is loaded once you run the page (for example you could use the Ctrl+U combination to view the source of the page and then use the search where you can type in the string value as demonstrated in the attached image to verify the exact version). To get the RadMenu control apply its different rendering on desktop and mobile devices I would suggest that you set the RenderMode to "Auto" as fully explained in the following article - http://www.telerik.com/help/aspnet-ajax/menu-render-mode-overview.html.

    Regards,
    Kate
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Issac
    Issac avatar
    21 posts
    Member since:
    Mar 2012

    Posted 13 Mar 2014 in reply to Kate Link to this post

    Thank you Kate,



     RadMenu.RenderMode = RenderMode.Mobile did trick.



    However, I now have another issue. The menu is only displaying the first item only in Mobile mode, working fine in classic mode.

     

    I am using  XML file;



    RadMenu.LoadContentFile("~/XML/Menu/radmenu.xml")

    <?xml version="1.0" encoding="utf-8" ?>
    <Menu><Group>
            <Item Text="Home"  Width="90" Href="~/default.aspx">
                <Group></Group></Item>
            <Item Text ="Designs" Width="90">
                <Group>
                    <Item Text ="All Around Bands">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=All-Around-Bands"/>
                            <Item Text ="Asscher " Href="~/Collection.aspx?c=All-Around-Bands&s=Asscher"/>
                            <Item Text ="Baguette Diamonds " Href="~/Collection.aspx?c=All-Around-Bands&s=Baguette-Diamonds"/>
                            <Item Text ="Color and Diamonds " Href="~/Collection.aspx?c=All-Around-Bands&s=Color-and-Diamonds"/>
                            <Item Text ="Emerald Cut Diamonds " Href="~/Collection.aspx?c=All-Around-Bands&s=Emerald-Cut-Diamonds"/>
                            <Item Text ="Fancy Yellow " Href="~/Collection.aspx?c=All-Around-Bands&s=Fancy-Yellow"/>
                            <Item Text ="Pink Sapphire " Href="~/Collection.aspx?c=All-Around-Bands&s=Pink-Sapphire"/>
                            <Item Text ="Pink Sapphire and Diamonds " Href="~/Collection.aspx?c=All-Around-Bands&s=Pink-Sapphire-and-Diamonds"/>
                            <Item Text ="Princess Diamonds " Href="~/Collection.aspx?c=All-Around-Bands&s=Princess-Diamonds"/>
                            <Item Text ="Radiants " Href="~/Collection.aspx?c=All-Around-Bands&s=Radiants"/>
                            <Item Text ="Round Diamonds " Href="~/Collection.aspx?c=All-Around-Bands&s=Round-Diamonds"/>
                            <Item Text ="Ruby " Href="~/Collection.aspx?c=All-Around-Bands&s=Ruby"/>
                            <Item Text ="Ruby and Diamonds " Href="~/Collection.aspx?c=All-Around-Bands&s=Ruby-and-Diamonds"/>
                            <Item Text ="Sapphire " Href="~/Collection.aspx?c=All-Around-Bands&s=Sapphire"/>
                            <Item Text ="Sapphire and Diamonds " Href="~/Collection.aspx?c=All-Around-Bands&s=Sapphire-and-Diamonds"/>
                        </Group></Item>
                    <Item Text ="Bracelets">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Bracelets"/>
                            <Item Text ="Fancy Yellow Diamonds " Href="~/Collection.aspx?c=Bracelets&s=Fancy-Yellow-Diamonds"/>
                            <Item Text ="Princess Diamonds " Href="~/Collection.aspx?c=Bracelets&s=Princess-Diamonds"/>
                            <Item Text ="Round Diamonds " Href="~/Collection.aspx?c=Bracelets&s=Round-Diamonds"/>
                            <Item Text ="Sapphire and Diamonds " Href="~/Collection.aspx?c=Bracelets&s=Sapphire-and-Diamonds"/>
                        </Group></Item>
                    <Item Text ="Earrings">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Earrings"/>
                            <Item Text ="Baguette Diamonds " Href="~/Collection.aspx?c=Earrings&s=Baguette-Diamonds"/>
                            <Item Text ="Diamond Studs " Href="~/Collection.aspx?c=Earrings&s=Diamond-Studs"/>
                            <Item Text ="Fancy Yellow Diamonds " Href="~/Collection.aspx?c=Earrings&s=Fancy-Yellow-Diamonds"/>
                            <Item Text ="Invisible Set " Href="~/Collection.aspx?c=Earrings&s=Invisible-Set"/>
                            <Item Text ="NF Colored Diamonds " Href="~/Collection.aspx?c=Earrings&s=NF-Colored-Diamonds"/>
                            <Item Text ="Round Diamonds " Href="~/Collection.aspx?c=Earrings&s=Round-Diamonds"/>
                            <Item Text ="Ruby and Diamonds " Href="~/Collection.aspx?c=Earrings&s=Ruby-and-Diamonds"/>
                            <Item Text ="Sapphire and Diamonds " Href="~/Collection.aspx?c=Earrings&s=Sapphire-and-Diamonds"/>
                        </Group></Item>
                    <Item Text ="Engagement Rings">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Engagement-Rings"/>
                            <Item Text ="Baguette Diamonds " Href="~/Collection.aspx?c=Engagement-Rings&s=Baguette-Diamonds"/>
                            <Item Text ="Center Included " Href="~/Collection.aspx?c=Engagement-Rings&s=Center-Included"/>
                            <Item Text ="Emerald Cut Diamonds " Href="~/Collection.aspx?c=Engagement-Rings&s=Emerald-Cut-Diamonds"/>
                            <Item Text ="Fancy Yellow Diamonds " Href="~/Collection.aspx?c=Engagement-Rings&s=Fancy-Yellow-Diamonds"/>
                            <Item Text ="Half Moons " Href="~/Collection.aspx?c=Engagement-Rings&s=Half-Moons"/>
                            <Item Text ="Invisible " Href="~/Collection.aspx?c=Engagement-Rings&s=Invisible"/>
                            <Item Text ="Invisible Set " Href="~/Collection.aspx?c=Engagement-Rings&s=Invisible-Set"/>
                            <Item Text ="Oval Diamonds " Href="~/Collection.aspx?c=Engagement-Rings&s=Oval-Diamonds"/>
                            <Item Text ="Pink Sapphire " Href="~/Collection.aspx?c=Engagement-Rings&s=Pink-Sapphire"/>
                            <Item Text ="Princess Diamonds " Href="~/Collection.aspx?c=Engagement-Rings&s=Princess-Diamonds"/>
                            <Item Text ="Round Diamonds " Href="~/Collection.aspx?c=Engagement-Rings&s=Round-Diamonds"/>
                            <Item Text ="Sapphire and Diamonds " Href="~/Collection.aspx?c=Engagement-Rings&s=Sapphire-and-Diamonds"/>
                            <Item Text ="Three Stone " Href="~/Collection.aspx?c=Engagement-Rings&s=Three-Stone"/>
                            <Item Text ="Trillion Diamonds " Href="~/Collection.aspx?c=Engagement-Rings&s=Trillion-Diamonds"/>
                        </Group></Item>
                    <Item Text ="Mens Bands">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Mens-Bands"/>
                            <Item Text ="Princess Diamonds " Href="~/Collection.aspx?c=Mens-Bands&s=Princess-Diamonds"/>
                        </Group></Item>
                    <Item Text ="Partial Way Bands">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Partial-Way-Bands"/>
                            <Item Text ="Baguette Diamonds " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Baguette-Diamonds"/>
                            <Item Text ="Color and Diamonds " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Color-and-Diamonds"/>
                            <Item Text ="Emerald Cut Diamonds " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Emerald-Cut-Diamonds"/>
                            <Item Text ="Fancy Yellow " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Fancy-Yellow"/>
                            <Item Text ="Fancy Yellow Diamonds " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Fancy-Yellow-Diamonds"/>
                            <Item Text ="Invisible " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Invisible"/>
                            <Item Text ="Invisible Set " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Invisible-Set"/>
                            <Item Text ="Princess Diamonds " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Princess-Diamonds"/>
                            <Item Text ="Round Diamonds " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Round-Diamonds"/>
                            <Item Text ="Ruby " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Ruby"/>
                            <Item Text ="Ruby and Diamonds " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Ruby-and-Diamonds"/>
                            <Item Text ="Sapphire " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Sapphire"/>
                            <Item Text ="Sapphire and Diamonds " Href="~/Collection.aspx?c=Partial-Way-Bands&s=Sapphire-and-Diamonds"/>
                        </Group></Item>
                    <Item Text ="Pendants">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Pendants"/>
                            <Item Text ="Baguette Diamonds " Href="~/Collection.aspx?c=Pendants&s=Baguette-Diamonds"/>
                            <Item Text ="Emerald Cut Diamonds " Href="~/Collection.aspx?c=Pendants&s=Emerald-Cut-Diamonds"/>
                            <Item Text ="Heart Shaped Diamonds " Href="~/Collection.aspx?c=Pendants&s=Heart-Shaped-Diamonds"/>
                            <Item Text ="Invisible " Href="~/Collection.aspx?c=Pendants&s=Invisible"/>
                            <Item Text ="Invisible Set " Href="~/Collection.aspx?c=Pendants&s=Invisible-Set"/>
                            <Item Text ="Multi Color Sapphire " Href="~/Collection.aspx?c=Pendants&s=Multi-Color-Sapphire"/>
                            <Item Text ="NF Colored Diamonds " Href="~/Collection.aspx?c=Pendants&s=NF-Colored-Diamonds"/>
                            <Item Text ="Princess Diamonds " Href="~/Collection.aspx?c=Pendants&s=Princess-Diamonds"/>
                            <Item Text ="Round Diamonds " Href="~/Collection.aspx?c=Pendants&s=Round-Diamonds"/>
                        </Group></Item>
                    <Item Text ="Rings">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Rings"/>
                            <Item Text ="Amethyst " Href="~/Collection.aspx?c=Rings&s=Amethyst"/>
                            <Item Text ="Emerald Cut Diamonds " Href="~/Collection.aspx?c=Rings&s=Emerald-Cut-Diamonds"/>
                            <Item Text ="Invisible " Href="~/Collection.aspx?c=Rings&s=Invisible"/>
                            <Item Text ="Invisible Set " Href="~/Collection.aspx?c=Rings&s=Invisible-Set"/>
                            <Item Text ="NF Colored Diamonds " Href="~/Collection.aspx?c=Rings&s=NF-Colored-Diamonds"/>
                            <Item Text ="Pink Sapphire " Href="~/Collection.aspx?c=Rings&s=Pink-Sapphire"/>
                            <Item Text ="Quartz " Href="~/Collection.aspx?c=Rings&s=Quartz"/>
                            <Item Text ="Round Diamonds " Href="~/Collection.aspx?c=Rings&s=Round-Diamonds"/>
                            <Item Text ="Sapphire " Href="~/Collection.aspx?c=Rings&s=Sapphire"/>
                            <Item Text ="Sapphire and Diamonds " Href="~/Collection.aspx?c=Rings&s=Sapphire-and-Diamonds"/>
                            <Item Text ="Three Stone " Href="~/Collection.aspx?c=Rings&s=Three-Stone"/>
                            <Item Text ="Topaz " Href="~/Collection.aspx?c=Rings&s=Topaz"/>
                            <Item Text ="Yellow Sapphire " Href="~/Collection.aspx?c=Rings&s=Yellow-Sapphire"/>
                        </Group></Item>
                    <Item Text ="Solid Bands">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Solid-Bands"/>
                            <Item Text ="Angled Milgrain " Href="~/Collection.aspx?c=Solid-Bands&s=Angled-Milgrain"/>
                            <Item Text ="Milgrain " Href="~/Collection.aspx?c=Solid-Bands&s=Milgrain"/>
                            <Item Text ="Polished " Href="~/Collection.aspx?c=Solid-Bands&s=Polished"/>
                        </Group></Item>
                    <Item Text ="Wedding Sets">
                        <Group>
                            <Item Text ="All" Href="~/Collection.aspx?c=Wedding-Sets"/>
                            <Item Text ="Baguette Diamonds " Href="~/Collection.aspx?c=Wedding-Sets&s=Baguette-Diamonds"/>
                        </Group></Item>
                </Group></Item>
     
            <Item Text="Advertisements"  Width="135" Href="~/Advertisements.aspx">
                <Group></Group></Item>
     
            <Item Text="Warranty"  Width="100" Href="~/Warranty.aspx">
                <Group></Group></Item>
     
            <Item Text="About Us"  Width="100" Href="~/Aboutus.aspx">
                <Group></Group></Item>
     
            <Item Text="Contact Us" Width="105" Href="~/Contactus.aspx">
                <Group></Group></Item>
     
            <Item Text="Terms"  Width="80" Href="~/Terms.aspx">
                <Group></Group></Item>
     
            <Item Text="Search"  Width="80" Href="~/Search.aspx">
                <Group></Group></Item>
     
        </Group></Menu>

  5. Issac
    Issac avatar
    21 posts
    Member since:
    Mar 2012

    Posted 13 Mar 2014 Link to this post

    Kate,

    I got it to work, I removed the width from the XML and the menu.
    However, the font on the menu options is much smaller then the demo and very difficult to select items.

    I have tried Silk and Default skin, both with same result.
    What will be the best way to increase the font/height of the menu options?
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 17 Mar 2014 Link to this post

    Hi Isaac,

    To alter the font-size in the different render modes you can use the following css class selectors:
    /*used for the mobile rendering*/
           div.RadMenuPopup {
               font-size: 16px;
           }
     
           /*used for the classic rendering*/
           div.RadMenu_Default,
           div.RadMenu_Default a.rmLink {
               font-size: 16px;
           }

    Let me know how it goes and if you have any further questions that I can assist you with.

    Regards,
    Kate
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  7. Issac
    Issac avatar
    21 posts
    Member since:
    Mar 2012

    Posted 17 Mar 2014 in reply to Kate Link to this post

    Kate,

    It's only working on menu items with no href.

    http://new.yonidiamonds.com

  8. Issac
    Issac avatar
    21 posts
    Member since:
    Mar 2012

    Posted 17 Mar 2014 Link to this post

    Also, menu is very sluggish in mobile mode.
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Mar 2014 Link to this post

    Hello Isaac,

    From the live url that you provided I noticed that you use the Office2010Blue skin of the RadMenu control. Please note that different css class selectors is required for the different skins. For example for the Office2010Blue one you would need to use the following one instead of the previously suggested:
    div.RadMenu_Office2010Blue,
    div.RadMenu_Office2010Blue a.rmLink {
          font: 14px/23px "Segoe UI",Arial,sans-serif;
     }

    Regards,
    Kate
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  10. Issac
    Issac avatar
    21 posts
    Member since:
    Mar 2012

    Posted 19 Mar 2014 in reply to Kate Link to this post

    Kate,

    did not work for me.
    Can you please look again, I am forcing it to render mobile in all browsers so it will be easier to see the problem.
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Mar 2014 Link to this post

    Hi Issac,

    After inspecting the url that you provided it seems that there is a custom style that gets precedence over selectors that I previously suggested. Below is the css that I am referring to:
    BODY A:link {
        border-style: none;
        color: #2F4F4F;
        font-family: Verdana;
        font-size: 11px;
        text-decoration: none;
    }

    I would suggest that you apply the desired font-size only to the particular elements by using a css class properties instead of applying it globally with the selector above.

    Regards,
    Kate
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  12. Issac
    Issac avatar
    21 posts
    Member since:
    Mar 2012

    Posted 21 Mar 2014 in reply to Kate Link to this post

    Thank you, that worked.

    Sorry I have one more,

    On items that have sub-menus, when clicking on the text it only highlights the menu option, it does not expand like when hovering with none mobile render. You need to hit the right arrow icon for it to expand. Is there a way to fix it that it expands when touching the text as well as the right arrow?


  13. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 21 Mar 2014 Link to this post

    Hi Issac,

    You may try the following:

    <telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Mobile" OnClientItemClicking="itemClicking">
    <Items>
    <telerik:RadMenuItem Text="Item1" runat="server">
        <Items>
            <telerik:RadMenuItem Text="Item11"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item12"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item13"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item14"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item15"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item16"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item17"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item18"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item19"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item20"></telerik:RadMenuItem>
        </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item2" runat="server">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item3" runat="server"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item4" runat="server"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item5" runat="server"></telerik:RadMenuItem>
    </Items>
    </telerik:RadMenu>
     
    <script type="text/javascript">
        function itemClicking(sender, args)
        {
            args.get_item().open();
     
        }
    </script>


    Regards,
    Helen
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  14. Issac
    Issac avatar
    21 posts
    Member since:
    Mar 2012

    Posted 21 Mar 2014 in reply to Helen Link to this post

    Perfect now, thanks Helen!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017