YUI Library Home

YUI Library Examples: TreeView Control: Dynamically Loading Node Data

TreeView Control: Dynamically Loading Node Data

In many cases, you'll want to avoid rendering your TreeView Control with a full dataset. Rather, you'll want to load all visible nodes immediately and then retrieve data only when needed for nodes that aren't visible when the control is first loaded. This example shows you how to do that.

In the TreeView instance below, we've loaded all "top-level" nodes into the page as soon as the page loads; these nodes contain the names of many Indian states. When a node is expanded, we use Connection Manager to access a Yahoo! Search web service that will return a list of "related suggestions." So when the page loads, we know nothing about our top-level nodes' children. And while the resulting TreeView instance could grow quite large through user interaction, we need only load a very light set of nodes to begin with.

This example also shows the two label styles for childless nodes. The first (default) style maintains the expand/collapse icon style even when the node has no children; the second style shows childless nodes as leaf nodes with no expand/collapse icon. Note: this is for dynamically loaded nodes after the dynamic load process has produced zero children. You can also force the leaf node presentation for any node by setting the isLeaf property to true (this also disables dynamic loading).

Childless Node Style:

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.

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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings