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.