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:

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:

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:

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:

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.

Dynamically Loaded TreeView:

Childless Node Style: