Style not applied to first Menu Item

3 posts, 1 answers
  1. Athena
    Athena avatar
    2 posts
    Member since:
    Mar 2013

    Posted 21 May 2013 Link to this post

    Hello, I'm new to using the Telerik controls and I haven't had any luck finding an answer to my problem so far.  All I'm trying to do is have a different background image for un-selected menu items, selected menu items and hovered menu items.  So far I've been able to apply this style to all menu items except for the very first one.  I'm not doing any thing different in my code, so I'm wondering if I should be doing something different.  In my attached picture, you can see the first menu item (selected) without my background image.  The second item has the correct selected style, the third item has the correct un-selected style and the final item has the correct hover style.  If it makes any difference, this control is on a master page.

    CSS
    .NormalMenuItem
    {
        /*background-color: red !important;*/
        background-image: url(../Images/headerNormal.png) !important;
        background-size: 100% 35px;
    }
     
    .NormalMenuItem:hover
    {
        /*color: red !important;
        background-color: white !important;*/
        background-image: url(../Images/headerHover.png) !important;
        background-size: 100% 35px;
    }
     
    .SelectedMenuItem
    {
        /*background-color: purple !important;*/
        background-image: url(../Images/headerActive.png) !important;
        background-size: 100% 35px;
    }

    C#
    DataTable mnuDT = new DataTable();
    mnuDT.Columns.Add("Section");
    mnuDT.Rows.Add("Employees");
    mnuDT.Rows.Add("Projects");
    mnuDT.Rows.Add("Customers");
     
    Telerik.Web.UI.RadMenuItem homeRmi = new Telerik.Web.UI.RadMenuItem();
    homeRmi.Text = "Home";
    homeRmi.CssClass = "NormalMenuItem";
    homeRmi.ClickedCssClass = "SelectedMenuItem";
    homeRmi.SelectedCssClass = "SelectedMenuItem";
    homeRmi.Selected = true;
    rmMain.Items.Add(homeRmi);
     
    for(int i = 0; i < mnuDT.Rows.Count; i++)
    {
        Telerik.Web.UI.RadMenuItem rmi = new Telerik.Web.UI.RadMenuItem();
        rmi.Text = mnuDT.Rows[i].ItemArray[0].ToString();
        rmi.CssClass = "NormalMenuItem";
        rmi.ClickedCssClass = "SelectedMenuItem";
        rmi.SelectedCssClass = "SelectedMenuItem";
        rmMain.Items.Add(rmi);
    }

    ASPX
    <telerik:RadMenu ID="rmMain" runat="server" onitemclick="rmMain_ItemClick">
    </telerik:RadMenu>
  2. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 23 May 2013 Link to this post

    Hello Athena,

    Please try using the EnableEmbeddedSkins="false" property of the RadMenu (as described here in the Customizing Skins section) that will allow you to use your custom styles. 

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Athena
    Athena avatar
    2 posts
    Member since:
    Mar 2013

    Posted 23 May 2013 Link to this post

    Hi Kate,

    That worked great for fixing my demo, and then it left me scratching my head since I looked at my website and see that I already had that property set to false.  So then I double checked my CSS file to see what differed from the Demo, and saw that I had .rmRootGroup on my styles, can't remember where in my search I found that bit of information, but once I removed that it worked.

    Thanks so much!
Back to Top