YUI Library Home

YUI Library Examples: TreeView Control: Inline Editing of TreeView Node Labels

TreeView Control: Inline Editing of TreeView Node Labels

This example demonstrates label editing and keyboard navigation in the YUI TreeView Control. As you interact with the TreeView instance below, you'll find that some nodes allow you to edit them — double-click on node labels to open the inline editor. This example also demonstrates how you can use arrow keys, +/- keys (expand/collapse), and the enter key to navigate and control the TreeView instance.


Label editing and keyboard navigation.

This example for the TreeView Control demonstrates user interaction models for inline editing and keyboard navigation. The second node in the tree, the one labeled Label 1, has the focus initially. The arrow, home and end keys can be used to move the focus on other nodes, the plus and minus (+/-) keys to expand/collapse nodes and shift-plus and shift-minus to expand-all/collapse-all.

The Enter key will act as a click on the node with the focus. It will expand or collapse it or will navigate if the node has an href property.

The example has event listeners for click, double-click and enter key pressed which will signal the event at the bottom of the box. The click and double click events will not fire when the toggle icon is clicked since toggling has specific events associated with it.

Nodes defined by simple strings, instead of full object definitions, are plain non-editable TextNodes. They can be clicked, double-clicked and Enter pressed while the focus is on any of them.

A DateNode is included which is also editable via the YUI Calendar Control. The date is set in dd.mm.yyyy format and it has been declared so by the calendarConfig property which is the same used by Calendar (see: Creating International Calendars).

Here is the JavaScript we use to define the TreeView instance in this example:

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