YUI Library Home

YUI Library Examples: TreeView Control: Treeview Node Selection and Checkbox Example

TreeView Control: Treeview Node Selection and Checkbox Example

In this simple example you can see how to do node selection in the TreeView Control.

View example in new window.

Tree with highlight propagation and 'checkbox' skin

 label-0
 label-0-0
 label-0-0-0
 label-0-0-1
 label-0-1
 label-0-2
 label-0-2-0
 label-0-2-1
 label-1
 label-1-0
 label-1-1
 label-1-2
 label-1-2-0
 label-1-2-1
 label-2
 label-2-0
 label-2-1
 label-2-2
 label-2-3
 label-2-3-0
 label-2-3-1
 label-3
 label-4
 label-4-0

Tree with single node highlighting and simple skin

 label-0
 label-0-0
 label-0-0-0
 label-0-0-1
 label-1
 label-1-0
 label-1-0-0
 label-1-1
 label-1-1-0
 label-1-2
 label-1-2-0
 label-1-2-1
 label-1-3
 label-1-3-0
 label-2
 label-2-0
 label-2-1
 label-2-2
 label-3
 label-3-0
 label-3-0-0
 label-3-1
 label-3-1-0
 label-3-1-1
 label-3-2
 label-3-2-0
 label-3-3
 label-3-3-0
 label-4
 label-5

Tri-State Checkbox Example

Nodes of the TreeView Control can be highlighted in response to a user action or via code. That highlighting can affect a single node at a time or multiple nodes and it can propagate up or down the tree. In this example we show two trees built at random with different node highlighting settings.

We begin by defining the containers that will hold the trees. The built-in stylesheet allows for two styles of highlighting, the first one, selected via the className ygtv-checkbox, will add a tri-state checkbox in between the toggle icon and the label, the second, selected via the className ygtv-highlight, will change the background of highlighted nodes. If neither of those classes are selected, the highlighting will still work, but the user won't notice since there will be no visual clues. We also add a button to show how highlighted (selected) nodes can be found.

1<h3>Tree with highlight propagation and 'checkbox' skin</h3> 
2<div id="treeDiv1" class="ygtv-checkbox"></div> 
3<button id="logHilit">Log selected</button> 
4<hr/> 
5<h3>Tree with single node highlighting and simple skin</h3> 
6<div id="treeDiv2" class="ygtv-highlight"></div> 
view plain | print | ?

We create the first TreeView and render it. Function makeBranch recursively builds a random branch of TextNodes. Highlighting is enabled by default, nodes can be highlighted via code, but to respond to user events we need to attach the supplied listener onEventToggleHighlight to the event we want to respond to. We also want the highlighting to propagate both up and down.

1tree1 = new YAHOO.widget.TreeView("treeDiv1"); 
2makeBranch(tree1.getRoot()); 
3tree1.subscribe('clickEvent',tree1.onEventToggleHighlight);      
4tree1.setNodesProperty('propagateHighlightUp',true); 
5tree1.setNodesProperty('propagateHighlightDown',true); 
6tree1.render(); 
view plain | print | ?

The checkbox is tri-state because when the highlighting propagates up, the parent node into which it propagates might not have all its child nodes highlighted, so the checkbox has a partially checked state.

We can easily find out which nodes have been highlighted by searching the tree by property highlighState which will be 0 for not-highlighted, 1 for highlighted and 2 for a node that has some children highlighted.

1YAHOO.util.Event.on('logHilit','click',function() { 
2    var hiLit = tree1.getNodesByProperty('highlightState',1); 
3    if (YAHOO.lang.isNull(hiLit)) {  
4        YAHOO.log("None selected"); 
5    } else { 
6        var labels = []; 
7        for (var i = 0; i < hiLit.length; i++) { 
8            labels.push(hiLit[i].label); 
9        } 
10        YAHOO.log("Highlighted nodes:\n" + labels.join("\n"), "info", "example"); 
11    } 
12}); 
view plain | print | ?

For tree2 we have set property singleNodeHighlight to true so that by selecting one node, the currently highlighted node, if any, will be un-highlighted. The change in appearance is due to the highlighting 'skin' selected.

