Context Menu on Navigation

4 posts, 0 answers
  1. Nihan dK
    Nihan dK avatar
    3 posts
    Member since:
    Feb 2006

    Posted 20 Oct 2015 Link to this post

    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>

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1775 posts

    Posted 22 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Brett
    Brett avatar
    1 posts
    Member since:
    Oct 2017

    Posted 28 Aug in reply to Ivan Danchev Link to this post

    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.

     

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    615 posts

    Posted 29 Aug Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top