Problem to change the Back color and font color of radmenu dynamically.

[Manishkumar]

Hi All,

     I am using Telerik Radmenu in my application. The telerik version I am using is Telerik.Web.UI.ddl 2010.3.1317.35.
Now  I have a requirement of changing back color and font color of menu item depending on the user selection .
For that I overwrite some of the inbuild CSS classes but it can not solve my problem because now I am able to change the back color
and font color but the menu UI get distroted.
Can any one have any idea how to change the backcolor and fontcolor of Radmenu dynamically with out menu UI distrotion.
I have attached the screen shot  for refer .

[Shinu]

.

[Manishkumar]

Hi
I am using Telerik Radmenu in my application.

The telerik version I am using is Telerik.Web.UI.dll 2010.3.1317.35. 

I have a requirement of changing back color and font color of menu item depending on the user selection. For this I have overwritten some of the inbuilt CSS classes.

I am able to change the back color and font color but the menu UI is distroted. 

Does  any one have any idea how to change the backcolor and fontcolor of Radmenu dynamically with out menu UI distrotion.

I have attached the screenshot  for refererence.

Thanks and regards,
Manish Patel

[Kate]

Hello Manishkumar,

Can you please send us either a live url or open a support ticket and send us a sample project reproducing the issue since it is not clear what is causing it? With the support ticket we will need the css file(s) and images that you apply, so we can help you resolve the issue.

Greetings,
Kate
the Telerik team

[Manishkumar]

Hi  kate,
    I have added some code reference for better understanding .
    I have two dropdown controls , one is for selecting radmenu back ground color and
    second dropdown is for setting menu font size.

   Please find the code below. 
   *********************************************************************************************************************************************
  

<%

@ Page Language="C#" MasterPageFile="~/CLAF_Library_MasterPage.Master" AutoEventWireup="true"

 

 

CodeFile="MenuTest.aspx.cs" Inherits="MenuTest" Title="Untitled Page" %>

 

 

<%

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

 

<

 

asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

 

 

<style type="text/css">

 

 

.RadMenu_Office2007 .rmRootGroup

 

{

 

border: none !important;

 

 

}

 

 

.rmRootGroup

 

{

 

background: none !important;

 

 

}

 

 

.MyClass

 

{

 

color: Red !important;

 

 

}

 

 

.rmText

 

{

 

color: Black !important;

 

 

}

 

 

.Green .rmText

 

{

 

color: Green !important;

 

 

}

 

 

.Red .rmText

 

{

 

color: Red !important;

 

 

}

 

 

.Blue .rmText

 

{

 

color: Blue !important;

 

 

}

 

 

.White .rmText

 

{

 

color: White !important;

 

 

}

 

 

</style>

 

 

<div style="margin: 40px 15px 15px 25px">

 

 

<asp:Label ID="lblSelectionCriteria" runat="server" Text="Selection Criteria" TabIndex="-1"

 

 

SkinID="skinlblHeaderBold"></asp:Label>

 

 

<hr style="color: Black; background-color: Black" />

 

 

<br />

 

 

<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">

 

 

<tr style="height: 35px">

 

 

<td>

 

 

<asp:Label ID="lblBackcolor" runat="server" Text="Background Color: " TabIndex="-1"></asp:Label>

 

 

<telerik:RadComboBox runat="server" ID="RadCmbBackcolor" EnableLoadOnDemand="false"

 

 

HighlightTemplatedItems="true" Height="135px" Width="35%" Font-Size="8pt" Font-Names="Arial"

 

 

Skin="Office2007" TabIndex="-1" AutoPostBack="false" ToolTip="This option allows user to change menu background color.">

 

 

<Items>

 

 

<telerik:RadComboBoxItem Text="Gray" Value="Gray" Selected="true" />

 

 

<telerik:RadComboBoxItem Text="LightGray" Value="LightGray" />

 

 

<telerik:RadComboBoxItem Text="LightYellow" Value="LightYellow" />

 

 

<telerik:RadComboBoxItem Text="LightGreen" Value="LightGreen" />

 

 

<telerik:RadComboBoxItem Text="LightBlue" Value="LightBlue" />

 

 

<telerik:RadComboBoxItem Text="Red" Value="Red" />

 

 

<telerik:RadComboBoxItem Text="White" Value="White" />

 

 

</Items>

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

<td>

 

 

<asp:Label ID="lblfontColor" runat="server" Text="Font Color: " TabIndex="-1"></asp:Label>

 

 

