Show ContextMenu from JavaScript

7 posts, 0 answers
  1. Samir Gulrajani
    Samir Gulrajani avatar
    10 posts
    Member since:
    May 2005

    Posted 01 May 2012 Link to this post

    Hello,

    I am looking for some code snippet, that will enable the ContextMenu of my TreeView to show.  I tried following, but I think it wants some parameter to be passed along with show(parameter); and I do not know what to pass here.  I have tried passing in the node, but that did not work.

    function ShowContextMenu() {
        var tree = $find('tvEstimate');
        var node = tree.get_selectedNode();
        if (node) {
            var menu = node.get_contextMenu();
            menu.show();
        } 
    }

    The above code gets triggerd by clicking a button,  I have also debugged the above code, and there are valid values in each object - tree, node and menu.  They all have proper values in them, but menu.show() does not show the context menu.  Any suggestion?

    Thanks.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 May 2012 Link to this post

    Hi Samir,

    I tried a similar scenario to show the contextmenu on OnClientNodeClicked event as follows.

    ASPX:
    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientNodeClicked="ShowContextMenu">
      <ContextMenus>
            .....
      </ContextMenus>
    .....
    </telerik:RadTreeView>

    JS:
    <script type="text/javascript">
     function ShowContextMenu(sender,e)
      {
        sender.showNodeContextMenu(e.get_node(), e.get_domEvent());
      }
    </script>

    Please elaborate your scenario if it doesn't helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Samir Gulrajani
    Samir Gulrajani avatar
    10 posts
    Member since:
    May 2005

    Posted 07 May 2012 Link to this post

    Thanks Princy,

    I am wanting to have the context menu show up from the click event of a button.  Something outside the TreeView.

    Your example, uses the event of the treeview, that will not work for me.  Any other suggestions.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 May 2012 Link to this post

    Hi Samir,

    I tried a similar scenario to show contextmenu OnClientClick of a Button.

    ASPX:
    <asp:Button ID="Button1" runat="server" Text="Show" OnClientClick="ShowContextMenu(event); return false;" />

    JS:
    <script type="text/javascript">
      function ShowContextMenu(event)
       {
            var tree = $find("<%=RadTreeView1.ClientID %>");
            var node = tree.get_selectedNode();
            if (node)
             {
                var menu = node.get_contextMenu();
                menu.show(event);
             }
        }
    </script>

    Hope this helps.

    Thanks,
    Princy.
  6. Samir Gulrajani
    Samir Gulrajani avatar
    10 posts
    Member since:
    May 2005

    Posted 15 May 2012 Link to this post

    Passing the event parameter was the key.  Works great now.

    Thanks!
  7. Samir Gulrajani
    Samir Gulrajani avatar
    10 posts
    Member since:
    May 2005

    Posted 16 May 2012 Link to this post

    Passing the event showed the context menu; but now none of the items when clicked do not fire "OnClientContextMenuItemClicking" event.  However, they do get fired, when the context menu is actually shown by a mouse right click.

    The interesting thing is, after the initial mouse right click the delegated (button clicked context menu) also starts to fire the above event.  It is like some linkup of the event does not happen until the mouse right click takes place.

    Any suggestion, what am I missing.
  8. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 18 May 2012 Link to this post

    Hi Samir,

    This happens because RadTreeView uses an internal property called _contextMenuNode which holds a reference to the node that you've right-clicked on when you use the context menu. So when you open the menu from an outside button, you have to set this property manually. Here is the modified code:
    function ShowContextMenu(event)
       {
            var tree = $find("<%=RadTreeView1.ClientID %>");
            var node = tree.get_selectedNode();
            if (node)
             {
                tree._contextMenuNode = node;
                var menu = node.get_contextMenu();
                menu.show(event);
             }
        }

     
    All the best,
    Bozhidar
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017