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.

View example in new window.

 Label 0
 Label 1
 Branch 2
 Branch 2-0
 Branch 2-1
 31.3.2001
 Branch 3
 

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:

1// Create a tree with an assortment of nodes 
2tree = new YAHOO.widget.TreeView("treeView", [ 
3    'Label 0', 
4    {type:'Text', label:'Label 1', editable:true}, 
5    {type:'Text', label:'Branch 2', editable:true, expanded:true, children:[ 
6        {type:'Text', label:'Branch 2-0', editable:true, children: [ 
7            'Label 2-0-0', 
8            'Label 2-0-1' 
9        ]}, 
10         
11        {type:'Text', label:'Branch 2-1', editable:true, children: [ 
12            'Label 2-1-0', 
13            'Label 2-1-1' 
14        ]}, 
15    ]}, 
16    {type:'Text',label:'YAHOO', href:'http://www.yahoo.com', target:'YAHOO\'s home page'}, 
17    {type:'DateNode',label:'31.3.2001',editable:true, calendarConfig: { 
18        DATE_FIELD_DELIMITER:".", 
19        MDY_DAY_POSITION:1, 
20        MDY_MONTH_POSITION:2, 
21        MDY_YEAR_POSITION:3 
22    }}, 
23    {type:'Text',label:'Branch 3', editable:true, expanded:false, children:[ 
24        'Label 3-0', 
25        'Label 3-1' 
26    ]} 
27]); 
28 
29// render it 
30tree.render(); 
31 
32// Make the editor pop-up on a double click 
33tree.subscribe('dblClickEvent',tree.onEventEditNode); 
34 
35// Place the focus on the second node 
36tree.root.children[1].focus(); 
37 
38// report events 
39tree.subscribe('enterKeyPressed',function(node) { 
40    YAHOO.util.Dom.get('msg').innerHTML = 'Enter key pressed on node: ' + node.label; 
41}); 
42tree.subscribe('clickEvent',function(oArgs) { 
43    YAHOO.util.Dom.get('msg').innerHTML = 'Click on node: ' + oArgs.node.label; 
44}); 
45tree.subscribe('dblClickEvent',function(oArgs) { 
46    YAHOO.util.Dom.get('msg').innerHTML = 'Double click on node: ' + oArgs.node.label; 
47}); 
view plain | print | ?

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.

YUI Logger Output:

Logger Console

INFO 1648ms (+0) 7:45:42 AM:
TextNode  (12): Branch 3
Generating html
INFO 1648ms (+0) 7:45:42 AM:
DateNode  (11): 31.3.2001
Generating html
INFO 1648ms (+0) 7:45:42 AM:
TextNode  (10): YAHOO
Generating html
INFO 1648ms (+0) 7:45:42 AM:
TextNode  (7): Branch 2-1
Generating html
INFO 1648ms (+0) 7:45:42 AM:
TextNode  (4): Branch 2-0
Generating html
INFO 1648ms (+0) 7:45:42 AM:
TextNode  (3): Branch 2
completeRender: 3, # of children: 2
INFO 1648ms (+0) 7:45:42 AM:
TextNode  (3): Branch 2
rendering children for 3
INFO 1648ms (+0) 7:45:42 AM:
TextNode  (3): Branch 2
Generating html
INFO 1648ms (+0) 7:45:42 AM:
TextNode  (2): Label 1
Generating html
INFO 1648ms (+0) 7:45:42 AM:
TextNode  (1): Label 0
Generating html
INFO 1648ms (+0) 7:45:42 AM:
RootNode
completeRender: 0, # of children: 6
INFO 1648ms (+2) 7:45:42 AM:
RootNode
rendering children for 0
INFO 1646ms (+0) 7:45:42 AM:
TreeView  treeView
Building tree from object
INFO 1646ms (+37) 7:45:42 AM:
TreeView  treeView
tree init: treeView
INFO 1609ms (+1609) 7:45:42 AM:
LogReader  instance0
LogReader initialized
INFO 0ms (+0) 7:45:41 AM:
global
Logger initialized

More TreeView Control Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings