Context Menu on Navigation

[Nihan dK]

Hi there,

We are trying to attach a Context Menu to RadNavigation, see sample code below. The context menu only opens for the top level items in the the RADNavigation and not the sub-items. How can we get it working with the sub-items too?

<telerik:RadNavigation ID="RadNavigation1" runat="server" Skin="Bootstrap" MenuButtonPosition="Left" OnClientContextMenu="OnClientContextMenu"
    EnableViewState="false" OnNodeDataBound="RadNavigation1_NodeDataBound" OnClientNodeMouseEnter="OnClientNodeMouseEnter"
    OnClientNodeMouseLeave="OnClientNodeMouseLeave" DataSourceID="SiteMapDataSource1" OnDataBound="RadNavigation1_DataBound">
    <Nodes>
    </Nodes>
</telerik:RadNavigation>
<telerik:RadContextMenu runat="server" ID="ContextMenu2" Skin="Bootstrap" EnableViewState="false"
    OnClientItemClicked="OnClientItemClickedContextMenu">
    <Targets>
       <telerik:ContextMenuControlTarget ControlID="RadNavigation1" />
    </Targets>
    <Items>
        <telerik:RadMenuItem Text="Move ​item up" Value="MoveUp" />
        <telerik:RadMenuItem Text="Move item down" Value="MoveDown" />
    </Items>
</telerik:RadContextMenu>

[Ivan Danchev]

Hello Nihan,

I answered you inquiry in the opened support ticket with the same subject. If you have more questions, in order to avoid thread duplication, I suggest we continue the discussion in the other thread.

Regards,
Ivan Danchev
Telerik

[Brett]

You know for some reason a search on the topic brings me to THIS post, which does not include a link to the post with the actual answer.

Not very helpful.

 

[Peter Milchev]

Hello Brett,

We are trying to share the solution from the support threads but it seems we missed that one. Nevertheless, I am sharing the solution that was accepted by Nihan.

Since the Navigation's child nodes are rendered outside of the main Navigation div element you will not be able to show the ContextMenu when right-clicking the child nodes by setting the RadNavigation ID to the ContextMenu's ControlID property.

As a workaround you can use the approach posted below, which checks the classes of the elements the user clicks on and cancels the Menu showing if the element does not belong to the RadNavigation:

<script type="text/javascript">
    function OnClientShowing(sender, args) {
        var element = args.get_targetElement();
        if (element.className != "rnvText" && element.className != "rnvLink" && element.className != "rnvRootLink rnvLink" && element.className != "rnvToggle radIcon") {
            args.set_cancel(true);
        }
    }
</script>
<div>
    <telerik:RadContextMenu runat="server" ID="ContextMenu2" Skin="Bootstrap" EnableViewState="false"
        OnClientItemClicked="OnClientItemClickedContextMenu" OnClientShowing="OnClientShowing">
        <Targets>
            <telerik:ContextMenuControlTarget ControlID="RadNavigation1" />
            <telerik:ContextMenuTagNameTarget TagName="li" />
        </Targets>
        <Items>
            <telerik:RadMenuItem Text="Move ​item up" Value="MoveUp" />
            <telerik:RadMenuItem Text="Move item down" Value="MoveDown" />
        </Items>
    </telerik:RadContextMenu>
</div>

Regards,
Peter Milchev
Progress Telerik