The C1Menu control can be used as a context menu for most of the other ComponentOne controls. This topic will walk you through displaying a C1Menu control as a context menu for a C1TreeView control.

Complete the following steps:

1. Add a C1Menu control and a C1TreeView control to your application.
2. Click the C1Menu smart tag to open the C1Menu Tasks menu and select Edit Menu.
3. From the C1Menu Designer Form, click the Add Child Item button to add a C1MenuItem to the C1Menu control.
4. Select the C1MenuItem you just added and locate the Text property in the Properties window.  Enter "Add Nodes" in the Text property textbox.
5. Click  the Add Child Item button to add a C1MenuItem to the C1Menu control.
6. Select the C1MenuItem you just added and locate the Text property in the Properties window. Enter "Delete Nodes" in the Text property textbox.
7. Click OK to close the C1Menu Designer Form and switch to Source View.
8. Add the following markup to the <cc1:C1Menu> tags:     

   OnClientSelect

   onclientselect="C1Menu_OnClientSelect" Orientation="Vertical"
        Trigger="#C1TreeView1" TriggerEvent="Rtclick"

   The complete opening tag markup should resemble the following:

   To write code in Source View

   <cc1:C1Menu ID="C1Menu1" runat="server"

           onclientselect="C1Menu_OnClientSelect" Orientation="Vertical"

           Trigger="#C1TreeView1" TriggerEvent="Rtclick">

9. Locate the <cc1:C1TreeView> tags and add the following markup between the tags:

   To write code in Source View

   <Nodes>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="Node1">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="SubNode1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="SubNode2">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="Node2">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="SubNode1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="SubNode2">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
        </Nodes>
10. Add the following script above the <cc1:C1Menu> markup.

    To write code in Source View

    <script type="text/javascript">
        $(document).ready(function () {
            $(".wijmo-wijtree-node").mousedown(function (e) {
                if (e.button == 2)
                    $(this).arent().c1treeviewnode("option", "selected", "true");
            });
        });
 
        function C1Menu_OnClientSelect(sender, args) {
            alert("You have selected " + args.item[0].innerText);
        }
    </script>
11. Run your application. When you right-click one of the C1TreeView nodes, the menu will appear.