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

7 posts, 0 answers
  1. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 25 May 2011 Link to this post

    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 .

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 May 2011 Link to this post

    .
  3. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 25 May 2011 Link to this post

    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
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  5. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 02 Jun 2011 Link to this post

    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;

     

     

    }

     

    }




     

  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 09 Jun 2011 Link to this post

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


    Regards,
    ManishKumar  
Back to Top