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

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);

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.