Issue with ContextMenu Item Disable CSS Style when using ItemTemplate

[Sem]

I am using a RadTreeViewContextMenu in a RadTreeView like so:

ASP.NET Code:

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

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()) {
           $(menuItem.get_element()).addClass("rmDisabled");
    }
    }
}

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?

[Boyan Dimitrov]

Hello,

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.

Regards,
Boyan Dimitrov
the Telerik team