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
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.
We create the first TreeView and render it.
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
to the event we want to respond to.
We also want the highlighting to propagate both up and down.
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.
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.