TreeView Example

In this example, the TreeView control's dyamic loading functionality is explored. Dynamic loading of child nodes allows you to optmize performance by only loading data for and creating the nodes that will be visible when the tree is rendered. Nodes that are not expanded when the Tree's draw method is invoked are left childless in the initial state. When such a node is expanded (either by user action or by script), a dynamic loader function is called. That function has three important roles:

1. Check for child nodes: The dynamic loader function will check for child nodes by evaluating in-page data (for example, data held in a JavaScript array or object) or by retrieving data about the expanding node from the server via XMLHttpRequest. In the example on this page, an in-page random list generator is used to generate the Tree structure.
2. Add child nodes, if present: If it determines that child node's are present for the expanding node, the dynamic loader must add those child nodes to the Tree instance. Because these nodes are only added when needed, the overall complexity of the Tree's complexity (in JavaScript and in the DOM) is reduced and its initial render time is much faster.
3. Invoke the expanding node's callback method: Once the dynamic loader method determines whether the expanding node has children (and adds any children that may be present), it must notify the expanding node's object that dynamic loading is complete. It does this via a callback method which is passed into the dynamic loader as an argument.

Creating a Dynamic Loader Method

In this example, our dynamic loader method will accomplish its first task (checking for child nodes) by using a random number generator; we'll specify that roughly 70% of our nodes have children. When there are children present, there will be children will between one and six children (also randomly enumerated) whose labels are drawn from an array of Indian states.

Our method, which we'll call loadNodeData, will be passed two arguments by the Tree instance when called: The first is a reference to the expanding node's node object; the second is the callback method that we need to call when we're done adding children to the expanding node. The method as it appears on this page (only the array of state names has been truncated) follows, with comments glossing each step:

loadNodeData: function(node, fnLoadComplete) {

	//Array of India's States
	var aStates = ["Andhra Pradesh",
		"Arunachal Pradesh","Assam",
		...
		];

	//Random number determines whether a node has children
	var index = Math.round(Math.random()*100);
	
	//if our random number is in range, we'll pretend that this node
	//has children; here, we'll indicate that 70% of nodes have
	//children.
	if (index>30) {
		//We'll use a random number to determine the number of
		//children for each node:
		var childCount = (Math.round(Math.random()*5) + 1);
		
		//This is important: The primary job of the data loader function
		//is to determine whether the node has children and then to 
		//actually create the child nodes if they are needed; here, we'll
		//loop through to create each child node:
		for (var i=0; i<childCount; i++) {
			thisState = aStates[Math.round(Math.random()*27)];
			var newNode = new YAHOO.widget.TextNode(thisState, node, false);
		}
	}
			
	//When we're done creating child nodes, we execute the node's
	//loadComplete callback method which comes in as our loader's
	//second argument (we could also access it at node.loadComplete,
	//if necessary):
	fnLoadComplete();
}

Setting Up the Tree Instance and Configuring It for Dynamic Loading

Creating the initial state of a Tree object that will be configured for dynamic loading is no different than for non-dynamic Tree instances — use the Tree constructor to create your new instance:

//create a new tree:
tree = new YAHOO.widget.TreeView("treeContainer");

In the example on this page, the entire tree is configured for dynamic loading. That will result in all nodes having their children populated by the dynamic loader method when they are expanded for the first time. (You can also choose to specify individual nodes and their descendants as being dynamically loaded.) To the Tree instance for dynamic loading, merely pass the instance's setDynamicLoad method a reference to your dynamic loader method:

//turn dynamic loading on for entire tree:
tree.setDynamicLoad(this.loadNodeData);

Having created a Tree instance and configured it for dynamic loading, we can now add the tree's top-level nodes and then render the Tree via its draw method:

//add child nodes for tree:
var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);

//render tree with these five nodes; all descendants of these nodes
//will be generated as needed by the dynamic loader.
tree.draw();

With that, our tree renders on the page, showing its five top-level nodes. As the user interacts with the tree, child nodes will be added and displayed based on the output of the loadNodeData method.

Childless Node Style

There are two built-in visual treatments for childless nodes. Before a dynamically loaded node is expanded, its icon indicates that it can be expanded — this reflects the possibility that the dynamic loader will find and populate children for that node if it is expanded. However, once the Tree determines that a node has no children, it can reflect the childless state either through the "expanded" icon () or by omitting the icon entirely. In this example, we've added a control that enables you to experiment with each setting to explore its visual impact

The default visual treatment for a childless node is the "expanded" icon. To change this setting, pass a second argument to your setDynamicLoad method — pass a value of 1 to use the iconless visual treatment.