Show ContextMenu from JavaScript

[Samir Gulrajani]

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.

[Princy]

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.

[Samir Gulrajani]

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.

[Princy]

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.

[Samir Gulrajani]

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

Thanks!

[Samir Gulrajani]

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.

[Bozhidar]

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