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">
        <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?
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 03 Apr 2013 Link to this post

    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
    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
Back to Top