YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: TreeView Control: Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal

# TreeView Control: Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal

In this simple example you can see how to build TreeView Control from existing HTML markup and from a previous tree definition or from a branch of it.

View example in new window.

### Tree from markup

- List 0
  - List 0-0
    - item 0-0-0
    - elsewhere
- List 1
  - List 1-0
    - 02/01/2009
    - item 1-1-0

### Copy of the tree above taken from its own definition

### Copy of the second branch of the tree at the top

### Tree built from a static definition

## Building trees from HTML markup or from previous definitions.

In this brief example for the TreeView Control, we begin with a `<div>` containing a set of nested unordered lists `<ul>` providing the basic tree structure.

Each <li> element in the markup will produce a Node. List-items with plain text will produce regular TextNodes, those with the className "expanded" will override the default of showing nodes collapsed. The list-item with a link will also produce a TextNode with its `href` and `target` properties set accordingly. The list-item containing a Date, being a string, would normally create a TextNode, but it has been overridden by the use of the `yuiConfig` attribute to make it a DateNode and editable. The final node contains formatted text which will produce an HTMLNode; the whole has to be enclosed in a single HTML element to let the parser know how far it reaches.

<div id="markup"> <ul> <li class="expanded">List 0 <ul> <li class="expanded">List 0-0 <ul> <li>item 0-0-0</li> <li><a target="_new" href="www.elsewhere.com" title="go elsewhere">elsewhere</a></li> </ul> </li> </ul> </li> <li>List 1 <ul> <li>List 1-0 <ul> <li yuiConfig='{"type":"DateNode","editable":true}'>02/01/2009</li> <li><span>item <strong>1-1-0</strong></span></li> </ul> </li> </ul> </li> </ul> </div>

We create a new TreeView and render it. The TreeView will read the existing HTML and build the nodes from it. We also subscribe to the `dblClickEvent` to enable editing to prove the DateNode is really such and is editable.

tree1 = new YAHOO.widget.TreeView("markup"); tree1.render(); tree1.subscribe('dblClickEvent',tree1.onEventEditNode);

Once we have a tree, we can read its definition, preserve it somehow and then build an identical tree from it. In the second part we are building a couple of trees, one identical to the full tree and another one from just a branch of it

tree2 = new YAHOO.widget.TreeView("treeDiv2", tree1.getTreeDefinition()); tree2.render(); var branch = tree1.getRoot().children[1]; tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition()); tree3.render();

For `tree2` we have used the full tree definition from the first tree. For `tree3` we have first located a branch, for this sample, the second branch from the root and used its definition for the tree

Finally, in the last tree, we used an object literal to define the full tree.

(new YAHOO.widget.TreeView("treeDiv4",[ 'Label 0', {type:'Text', label:'text label 1', title:'this is the tooltip for text label 1'}, {type:'Text', label:'branch 1', title:'there should be children here', expanded:true, children:[ 'Label 1-0' ]}, {type:'Text',label:'YAHOO',title:'this should be an href', href:'http://www.yahoo.com', target:'somewhere new'}, {type:'HTML',html:'<a href="developer.yahoo.com/yui">YUI</a>'}, {type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[ 'Label 3-0', 'Label 3-1' ]} ])).render();

Here we provide as a second argument to the constructor an array where each item can be either an object literal or a simple string, such as `'Label 0'`, which will be converted to a simple TextNode.

The items in the array can also be objects containing more detailed definitions for each node. All require a `type` property using either a short-name such as `'Text'` or `'HTML'` (case-insensitive) or the object name of the node type like `'MenuNode'`, which will be resolved to YAHOO.widget.MenuNode.

Object definitions allow precise control over the tree since any public property of each node can be specified, for example, some nodes start expanded while others collapsed. We cannot have such expressiveness from plain HTML markup.

We have defined a couple of external links. In the first one, labeled `YAHOO`, the link has the generic style of the rest of the nodes in the tree. In the second one, labeled `YUI`, we have used an HTMLNode instead of a TextNode so TreeView copies that string into the node without adding further classNames so it gets a different look.

The last node, being a MenuNode, forces other branches to collapse when expanded. The other node with children, being a plain node doesn't mind if other nodes remain expanded.

Nodes may contain a `children` property containing further node definitions.

## 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.

### YUI Logger Output:

### TreeView Control Examples:

- Default TreeView
- Dynamically Loading Node Data
- Folder-Style TreeView Design
- Menu-Style TreeView Design
- Using TreeView with Custom Icons
- TreeView with Tooltips
- Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal
- Inline Editing of TreeView Node Labels
- Treeview Node Selection and Checkbox Example
- Adding A Context Menu To A TreeView (included with examples for Menu Family)

### More TreeView Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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