This is a migrated thread and some comments may be shown as answers.

ExpandedCssClass in radmenu does not work

7 Answers 149 Views

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 19 May 2010, 02:42 PM

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">

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>

answered on 20 May 2010, 02:37 PM

megad2.jpg

megad1.jpg

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">

<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>

<h3>

Latest News

</h3>

<h2>

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

<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>

<tr>

<td>

</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>

</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>

</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>

</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>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

<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">

<h3>

Industry Events

</h3>

<h2>

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

<p>

Furniture design event inaugurated in 1979 featuring furniture and interior design

exhibitors from all over the world.

</p>

</div>

<tr>

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

<td>

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

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

answered on 25 May 2010, 04:09 PM

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.

answered on 27 May 2010, 01:35 PM

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.

answered on 01 Jun 2010, 10:14 AM

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