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.

Other YUI Examples That Make Use of the TreeView Control

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