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:

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

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.

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.