TreeView Example: Dynamic Load, Using node.onLabelClick and node.data

This simple example of a TreeView using dyanmic loading responds to jmpow99's question on the YDN-JavaScript group (and followup question here).

The followup question asks about how to determine what node is involved when a label is clicked on and how to track information about that node. Let's start with the issue of associating data with a Node object. The constructor for a TextNode takes as its first argument the Node label (as a string) or, alternatively, a custom object containing data associated with the Node; when a custom object is passed, the Node instance will use the object's label member as the label and, if present, the href member as the "destination" for a label click. But we can put in additional members, too — anything that we want to associate with the Node. So, in the above implementation, we'll specify our label and we'll note that in this object literal we could put any other custom attributes we'd care to:

var newNode = new YAHOO.widget.TextNode({
	  label:thisModel,
	  customData:"Additional data can reside in this object..."
	}, node, false);

Now, how to get to that data when a label is clicked? That custom object we created will be stored as the Node instance's data member. And YAHOO.widget.TextNode has a method called onLabelClick which fires each time a label is clicked and which receives the label's parent Node as an argument. We can write our own function to handle this and assign it to our Node instances' onLabelClick member:

var onLabelClick = function(oNode) {
	document.getElementById("report").innerHTML = "The node you clicked on had the label '" + oNode.data.label + "'.";
}

//later in the code, within our dynamic load function,
//we assign onLabelClick to our child node instances:
for (var i=0; i<children.length; i++) {
	thisModel = children[i];
	var newNode = new YAHOO.widget.TextNode({label:thisModel}, node, false);
	newNode.onLabelClick = onLabelClick;
}

Note that in our onLabelClick function we're extracting just the label member from our Node's data object, but any additional data that we stored there would be accessible to us at that point — including, for example, the unique identifier that might tie that node to its corresponding database record.

In total, our code now looks like this:

<script>
YAHOO.example.treeExample = function() {
	function buildTree() {
		//create a new tree:
		tree = new YAHOO.widget.TreeView("treeContainer");
		
		//get root node for tree:
		var root = tree.getRoot();
		
		//create dummy data for root
		var mycars = new Array();
		mycars[0] = "Saab";
		mycars[1] = "Volvo";
		mycars[2] = "BMW";
		mycars[3] = "Ferrari";
		mycars[4] = "Yugo";
		mycars[5] = "Bentley";
				
		for (i=0;i<mycars.length;i++)
		{
			var tmpNode = new YAHOO.widget.TextNode({label: mycars[i], customData: mycars[i] + "-metadata"}, root, false);			
			//set dynamic loading just for these top-level nodes
			tmpNode.setDynamicLoad(loadNodeData);
		}
		tree.draw();
	}

	//handler to process label clicks, to be
	//assigned in our dynamic load function
	var onLabelClick = function(oNode) {
		document.getElementById("report").innerHTML = "The node you clicked on had the label '" + oNode.data.label  + "'";
	}

	function loadNodeData(node, fnLoadComplete) {
		//dummy data for bmw parent
		var oCarData = {
			BMW: ["3 series","m series","5 series","7 series","6 series"],
			Saab: ["9-2", "9-3", "9-5", "Aero", "Viggen"],
			Volvo: ["V50", "V70", "V90", "XC", "XC-90"],
			Ferrari: ["Enzo", "Spyder"],
			Yugo: ["Really?  Yugo?"],
			Bently: ["Continental", "Arnage"]
			};
		
		//get the models for the car make designated
		//by the clicked label
		var children = oCarData[node.data.label];
		
		//loop through children array	
		for (var i=0; i<children.length; i++) {
			thisModel = children[i];
			var newNode = new YAHOO.widget.TextNode({label:thisModel}, node, false);
			newNode.onLabelClick = onLabelClick;
		}
		fnLoadComplete();
	}
	return {
		init: function() {
			buildTree();
		}
	}
}()
YAHOO.util.Event.addListener(window, "load", YAHOO.example.treeExample.init, YAHOO.example.treeExample, true);
</script>

<div id="treeContainer">Tree container</div>

— Eric Miraglia, Yahoo Presentation Platform Engineering