Using TreeView with Connection Manager to Dynamically Load Data

Dynamic loading of a TreeView Control's 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 TreeView'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, We'll use the YUI Connection Manager component to check for data from a web service.
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 TreeView instance. Because these nodes are only added when needed, the overall complexity of the initial TreeView (in JavaScript and in the DOM) is reduced and its 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 function which is passed into the dynamic loader as an argument.

Here's how the code on this page manages those three steps. First, we markup the page with a target element into which the TreeView's DOM structure will be injected:

<div id="treeDiv1"></div>

Next, we build a function that creates our initial TreeView:

function init() { //create a new tree: tree = new YAHOO.widget.TreeView("treeDiv1"); //turn dynamic loading on for entire tree: tree.setDynamicLoad(loadNodeData, currentIconMode); //get root node for tree: var root = tree.getRoot(); //add child nodes for tree; our top level nodes are bands var bands = ["Radiohead","Phoenix","Bon Iver","Born Ruffians","LCD Soundsystem","Blind Pilot","The Black Keys"]; for (var i=0, j=bands.length; i<j; i++) { var tempNode = new YAHOO.widget.TextNode(bands[i], root, false); } //render tree with these toplevel nodes; all descendants of these nodes //will be generated as needed by the dynamic loader. tree.draw(); }

We have turned on dynamic loading (in line 6 above) at the TreeView level rather than on a specific node, so every expanding node now will invoke our dynamic load handler (loadNodeData). That means that before the node expands, the node object will be passed to loadNodeData along with a callback function and the expansion won't take place until we fire that callback. That gives us a chance to load child nodes before the expand action occurs.

We'll use Connection Manager to get external data. Here's our loadNodeData function, with comments describing what happens at each step.

function loadNodeData(node, fnLoadComplete) { //We'll load node data based on what we get back when we //use Connection Manager topass the text label of the //expanding node to the Yahoo! //Music track search API. Here, we're at the //first part of the request -- we'll make the request to the //server. In our success handler, we'll build our new children //and then return fnLoadComplete back to the tree. //Get the node's label and urlencode it; this is the word/s //on which we'll search for related words: var nodeLabel = encodeURI(node.label); //prepare URL for XHR request: var sUrl = "assets/ysuggest_proxy.php?query=" + nodeLabel; //prepare our callback object var callback = { //if our XHR call is successful, we want to make use //of the returned data and create child nodes. success: function(oResponse) { YAHOO.log("XHR transaction was successful.", "info", "example"); //YAHOO.log(oResponse.responseText); var oResults = eval("(" + oResponse.responseText + ")"); var query = oResults.query, results = query && query.results, tracks = results && results.Track, title, url, titles, tempNode; if (YAHOO.lang.isArray(tracks)) { titles = {}; for (var i = 0, len = tracks.length; i < len; i++) { title = tracks[i].title; url = tracks[i].url; // prevent duplicate track titles by creating a hash of titles if (!titles[title]) { titles[title] = true; tempNode = new YAHOO.widget.TextNode(title, node, false); // we can tell the tree node that this is a leaf node so // that it doesn't try to dynamically load children. tempNode.isLeaf = true; // Define a href so that a click on the node will navigate // to the page that has the track that you may be able // to listen to. tempNode.href = url; } } } //When we're done creating child nodes, we execute the node's //loadComplete callback method which comes in via the argument //in the response object (we could also access it at node.loadComplete, //if necessary): oResponse.argument.fnLoadComplete(); }, //if our XHR call is not successful, we want to //fire the TreeView callback and let the Tree //proceed with its business. failure: function(oResponse) { YAHOO.log("Failed to process XHR transaction.", "info", "example"); oResponse.argument.fnLoadComplete(); }, //our handlers for the XHR response will need the same //argument information we got to loadNodeData, so //we'll pass those along: argument: { "node": node, "fnLoadComplete": fnLoadComplete }, //timeout -- if more than 7 seconds go by, we'll abort //the transaction and assume there are no children: timeout: 7000 }; //With our callback object ready, it's now time to //make our XHR call using Connection Manager's //asyncRequest method: YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); }

In the codeblock above, we set up our XHR call using Connection Manager and provide the functions that should handle the data that comes back. Here are a few important items to note:

1. We pass the node and our TreeView callback into our success and failure handlers in the argument member of the Connection Manager callback ojbect. That allows us to access those important pieces once we get data back from the XHR transaction.
2. This process is asynchronous. loadNodeData completes and returns after it fires off the request via YAHOO.util.Connect.asyncRequest. At a later time, Connection Manager fires either the success or failure function we passed in
3. We fire our fnLoadComplete function from both success and failure handlers. Whether the request succeeds or not, we want TreeView to stop waiting for it at some point. So, if Connection Manager fires our failure handler, we'll treat that the same way we treat a node that has no children — we fire fnLoadComplete and move on.

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.