Issue with ContextMenu Item Disable CSS Style when using ItemTemplate

2 posts, 0 answers
  1. Sem
    Sem avatar
    4 posts
    Member since:
    Jun 2011

    Posted 02 Apr 2013 Link to this post

    I am using a RadTreeViewContextMenu in a RadTreeView like so:

    ASP.NET Code:

    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientContextMenuShowing="ContextMenuShowing">
            <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1" CssClass="context-menu">
                    <telerik:RadMenuItem Text="Item1" Value="1">
                            <asp:Label ID="Label1" runat="server" Text="Item One" />
                            <%-- Some other controls here --%>

    CSS Code:

    .context-menu .rmText
        font-size: 0.9em;
    .context-menu .rmDisabled
        color: #aaa !important;
        background-color: transparent !important;
    .context-menu .rmItem:hover,
    .context-menu .rmFirst:hover,
    .context-menu .rmLast:hover
        cursor: default !important;
        background-color: #FF9900 !important;
    .context-menu .rmSeparator:hover
        background-color: transparent !important;

    When I disable a context menu item (using the OnClientContextMenuShowing event) I am having problems getting the menu item to not be highlighted on mouse over. However, I can get the text color to change (shown in css code as .context-menu .rmDisabled
    ). I've also tried adding the rmDisabled css class to the disabled li tag element in my JavaScript event handler for OnClientContextMenuShowing event like so:

    function ContextMenuShowing(sender, args) {
        var menuItems = args.get_menu().get_items();
        var isNodeEnabled = treeNode.get_attributes().getAttribute("isEnabled");
        for (var i = 0; i < menuItems.get_count(); i++) {
            var menuItem = menuItems.getItem(i);
            menuItem.set_enabled(isNodeEnabled == "True");
            if (!menuItem.get_enabled()) {

    But this only works when I remove the !important declaration from the context-menu .rmItem:hover, .context-menu .rmFirst:hover and, .context-menu .rmLast:hover class definitions, which in turn causes the first and last items to not be highlighted on mouse over (hover). How can I get the menu item to not be highlighted on mouse over?
  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    1728 posts

    Posted 03 Apr 2013 Link to this post


    Please find attached a sample project that implements the following scenario - first and last menu item from RadTreeView context menu are highlighted in orange when hovered.
    All other items ( in this case only the middle one) are not highlighted when hovered.

    If this is not the right scenario, please explain what exactly you are trying to achieve.

    Boyan Dimitrov
    the Telerik team
    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. DevCraft R3 2016 release webinar banner
Back to Top