Telerik Forums / UI for ASP.NET AJAX Forum / Menu /

ExpandedCssClass in radmenu does not work

Telerik UI for ASP.NET AJAX
Resources Buy Try

8 posts, 0 answers

Bob Bernstein

4 posts

Member since:
Apr 2010

Posted 18 May 2010 Link to this post

I implemented
ExpandedCssClass
attribute in radmenuItem to control item when child nodes are displayed but does not appear to work.

I want the bg color to stay when mega drop down is open.

<

telerik:RadMenuItem Text="Stores" PostBack="false" ExpandedCssClass="rmExpanded">
Kamen Bundev
Admin

1532 posts

Posted 19 May 2010 Link to this post

Hi Bob,

The .rmExpanded CSS class is already the expanded CssClass of RadMenu, so probably nothing will change. Can you elaborate a bit more what are you trying to do, in what RadControls for ASP.NET AJAX version and in which browser? Thank you in advance.

Sincerely yours,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Bob Bernstein

4 posts

Member since:
Apr 2010

Posted 19 May 2010 Link to this post

when the attribute ExpandedCssClass is used within Radmenu (mega dropdown) you are able to control bg color of that menu item when the child elements are visible (on focus). Is there a way to do the same for a template item within the radmenu? The template item is basically a multi line menu item but uses template so rendered html is not an A tag.

I am using the latest version of Radtools for .net ajax, see code below for both menu items:

this single line menu item top level works :

<

telerik:RadMenuItem CssClass="Events" Width="640px" ExpandedCssClass="rmExpanded">

</telerik:RadMenuItem>

this multi line top level menu does not work:

<

telerik:RadMenuItem Text="News" PostBack="false" ExpandedCssClass="rmExpanded">

<Items></items>

<

ItemTemplate>

<asp:Label ID="Label1" runat="server" Text="menu Line 1"></asp:Label>

<asp:Label ID="Label2" runat="server" Text="descriptwion line 2"></asp:Label>

</ItemTemplate>

</telerik:RadMenuItem>
Kamen Bundev
Admin

1532 posts

Posted 20 May 2010 Link to this post

Hi Bob,

I just saw that you filed a support ticket, so I answered you there. Basically I will need a sample project or a live URL detailing your problem - in the support ticket you will be able to attach non-image files.

Regards,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Bob Bernstein

4 posts

Member since:
Apr 2010
Posted 20 May 2010 Link to this post

I've attached images on what I want to do. D1 show how the top-level nav appears for multi line items (no blue bg). D2 shows correct color for top-level nav while children are visible. I want the multi line top level nav (d1) items all to show a blue bg when children are visible. Obviuosly the radmenu reneders them differently when using itemtemplate.

Below is the entire rad code used:

<

telerik:RadMenu runat="server" ID="RadMenu1" EnableEmbeddedSkins="false"

Width="880px" Height="60px" ExpandAnimation-Type="None" EnableShadows="true" Skin="CustomSkin1" EnableEmbeddedBaseStylesheet="false">

<Items>

<telerik:RadMenuItem ExpandedCssClass="rmExpanded" Text="Products" Value="fff" PostBack="false">

<Items>

<telerik:RadMenuItem Width="640px" ExpandedCssClass="rmExpanded">

<Items></Items>

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text="menu item A"></asp:Label><br />

<asp:Label ID="Label2" runat="server" Text="description for A"></asp:Label>

</ItemTemplate>

<ItemTemplate>

<div id="CatWrapper" class="Wrapper" style="width: 435px;">

<h3>

Categories

</h3>

<telerik:RadSiteMap ID="RadSiteMap1" runat="server" Skin="Hay">

<LevelSettings>

<telerik:SiteMapLevelSetting Level="0">

<ListLayout RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:SiteMapLevelSetting>

</LevelSettings>

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Furniture">

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Tables & Chairs" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Sofas" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Occasional Furniture" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Childerns Furniture" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Beds" />

</Nodes>

</telerik:RadSiteMapNode>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Decor">

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Bed Linen" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Throws" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Curtains & Blinds" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Rugs" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Carpets" />

</Nodes>

</telerik:RadSiteMapNode>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Storage">

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Wall Shelving" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Kids Storage" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Baskets" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Multimedia Storage" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Floor Shelving" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Toilet Roll Holders" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Storage Jars" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Drawers" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Boxes" />

</Nodes>

</telerik:RadSiteMapNode>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Lights">

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Ceiling" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Table" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Floor" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Shades" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Wall Lights" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Spotlights" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Push Light" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="String Lights" />

</Nodes>

</telerik:RadSiteMapNode>