<telerik:RadComboBox runat="server" ID="RadCmbfontColor" EnableLoadOnDemand="false"

 

 

HighlightTemplatedItems="true" Height="100px" Width="35%" Font-Size="8pt" Font-Names="Arial"

 

 

Skin="Office2007" TabIndex="-1" AutoPostBack="false" ToolTip="This option allows user to change menu font color.">

 

 

<Items>

 

 

<telerik:RadComboBoxItem Text="Black" Value="Black" Selected="true" />

 

 

<telerik:RadComboBoxItem Text="Green" Value="Green" />

 

 

<telerik:RadComboBoxItem Text="Red" Value="Red" />

 

 

<telerik:RadComboBoxItem Text="Blue" Value="Blue" />

 

 

<telerik:RadComboBoxItem Text="White" Value="White" />

 

 

</Items>

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

<br />

 

 

<br />

 

 

<asp:Label ID="lblDemo" runat="server" Text="Demo " TabIndex="-1" SkinID="skinlblHeaderBold"></asp:Label>

 

 

&nbsp;&nbsp;&nbsp;&nbsp;<telerik:RadButton ID="btnRun" runat="server" Text="Run"

 

 

TabIndex="-1" Skin="Office2007" Width="65px" ToolTip="Click to apply your selection criteria and see demo."

 

 

OnClick="btnRun_Click">

 

 

</telerik:RadButton>

 

 

<hr style="color: Black; background-color: Black" />

 

 

<br />

 

 

<table align="center" width="80%" style="height: 200px; margin-top: 20px; border: BackGround 1px solid;

 

 

 

background-color: #EFF7FF" border="0">

 

 

<tr>

 

 

<td style="vertical-align: top">

 

 

<telerik:RadMenu ID="radMenuDemo" runat="server" Flow="Horizontal" EnableEmbeddedSkins="true"

 

 

EnableRoundedCorners="true" EnableShadows="true" Skin="Office2007">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="File">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="New" />

 

 

<telerik:RadMenuItem Text="Open" />

 

 

<telerik:RadMenuItem IsSeparator="True" />

 

 

<telerik:RadMenuItem Text="Save" />

 

 

<telerik:RadMenuItem Text="Save As" />

 

 

<telerik:RadMenuItem IsSeparator="True" />

 

 

<telerik:RadMenuItem Text="Print Preview" />

 

 

<telerik:RadMenuItem Text="Print" />

 

 

<telerik:RadMenuItem IsSeparator="True" />

 

 

<telerik:RadMenuItem Text="Close" />

 

 

</Items>

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem Text="Edit">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="Undo" />

 

 

<telerik:RadMenuItem IsSeparator="True" />

 

 

<telerik:RadMenuItem Text="Cut" />

 

 

<telerik:RadMenuItem Text="Copy" />

 

 

<telerik:RadMenuItem Text="Paste" />

 

 

<telerik:RadMenuItem Text="Clipboard..." />

 

 

<telerik:RadMenuItem IsSeparator="True">

 

 

</telerik:RadMenuItem>

 

 

</Items>

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem Text="Insert">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="Break..." />

 

 

<telerik:RadMenuItem Text="Page Numbers..." />

 

 

<telerik:RadMenuItem Text="Date and Time..." />

 

 

<telerik:RadMenuItem Text="Field..." />

 

 

<telerik:RadMenuItem Text="Symbol..." />

 

 

<telerik:RadMenuItem Text="Comment" />

 

 

<telerik:RadMenuItem IsSeparator="True" />

 

 

<telerik:RadMenuItem Text="Picture" />

 

 

<telerik:RadMenuItem Text="Diagram" />

 

 

<telerik:RadMenuItem Text="Text Box" />

 

 

<telerik:RadMenuItem Text="Hyperlink" />

 

 

</Items>

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem Text="Format">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="Paragraph..." />

 

 

<telerik:RadMenuItem Text="Bullets and Numbering..." />

 

 

<telerik:RadMenuItem Text="Borders and Shading..." />

 

 

<telerik:RadMenuItem IsSeparator="true" />

 

 

<telerik:RadMenuItem Text="Columns" />

 

 

<telerik:RadMenuItem Text="Tabs" />

 

 

<telerik:RadMenuItem Text="Change Case" />

 

 

<telerik:RadMenuItem IsSeparator="true" />

 

 

<telerik:RadMenuItem Text="Background" />

 

 

<telerik:RadMenuItem Text="Theme" />

 

 

<telerik:RadMenuItem Text="Frames" />

 

 

