[Solved] RadMenu BackColor Does not show

[IQworks]

Hi,
    From what I have read researching this issue, it seems that simply using the RadMenu BackColor as you do in other controls is not straightforward.
    I have read things talking about setting it programmatically, childmenu items, etc.
    I just want to be sure there is nothing I am overlooking to simply use the RadMenu BackColor="Color" property ?
    This is my code .....

  <telerik:RadMenu OnClientMouseOut="Mmouseout" OnClientMouseOver="Mmouseover" OnItemClick="RadMenu1_OnItemClick"
                                    OnClientItemClicked="RadMenu1_OnClientItemClicked" ID="RadMenuLine" ExpandAnimation-Type="InOutBack"
                                    CollapseAnimation-Type="InQuad" BorderColor="Brown"
                                      Skin="WebBlue" runat="server" Font-Size="Small"
                                     Width="100%" commandName="MenuCommand"  >
                                       <Items>
                                        <telerik:RadMenuItem GroupSettings-ExpandDirection="Up" runat="server" Text="View"
                                            BackColor="Yellow" ForeColor="Brown" Font-Bold="true"  Style="font-weight: bold">
                                            <Items>
                                                <telerik:RadMenuItem runat="server" Text="Detail" CssClass="MenuItemLeft" BackColor="Yellow"
                                                    ForeColor="Blue">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem runat="server" Text="Summary" ForeColor="Blue">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem runat="server" Text="Print" NavigateUrl="~/mybodyscience/MBS_Reports/iqReport_Display.aspx"
                                                    BackColor="Yellow" ForeColor="Blue" Target="_blank">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Add Equipment" commandName="MAddCommand"
                                          BackColor="Yellow" ForeColor="Brown" Font-Bold="true" >
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Refresh"
                                            BackColor="Yellow" ForeColor="Brown" Font-Bold="true" >
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" id="Mhelp" Text="Help" commandName="MhelpCommand"
                                            BackColor="Yellow" ForeColor="Brown" Font-Bold="true" Value="88">
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenu>

Thanks for your time ....

[Peter]

Hi,

It depends on what exactly you need to achieve. I tested the code you provided but I am not sure if this is the desired result or not. If you need to change something to the current appearance of RadMenu, please specify and we will help you out.

All the best,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[IQworks]

Hi,
   Let me put it another way. I had a skin specified for my radmenu. I took out the skin property code and used the BackColor, but the color did not change. My question is - do I need to set the backcolor property programmatically, or is there something in my code that is just keeping the BackColor property from working ? Sorry for the lightweight question, but I have not tested the BackColor Radmenu Property, I am pretty sure though that you guys would not have it there unless it could be used, so, I am just thinking its got to be this code ? 

  Another question aside from the above problem is  - Are there any limitations to using a RadMenu within the commadItem template ?

thanks

[Peter]

Hello,

If you need to set BackColor for the Menu, for example: <telerik:RadMenu BackColor="Red" .../>, you have to clear the background styles which come with the skin (if you don't set the Skin property, still the Default skin will get applied). To do this, please use the following css rule:

 <style type="text/css">
    .rmRootGroup
    {
        background: none !important;
    }
    </style>

As for the other question, you can use RadMenu just like you would use a regular asp LinkButton. If you encounter any problems, please describe in datail your scnenario and how exactly you use RadMenu and we will help you further.


All the best,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[IQworks]

Hi Peter,
   I tried what you suggested, but it did not work ?

	<telerik:RadMenu OnClientMouseOut="Mmouseout" OnClientMouseOver="Mmouseover" OnItemClick="RadMenu1_OnItemClick"
	OnClientItemClicked="RadMenu1_OnClientItemClicked" ID="RadMenuLine" ExpandAnimation-Type="InOutBack"
	CollapseAnimation-Type="InQuad" BorderColor="Brown"
	Skin="WebBlue" runat="server" Font-Size="Small"
	CssClass="rmRootGroup"  BackColor="Yellow"
	ContextMenuElementID="none"
	Width="100%" commandName="MenuCommand"  >

	.rmRootGroup
	{
	background: none !important;
	}

  Is there something else I might need to do ?

[Peter]

Hi,

You should not set CssClass="rmRootGroup". rmRootGroup is rendered by RadMenu. Here is what I tried and it worked as expected:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .rmRootGroup
        {
            background: none !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadMenu ID="RadMenuLine" ExpandAnimation-Type="InOutBack" CollapseAnimation-Type="InQuad"
        BorderColor="Brown" Skin="WebBlue" runat="server" Font-Size="Small" BackColor="Yellow"
        ContextMenuElementID="none" Width="100%" commandName="MenuCommand">
        <CollapseAnimation Type="InQuad"></CollapseAnimation>
        <Items>
            <telerik:RadMenuItem runat="server" BackColor="Black" Text="Root RadMenuItem1">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" BackColor="Black" Text="Root RadMenuItem2">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" BackColor="Black" Text="Root RadMenuItem3">
            </telerik:RadMenuItem>
        </Items>
        <ExpandAnimation Type="InOutBack"></ExpandAnimation>
    </telerik:RadMenu>
    </form>
</body>
</html>

Sincerely yours,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[IQworks]

Thanks Peter, that was perfect, here is what I found (Hope I describe this correctly) ....

To change the color of a RadMenu Link

<style>

.rmGroup .rmLink {

background-color: #996633;

height: auto;

}

</style>

On the RadMenuItem, take out "BackColor property" and the background-color will be  #996633. If

you leave BackColor in, then it will override the .rmGroup link style like below ....  (This will render as Yellow regardless

of the background-color style)

<telerik:RadMenuItem runat="server" Text="Detail View" CssClass="MenuItemLeft" BackColor="Yellow" ForeColor="Blue">

----

This changes the background of the LINKS on the Radmenu, Not the RadMenu Background itself to red -  Do not use the BackColor property. This will affect any link that does not have a BackColor Property specified.

.rmRootGroup .rmLink

{

background-color: Red  !important;

}

----------------

This DOES changed the background of the whole radMenu line to Yellow (do not use  BackColor property in RadMenu with this).

.rmRootGroup

{

background: Yellow  !important;

}

----------------

This changes the background (menuitems, the whole Menu line) to skin default ?

.rmRootGroup .rmLink

{

background: none !important;

}