</Nodes>

</telerik:RadSiteMap>

</div>

<div id="FeatProduct">

<h3>

Featured

</h3>

<img src="Img/lamp.jpg" alt="Deco Mirror Table Lamp - $ 24.99" width="128px" height="150px" />

<p>

Deco Mirror Table Lamp

<br />

<span class="price">$ 24.99</span></p>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text="menu witem A"></asp:Label><br />

<asp:Label ID="Label2" runat="server" Text="descriptwion for A"></asp:Label>

</ItemTemplate>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Stores" PostBack="false" ExpandedCssClass="rmExpanded">

<Items>

<telerik:RadMenuItem Width="640px">

<ItemTemplate>

<div id="StoreWrapper" class="Wrapper">

<h3>

Around the Globe

</h3>

<img name="world" src="Img/world.gif" width="355" height="210" border="0" id="world"

usemap="#m_world" />

<map name="m_world" id="m_world">

<area shape="circle" coords="309,171, 5" href="#" alt="New Zealand" />

<area shape="circle" coords="278,153, 5" href="#" alt="Australia" />

<area shape="circle" coords="272,116, 5" href="#" alt="Philippines" />

<area shape="circle" coords="255,128, 5" href="#" alt="Malaysia" />

<area shape="circle" coords="234,105, 5" href="#" alt="India" />

<area shape="circle" coords="200,98, 5" href="#" alt="Middle East" />

<area shape="circle" coords="173,80, 5" href="#" alt="Europe" />

<area shape="circle" coords="161,73, 5" href="#" alt="United Kingdom" />

<area shape="circle" coords="85,91, 5" href="#" alt="United States" />

<area shape="circle" coords="80,73, 5" href="#" alt="Canada" />

</map>

<telerik:RadSiteMap ID="RadSiteMap2" runat="server" Skin="Hay" Width="250px" Style="padding-top: 30px;">

<LevelSettings>

<telerik:SiteMapLevelSetting Level="0">

<ListLayout RepeatColumns="2" RepeatDirection="Vertical" />

</telerik:SiteMapLevelSetting>

</LevelSettings>

<Nodes>

<telerik:RadSiteMapNode>

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Australia" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Canada" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Europe" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="India" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Malaysia" />

</Nodes>

</telerik:RadSiteMapNode>

<telerik:RadSiteMapNode>

<Nodes>

<telerik:RadSiteMapNode NavigateUrl="#" Text="Middle East" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="New Zealand" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="Philippines" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="United Kingdom" />

<telerik:RadSiteMapNode NavigateUrl="#" Text="United States" />

</Nodes>

</telerik:RadSiteMapNode>

</Nodes>

</telerik:RadSiteMap>

<a class="moreLink" href="#">See full list »</a>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text="menu witem "></asp:Label><br />

<asp:Label ID="Label2" runat="server" Text="descriptwion for "></asp:Label>

</ItemTemplate>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="News" PostBack="false" ExpandedCssClass="rmExpanded">

<Items>

<telerik:RadMenuItem CssClass="News" Width="640px" ExpandedCssClass="rmExpanded">

<ItemTemplate>

<div id="NewsWrapper" class="Wrapper">

<h3>

Latest News

</h3>

<div class="newsLeft">

<img src="Img/interior.png" />

<h2>

<a href="#">Kelly Hoppen to speak at interiors 2010</a></h2>

<span>01/02/2010</span>

<p>

Internationally acclaimed British interior designer, Kelly Hoppen, will present

a seminar at interiors 2010 on Wednesday 27th January. Kellys reputation for simple

but opulent styling has ...

</p>

</div>

<table cellspacing="0" cellpadding="0" width="290px">

<tr>

<td>

<span>02/02/2010</span>

</td>

<td>

<a href="#" class="newsLink">PANTONE Color Report Fall 2010</a><br />

In conjunction with New York Fashion Week, Pantone today released the PANTONE Fashion

Color Report Fall 2010 ...

</td>

</tr>

<tr>

<td>

<span>03/02/2010</span>

</td>

<td>

<a href="#" class="newsLink">Interiors 2010 reports great business</a><br />

Interiors 2010, the first and largest dedicated UK ...

</td>

</tr>

<tr>

<td>

<span>04/02/2010</span>

</td>

<td>

<a href="#" class="newsLink">San Francisco Design Week 2010</a><br />

The mission of Design Week raise public awareness of Design ...

</td>

</tr>

<tr>

<td>

<span>05/02/2010</span>

</td>

<td>

<a href="#" class="newsLink">Travel + Leisure 2010 Design Award Winners</a><br />

The most outstanding new examples of design and architecture ...

