TreeView Control: Examples

The YUI TreeView Control provides a rich, compact visual presentation of hierarchical node data. Support is provided for several common node types, for the association of custom metadata with each node, and for the dynamic loading of node data to navigate large datasets with a small initial payload.

• Default TreeView: This example creates a simple tree with default settings and randomly populates its nodes.
• Dynamically Loading Node Data: You can improve the rendering time of your TreeView control by deferring the loading of child nodes until they are requested. When a node expands, you can use the YUI Connection Manager to retrieve information via XMLHttpRequest about that node's children.
• Folder-Style TreeView Design: By using an alternative CSS file, you can modify the appearance of the TreeView Control; in this example, the TreeView implements a folder-style iconography.
• Menu-Style TreeView Design: By using an alternative CSS file, you can modify the appearance of the TreeView Control; in this example, the TreeView implements a menu-style iconography. It also makes use of the Menu Node, in which only one child at each depth level can remain open.
• Using TreeView with Custom Icons: Applying a specific label style to each node allows you to customize the icons that each node displays.
• Custom TreeView with Check Boxes: In this example, the TreeView icons are represented by checkboxes allowing for a task-list-style display.
• TreeView with Tooltips: In this example, the a single Tooltip is configured to work with all of the nodes in the tree.
• Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal : TreeView supports a number of different inputs for creating the node structure, including consuming existing markup on the page. This example takes you through three common mechanisms for defining a TreeView.
• Inline Editing of TreeView Node Labels: TreeView has intrinsic support for user-editing of node labels. This example explores the interaction model for inline editing with TreeView. It also illustrates the use of a special date-editor class that leverages the YUI Calendar Control.

Other YUI Examples That Make Use of the TreeView Control

• Adding A Context Menu To A TreeView (included with examples for the Menu Family)