12 Answers, 1 is accepted
0
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
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.
0

Issac
Top achievements
Rank 1
Iron
answered on 13 Mar 2014, 12:30 PM
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")
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
>
0

Issac
Top achievements
Rank 1
Iron
answered on 13 Mar 2014, 06:24 PM
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?
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?
0
Hi Isaac,
To alter the font-size in the different render modes you can use the following css class selectors:
Let me know how it goes and if you have any further questions that I can assist you with.
Regards,
Kate
Telerik
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.
0

Issac
Top achievements
Rank 1
Iron
answered on 17 Mar 2014, 12:48 PM
Kate,
It's only working on menu items with no href.
http://new.yonidiamonds.com
It's only working on menu items with no href.
http://new.yonidiamonds.com
0

Issac
Top achievements
Rank 1
Iron
answered on 17 Mar 2014, 12:48 PM
Also, menu is very sluggish in mobile mode.
0
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:
Regards,
Kate
Telerik
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_Office
2010
Blue,
div.RadMenu_Office
2010
Blue 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.
0

Issac
Top achievements
Rank 1
Iron
answered on 19 Mar 2014, 02:36 PM
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.
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.
0
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:
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
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.
0

Issac
Top achievements
Rank 1
Iron
answered on 21 Mar 2014, 12:35 PM
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?
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?
0
Hi Issac,
You may try the following:
Regards,
Helen
Telerik
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.
0

Issac
Top achievements
Rank 1
Iron
answered on 21 Mar 2014, 04:33 PM
Perfect now, thanks Helen!