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