1tree2 = new YAHOO.widget.TreeView("treeDiv2"); 
2makeBranch(tree2.getRoot()); 
3tree2.singleNodeHighlight = true; 
4tree2.subscribe('clickEvent',tree2.onEventToggleHighlight);      
5tree2.render(); 
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 2110ms (+0) 7:41:48 AM:
TextNode  (80): label-5
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (73): label-4
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (72): label-3-3-0
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (71): label-3-3
completeRender: 71, # of children: 1
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (71): label-3-3
rendering children for 71
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (71): label-3-3
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (70): label-3-2-0
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (69): label-3-2
completeRender: 69, # of children: 1
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (69): label-3-2
rendering children for 69
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (69): label-3-2
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (68): label-3-1-1
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (67): label-3-1-0
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (66): label-3-1
completeRender: 66, # of children: 2
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (66): label-3-1
rendering children for 66
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (66): label-3-1
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (65): label-3-0-0
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (64): label-3-0
completeRender: 64, # of children: 1
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (64): label-3-0
rendering children for 64
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (64): label-3-0
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (63): label-3
completeRender: 63, # of children: 4
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (63): label-3
rendering children for 63
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (63): label-3
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (61): label-2-2
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (59): label-2-1
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (56): label-2-0
Generating html
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (55): label-2
completeRender: 55, # of children: 3
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (55): label-2
rendering children for 55
INFO 2110ms (+0) 7:41:48 AM:
TextNode  (55): label-2
Generating html
INFO 2110ms (+1) 7:41:48 AM:
TextNode  (54): label-1-3-0
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (53): label-1-3
completeRender: 53, # of children: 1
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (53): label-1-3
rendering children for 53
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (53): label-1-3
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (52): label-1-2-1
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (51): label-1-2-0
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (50): label-1-2
completeRender: 50, # of children: 2
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (50): label-1-2
rendering children for 50
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (50): label-1-2
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (49): label-1-1-0
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (48): label-1-1
completeRender: 48, # of children: 1
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (48): label-1-1
rendering children for 48
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (48): label-1-1
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (47): label-1-0-0
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (46): label-1-0
completeRender: 46, # of children: 1
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (46): label-1-0
rendering children for 46
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (46): label-1-0
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (45): label-1
completeRender: 45, # of children: 4
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (45): label-1
rendering children for 45
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (45): label-1
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (44): label-0-0-1
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (43): label-0-0-0
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (42): label-0-0
completeRender: 42, # of children: 2
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (42): label-0-0
rendering children for 42
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (42): label-0-0
Generating html
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (41): label-0
completeRender: 41, # of children: 1
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (41): label-0
rendering children for 41
INFO 2109ms (+0) 7:41:48 AM:
TextNode  (41): label-0
Generating html
INFO 2109ms (+0) 7:41:48 AM:
RootNode
completeRender: 40, # of children: 6
INFO 2109ms (+0) 7:41:48 AM:
RootNode
rendering children for 40
INFO 2109ms (+1) 7:41:48 AM:
TreeView  treeDiv2
tree init: treeDiv2
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (37): label-4-0
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (36): label-4
completeRender: 36, # of children: 1
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (36): label-4
rendering children for 36
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (36): label-4
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (31): label-3
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (30): label-2-3-1
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (29): label-2-3-0
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (28): label-2-3
completeRender: 28, # of children: 2
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (28): label-2-3
rendering children for 28
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (28): label-2-3
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (26): label-2-2
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (23): label-2-1
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (21): label-2-0
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (20): label-2
completeRender: 20, # of children: 4
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (20): label-2
rendering children for 20
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (20): label-2
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (19): label-1-2-1
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (18): label-1-2-0
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (17): label-1-2
completeRender: 17, # of children: 2
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (17): label-1-2
rendering children for 17
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (17): label-1-2
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (14): label-1-1
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (11): label-1-0
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (10): label-1
completeRender: 10, # of children: 3
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (10): label-1
rendering children for 10
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (10): label-1
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (9): label-0-2-1
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (8): label-0-2-0
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (7): label-0-2
completeRender: 7, # of children: 2
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (7): label-0-2
rendering children for 7
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (7): label-0-2
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (5): label-0-1
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (4): label-0-0-1
Generating html
INFO 2108ms (+0) 7:41:48 AM:
TextNode  (3): label-0-0-0
Generating html
INFO 2108ms (+1) 7:41:48 AM:
TextNode  (2): label-0-0
completeRender: 2, # of children: 2
INFO 2107ms (+0) 7:41:48 AM:
TextNode  (2): label-0-0
rendering children for 2
INFO 2107ms (+0) 7:41:48 AM:
TextNode  (2): label-0-0
Generating html
INFO 2107ms (+0) 7:41:48 AM:
TextNode  (1): label-0
completeRender: 1, # of children: 3
INFO 2107ms (+0) 7:41:48 AM:
TextNode  (1): label-0
rendering children for 1
INFO 2107ms (+0) 7:41:48 AM:
TextNode  (1): label-0
Generating html
INFO 2107ms (+30) 7:41:48 AM:
RootNode
completeRender: 0, # of children: 5
INFO 2077ms (+2077) 7:41:48 AM:
LogReader  instance0
LogReader initialized
INFO 0ms (+0) 7:41:46 AM:
global
Logger initialized

More TreeView Control Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

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