</td>

</tr>

</table>

<a class="moreLink" href="#">View all »</a>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text="menu witem A"></asp:Label><br />

<asp:Label ID="Label2" runat="server" Text="descriptwion for A"></asp:Label>

</ItemTemplate>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Events" PostBack="false" ExpandedCssClass="rmExpanded">

<Items>

<telerik:RadMenuItem CssClass="Events" Width="640px" ExpandedCssClass="rmExpanded">

<ItemTemplate>

<div id="EventWrapper" class="Wrapper">

<h3>

Industry Events

</h3>

<div class="newsLeft">

<img src="Img/events.jpg" />

<h2>

<a href="#">International Furniture Fair Tokyo (IFFT)</a></h2>

<span>10/02/2010</span>

<p>

Furniture design event inaugurated in 1979 featuring furniture and interior design

exhibitors from all over the world.

</p>

</div>

<table cellspacing="0" cellpadding="0" width="290px">

<tr>

<td>

<span>01/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">International Interior & Furniture Exhibition (IFEX)</a>

</td>

</tr>

<tr>

<td>

<span>02/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Australian International Furniture Fair </a>

</td>

</tr>

<tr>

<td>

<span>03/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Las Vegas Furniture Show </a>

</td>

</tr>

<tr>

<td>

<span>04/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Home Fashion & Design Shanghai </a>

</td>

</tr>

<tr>

<td>

<span>05/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">imm cologne </h4>

</td>

</tr>

<tr>

<td>

<span>06/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Malaysian International Furniture Fair </a>

</td>

</tr>

<tr>

<td>

<span>07/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">Salon du Meuble de Paris </a>

</td>

</tr>

<tr>

<td>

<span>08/02/2010</span>

</td>

<td>

<a href="#" class="eventLink">ICFF: International Contemporary Furniture Fair</a>

</td>

</tr>

</table>

<a class="moreLink" href="#">View all »</a>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

megad1.jpg

megad2.jpg
Kamen Bundev
Admin

1532 posts

Posted 25 May 2010 Link to this post

Hello Bob,

You will need at least one element to take care of the hover styles - .rmLink is rendering the left end of the RadMenu hover sprite. Add an anchor with this class to your template, like this:
<a href="#" class="rmLink">
    <asp:Label ID="Label1" runat="server" Text="menu witem A"></asp:Label><br />
    <asp:Label ID="Label2" runat="server" Text="descriptwion for A"></asp:Label>
</a>
If you want also the right part of the hover sprite (to use the sliding doors technique), add a span with class="rmText" in the anchor and your labels in it. Setting a rmExpanded class to the rmLink element is a little harder - you need to set this handler to OnClientItemOpening and OnClientItemClosing events.
function toggleExpanded(sender, args) {
    var $ = $telerik.$;

    if (args._cancel != null)
        setTimeout( function () { $('.rmLink', args.get_item().get_element()).addClass('rmExpanded'); }, 10 );
    else
        $('.rmLink', args.get_item().get_element()).removeClass('rmExpanded');
}
Let me know if this works.

Regards,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Bob Bernstein

4 posts

Member since:
Apr 2010

Posted 27 May 2010 Link to this post

This did nothing to solve the original problem. I need a way to apply a expanded class when the child elements are displaying, this approach does not offer any way to control the expanded state of the top level navigation element when child elements are displaying. (just check out Telerik top nav to see sample) It can be done using the following code snippet but does not give me much control over text styling:

<telerik:RadMenuItem GroupSettings-ExpandDirection="auto" Value="fff" PostBack="false" Text="RESEARCH <br>Find Your Answers">

If I could somehow get an expandedcssclass attribute for itemtemplate that would do the trick.
Kamen Bundev
Admin

1532 posts

Posted 01 Jun 2010 Link to this post

Hello Bob,

The example was intended to show how you can set a class to the item template link element - namely rmExpanded. You can of course add any CSS class there or add several, for instance like this:
function toggleExpanded(sender, args) {
    var $ = $telerik.$;

    if (args._cancel != null)
        setTimeout( function () { $('.rmLink', args.get_item().get_element()).addClass('rmExpanded').addClass('AnyClassYouLike'); }, 10 );
    else
        $('.rmLink', args.get_item().get_element()).removeClass('rmExpanded').removeClass('AnyClassYouLike');
}
Let me know if this was what you wanted.

Kind regards,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

ExpandedCssClass in radmenu does not work

Bob Bernstein

Kamen Bundev

Bob Bernstein

Kamen Bundev

Bob Bernstein

Kamen Bundev

Bob Bernstein

Kamen Bundev