Adaptive Behavior

[Issac]

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?

[Kate]

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

 

 

[Issac]

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>

[Issac]

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?

[Kate]

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

 

 

[Issac]

Kate,

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

http://new.yonidiamonds.com

[Issac]

Also, menu is very sluggish in mobile mode.

[Kate]

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

 

 

[Issac]

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.

[Kate]

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

 

 

[Issac]

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?

[Helen]

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

 

 

[Issac]

Perfect now, thanks Helen!