C1Menu as C1TreeView's ContextMenu

Few of our customers have asked how to use C1Menu as ContextMenu with other Wijmo controls. This blog explains a simple way to display C1Menu as ContextMenu. For this article, I've used the C1TreeView Wijmo control. When the user right clicks on any C1TreeViewNode and also select the right clicked node.

Set up C1Menu as ContextMenu

To use C1Menu as a ContextMenu, there are two properties that need to be specified. 1. Trigger - Used to specify the control on which you want to show the context menu. For our example, it's C1TreeView.

<wijmo:C1Menu ID="C1Menu1" runat="server" Mode="Flyout" Trigger="#C1TreeView1" />

2. TriggerEvent

<wijmo:C1Menu ID="C1Menu1" runat="server" Mode="Flyout" Trigger="#C1TreeView1" TriggerEvent="Rtclick" />

Selecting TreeViewNode

Now that we've setup C1Menu as ContextMenu, we'll add a little jQuery code to select the Node which is right clicked.

$(document).ready(function () {  
 $(".wijmo-wijtree-node").mousedown(function (e) {  
 if (e.button == 2)  
 $(this).parent().c1treeviewnode("option", "selected", "true");  
 });  
 });

That's it! Refer to the attached sample for complete implementation. Download Sample