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

Problem with RadContextMenu and styles...

5 Answers 263 Views

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

Rick asked on 21 Oct 2008, 09:40 AM

We've a problem with the RadContextMenu not getting its style from the supplied css class. This used to work with the Q1 version but now doesn't with Q2.

This is the aspx code:

<Telerik:RadContextMenu id="RadMenu1" runat="server" ExpandAnimation-Type="None" CollapseAnimation-Type="None" Skin="" CssClass="ContextMenu" OnItemClick="RadMenu1_ItemClick">
    <Items>
        <Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 1" />
        <Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 2" />
    </Items>
    </Telerik:RadContextMenu>

And the CSS:

.ContextMenu
{
   background: #EEE;
   border: 1px solid #999;
}

.ContextMenuItem
{
   font-family: Tahoma;
   font-size: 11px;
}

I have a feeling its something to do with the way the styles are applied to the rendered controls.

The <head> tag on the page:

<head>
<link href="App_Themes/MyTheme/style.css" type="text/css" rel="stylesheet" />
<link href="/WebSite/WebResource.axd?d=6Tx0JnQCvpljO6kU8QXiaGon_Wi8DODn6lVOSo0OWiAhZUmCEuEsqCnM9kpno6GqYxHpy3iGoT39SD09NDSeUQ2&amp;t=633583818740000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />
<link href="/WebSite/WebResource.axd?d=6Tx0JnQCvpljO6kU8QXiaGon_Wi8DODn6lVOSo0OWiD0c8GvHZfAd39EyfNWNYid0&amp;t=633583818740000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />
</head>

The rendered HTML:

<div id="ctl00_ContentPlaceHolder1_RadMenu1" class=" ContextMenu">
	<div class="RadMenu RadMenu_ rmContextMenu RadMenu__Context">
		<ul class="rmActive rmVertical rmGroup rmLevel1">

			<li class="rmItem rmFirst"><a href="#" class="rmLink ContextMenuItem"><span class="rmText">Option 1</span></a></li><li class="rmItem rmLast"><a href="#" class="rmLink ContextMenuItem"><span class="rmText">Option 2</span></a></li>
		</ul>
	</div><input id="ctl00_ContentPlaceHolder1_RadMenu1_ClientState" name="ctl00_ContentPlaceHolder1_RadMenu1_ClientState" type="hidden" />
</div>

If anyone could shed any light on this I would be grateful

5 Answers, 1 is accepted

answered on 21 Oct 2008, 11:00 AM

Hi Rick,

Indeed, this is a bug with RadContextMenu. Setting the CssClass property does not apply the class to the proper menu element. I have logged the issue and our developers will see to it.

Meanwhile, you can workaround the problem by simply overriding the .rmContextMenu class. This way you only have to set the CssClass property for the menu items:

This is the aspx code:

<Telerik:RadContextMenu id="RadMenu1" runat="server" ExpandAnimation-Type="None" CollapseAnimation-Type="None" Skin="" CssClass="ContextMenu" OnItemClick="RadMenu1_ItemClick">
    <Items>
        <Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 1" />
        <Telerik:RadMenuItem CssClass="ContextMenuItem" Text="Option 2" />
    </Items>
    </Telerik:RadContextMenu>

And the CSS:

.rmContextMenu
{
   background: #EEE;
   border: 1px solid #999;
}

.ContextMenuItem
{
   font-family: Tahoma;
   font-size: 11px;
}

Therefore, setting CssClass="ContextMenu" (highlighted with orange above) is redundant.

Best wishes,
Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.