<telerik:RadMenuItem Text="Autoformat" />

 

 

</Items>

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem Text="View">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="Normal" />

 

 

<telerik:RadMenuItem Text="Web Layout" />

 

 

<telerik:RadMenuItem Text="Print Layout" />

 

 

<telerik:RadMenuItem IsSeparator="True" />

 

 

<telerik:RadMenuItem Text="Task Pane" />

 

 

</Items>

 

 

</telerik:RadMenuItem>

 

 

<telerik:RadMenuItem Text="Tools">

 

 

<Items>

 

 

<telerik:RadMenuItem Text="Spelling And Grammar..." />

 

 

<telerik:RadMenuItem Text="Research..." />

 

 

<telerik:RadMenuItem Text="Language" />

 

 

<telerik:RadMenuItem Text="Word Count..." />

 

 

<telerik:RadMenuItem IsSeparator="True" />

 

 

<telerik:RadMenuItem Text="Track Changes" />

 

 

<telerik:RadMenuItem Text="Compare And Merge Documents.." />

 

 

</Items>

 

 

</telerik:RadMenuItem>

 

 

</Items>

 

 

</telerik:RadMenu>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</div>

 

 

</

 

asp:Content>

 

***************************************************************************************************************************

///

 

<summary>

 

 

///

 

 

/// </summary>

 

 

/// <param name="sender"></param>

 

 

/// <param name="e"></param>

 

 

protected void btnRun_Click(object sender, EventArgs e)

 

 

{

 

 

 

 

//radMenuDemo.EnableEmbeddedSkins = false;

 

 

// For Background Color

 

radMenuDemo.BackColor =

this.getcolor(RadCmbBackcolor.SelectedValue);

 

 

 

// For Font Color

 

 

string strCssClass = this.GetCssClass(RadCmbfontColor.SelectedValue);

 

 

 

for (int index = 0; index < radMenuDemo.Items.Count; index++)

 

 

{

 

radMenuDemo.Items[index].CssClass = strCssClass;

 

radMenuDemo.Items[index].BackColor =

this.getcolor(RadCmbBackcolor.SelectedValue);

 

 

 

for (int childIndes = 0; childIndes < radMenuDemo.Items[index].Items.Count; childIndes++)

 

 

{

 

radMenuDemo.Items[index].Items[childIndes].CssClass = strCssClass;

 

radMenuDemo.Items[index].Items[childIndes].BackColor =

this.getcolor(RadCmbBackcolor.SelectedValue);

 

 

}

 

}

 

}

 

 

 

 

/// <summary>

 

 

///

 

 

/// </summary>

 

 

/// <param name="strcssclass"></param>

 

 

/// <returns></returns>

 

 

private string GetCssClass(string strcssclass)

 

 

{

 

 

switch (strcssclass)

 

 

{

 

 

case "Black":

 

 

 

return "rmText";

 

 

 

case "Green":

 

 

 

return "Green rmText";

 

 

 

case "Red":

 

 

 

return "Red rmText";

 

 

 

case "Blue":

 

 

 

return "Blue rmText";

 

 

 

case "White":

 

 

 

return "White rmText";

 

 

 

default:

 

 

 

return "rmText";

 

 

}

 

}

 

 

/// <summary>

 

 

///

 

 

/// </summary>

 

 

/// <param name="Strcolor"></param>

 

 

/// <returns></returns>

 

 

private System.Drawing.Color getcolor(string Strcolor)

 

 

{

 

 

switch (Strcolor)

 

 

{

 

 

case "Gray":

 

 

 

return System.Drawing.Color.Gray;

 

 

 

case "LightGray":

 

 

 

return System.Drawing.Color.LightGray;

 

 

 

case "LightYellow":

 

 

 

return System.Drawing.Color.LightYellow;

 

 

 

case "LightGreen":

 

 

 

return System.Drawing.Color.LightGreen;

 

 

 

case "LightBlue":

 

 

 

return System.Drawing.Color.LightBlue;

 

 

 

case "Red":

 

 

 

return System.Drawing.Color.Red;

 

 

 

case "White":

 

 

 

return System.Drawing.Color.White;

 

 

 

default:

 

 

 

return System.Drawing.Color.Gray;

 

 

}

 

}

 

[Kate]

Hello Manishkumar,

Thanks for the code.

Please take a look at the attached file where I have modified the css classes that you apply from code behind.

Best wishes,
Kate
the Telerik team

[Manishkumar]

Hi Kate ,
Thanks for the reply . It is working now.


Regards,
ManishKumar