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

Yahoo! recommends YUI 3. Learn about YUI 3 on YUILibrary.com.

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.

/*
     Initialize the TreeView instance when the "mytreeview" <div>
     is ready to be scripted.
*/

YAHOO.util.Event.onAvailable("mytreeview", function () {

// Creates a TextNode instance and appends it to the TreeView

function buildRandomTextBranch(p_oNode) {

var oTextNode,
            i;

if (p_oNode.depth < 6) {

for (i = 0; i < Math.floor(Math.random() * 4); i++) {

oTextNode = new YAHOO.widget.TextNode(p_oNode.label + "-" + i, p_oNode, false);

buildRandomTextBranch(oTextNode);

}

// Create a TreeView instance

var oTreeView = new YAHOO.widget.TreeView("mytreeview");

var n, oTextNode;

for (n = 0; n < Math.floor((Math.random()*4) + 3); n++) {

oTextNode = new YAHOO.widget.TextNode("label-" + n, oTreeView.getRoot(), false);

/*
             Add the TextNode instance to the map, using its
             HTML id as the key.
        */

buildRandomTextBranch(oTextNode);

}

oTreeView.draw();

});

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.

/*
     The YAHOO.widget.TextNode instance whose "contextmenu"
     DOM event triggered the display of the
     ContextMenu instance.
*/

var oCurrentTextNode = null;

/*
     Adds a new TextNode as a child of the TextNode instance
     that was the target of the "contextmenu" event that
     triggered the display of the ContextMenu instance.
*/

function addNode() {

var sLabel = window.prompt("Enter a label for the new node: ", ""),
        oChildNode;

if (sLabel && sLabel.length > 0) {

oChildNode = new YAHOO.widget.TextNode(sLabel, oCurrentTextNode, false);

oCurrentTextNode.refresh();
        oCurrentTextNode.expand();

}

/*
     Edits the label of the TextNode that was the target of the
     "contextmenu" event that triggered the display of the
     ContextMenu instance.
*/

function editNodeLabel() {

var sLabel = window.prompt("Enter a new label for this node: ", oCurrentTextNode.getLabelEl().innerHTML);

if (sLabel && sLabel.length > 0) {

oCurrentTextNode.getLabelEl().innerHTML = YAHOO.lang.escapeHTML(sLabel);

}

/*
    Deletes the TextNode that was the target of the "contextmenu"
    event that triggered the display of the ContextMenu instance.
*/

function deleteNode() {

oTreeView.removeNode(oCurrentTextNode);
    oTreeView.draw();

}

/*
    "contextmenu" event handler for the element(s) that
    triggered the display of the ContextMenu instance - used
    to set a reference to the TextNode instance that triggered
    the display of the ContextMenu instance.
*/

function onTriggerContextMenu(p_oEvent) {

var oTarget = this.contextEventTarget;

/*
         Get the TextNode instance that that triggered the
         display of the ContextMenu instance.
    */

oCurrentTextNode = oTreeView.getNodeByElement(oTarget);

if (!oCurrentTextNode) {
        // Cancel the display of the ContextMenu instance.

this.cancel();

}

/*
    Instantiate a ContextMenu:  The first argument passed to the constructor
    is the id for the Menu element to be created, the second is an
    object literal of configuration properties.
*/

var oContextMenu = new YAHOO.widget.ContextMenu(
    "mytreecontextmenu",
    {
        trigger: "mytreeview",
        lazyload: true,
        itemdata: [
            { text: "Add Child Node", onclick: { fn: addNode } },
            { text: "Edit Node Label", onclick: { fn: editNodeLabel } },
            { text: "Delete Node", onclick: { fn: deleteNode } }
        ]
    }
);

/*
     Subscribe to the "contextmenu" event for the element(s)
     specified as the "trigger" for the ContextMenu instance.
*/

oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);

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:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.