YUI Library Home

YUI Library Examples: Menu Family: Adding A Context Menu To A TreeView

Menu Family: Adding A Context Menu To A TreeView

This example demonstates how to use the ContextMenu widget to add a context menu to a YUI TreeView control. The context menu allows the user to add, edit and remove items from a TreeView instance.

Please Note: Opera users will need to do the following to use this example:

  • Opera for Windows: Hold down the control key and click with the left mouse button.
  • Opera for OS X: Hold down the command key (⌘) and click with the left mouse button.

When adding context menus to large data structures like a <table> or large list (<ol> or <ul>), it is recommended to bind a single YAHOO.widget.ContextMenu instance to the structure's root element, than to a set of its child nodes (<tr>s or <li>s). Doing so significantly improves the performance of a web page or application by reducing the number of "contextmenu" event handlers as well as the number of YAHOO.widget.ContextMenu instances in memory.

Begin by creating a TreeView instance.

1/*
2     Initialize the TreeView instance when the "mytreeview" <div>
3     is ready to be scripted.
4*/ 
5 
6YAHOO.util.Event.onAvailable("mytreeview", function () { 
7 
8    // Creates a TextNode instance and appends it to the TreeView 
9 
10    function buildRandomTextBranch(p_oNode) { 
11 
12        var oTextNode, 
13            i; 
14 
15        if (p_oNode.depth < 6) { 
16 
17            for (i = 0; i < Math.floor(Math.random() * 4); i++) { 
18 
19                oTextNode = new YAHOO.widget.TextNode(p_oNode.label + "-" + i, p_oNode, false); 
20 
21                buildRandomTextBranch(oTextNode); 
22 
23            } 
24 
25        } 
26 
27    } 
28 
29 
30    // Create a TreeView instance 
31 
32    var oTreeView = new YAHOO.widget.TreeView("mytreeview"); 
33 
34    var n, oTextNode; 
35 
36    for (n = 0; n < Math.floor((Math.random()*4) + 3); n++) { 
37 
38        oTextNode = new YAHOO.widget.TextNode("label-" + n, oTreeView.getRoot(), false); 
39 
40        /*
41             Add the TextNode instance to the map, using its
42             HTML id as the key.
43        */ 
44 
45        buildRandomTextBranch(oTextNode); 
46 
47    } 
48 
49    oTreeView.draw(); 
50 
51}); 
view plain | print | ?

Once the TreeView is created, instantiate a ContextMenu specifying the TreeView instance's root element as its trigger. Lastly, add a "triggerContextMenu" event handler for the ContextMenu instance that uses the "contextEventTarget" property to retrieve the TextNode instance that triggered its display. A reference to the TextNode is stored in a variable (oCurrentTextNode), so that it can be manipulated by the addNode, editNodeLabel, and deleteNode functions.

1/*
2     The YAHOO.widget.TextNode instance whose "contextmenu"
3     DOM event triggered the display of the
4     ContextMenu instance.
5*/ 
6 
7var oCurrentTextNode = null; 
8 
9 
10/*
11     Adds a new TextNode as a child of the TextNode instance
12     that was the target of the "contextmenu" event that
13     triggered the display of the ContextMenu instance.
14*/ 
15 
16function addNode() { 
17 
18    var sLabel = window.prompt("Enter a label for the new node: ", ""), 
19        oChildNode; 
20 
21    if (sLabel && sLabel.length > 0) { 
22 
23        oChildNode = new YAHOO.widget.TextNode(sLabel, oCurrentTextNode, false); 
24 
25        oCurrentTextNode.refresh(); 
26        oCurrentTextNode.expand(); 
27 
28    } 
29 
30} 
31 
32 
33/*
34     Edits the label of the TextNode that was the target of the
35     "contextmenu" event that triggered the display of the
36     ContextMenu instance.
37*/ 
38 
39function editNodeLabel() { 
40 
41    var sLabel = window.prompt("Enter a new label for this node: ", oCurrentTextNode.getLabelEl().innerHTML); 
42 
43    if (sLabel && sLabel.length > 0) { 
44 
45        oCurrentTextNode.getLabelEl().innerHTML = sLabel; 
46 
47    } 
48 
49} 
50 
51 
52/*
53    Deletes the TextNode that was the target of the "contextmenu"
54    event that triggered the display of the ContextMenu instance.
55*/ 
56 
57function deleteNode() { 
58 
59    oTreeView.removeNode(oCurrentTextNode); 
60    oTreeView.draw(); 
61 
62} 
63 
64 
65/*
66    "contextmenu" event handler for the element(s) that
67    triggered the display of the ContextMenu instance - used
68    to set a reference to the TextNode instance that triggered
69    the display of the ContextMenu instance.
70*/ 
71 
72function onTriggerContextMenu(p_oEvent) { 
73 
74    var oTarget = this.contextEventTarget; 
75 
76    /*
77         Get the TextNode instance that that triggered the
78         display of the ContextMenu instance.
79    */ 
80 
81    oCurrentTextNode = oTreeView.getNodeByElement(oTarget); 
82 
83    if (!oCurrentTextNode) { 
84        // Cancel the display of the ContextMenu instance. 
85 
86        this.cancel(); 
87 
88    } 
89 
90} 
91 
92 
93/*
94    Instantiate a ContextMenu:  The first argument passed to the constructor
95    is the id for the Menu element to be created, the second is an
96    object literal of configuration properties.
97*/ 
98 
99var oContextMenu = new YAHOO.widget.ContextMenu( 
100    "mytreecontextmenu", 
101    { 
102        trigger: "mytreeview", 
103        lazyload: true, 
104        itemdata: [ 
105            { text: "Add Child Node", onclick: { fn: addNode } }, 
106            { text: "Edit Node Label", onclick: { fn: editNodeLabel } }, 
107            { text: "Delete Node", onclick: { fn: deleteNode } } 
108        ] 
109    } 
110); 
111 
112 
113/*
114     Subscribe to the "contextmenu" event for the element(s)
115     specified as the "trigger" for the ContextMenu instance.
116*/ 
117 
118oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Menu Family Examples:

More Menu Family Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings