netui:node Tag
<netui:node> Tag
Renders a expandable/collapsable node in a tree.
Syntax
<netui:node
[action="string_action"]
[expanded="boolean_expanded"]
[href="string_href"]
[icon="string_icon"]
[label="string_label"]
[node="string_treeNode"]
[target="string_windowTarget"] />
Description
Renders a expandable/collapsable node in a tree.
When displayed in the browser, the <netui:node> has two parts: (1) a clickable icon
that controls the expanding and collapsing of the node and (2) hyperlink text that appear immediately to the
right of the icon.
The href
and label
attribute control the properties of the
hyperlink text. The href
attribute specifies the link's destination, the
label
specifies the display text of the hyperlink.
The icon
attribute controls the display icon for the <netui:node>.
Note that the
display of icons can be handled automatically through the imageRoot
attribute
of the
<netui:tree>
tag. If you point the imageRoot
attribute at a folder
of appropriately named images, then any <netui:node> tags underneath the <netui:tree>
will display the appropriate icon depending on the current state of the <netui:node>, i.e.,
whether it is expanded, collapsed, etc. See the
<netui:tree>
tag for details.
The action
attribute points to a method in the Controller file that handles
clicking on either the icon or the hyperlink.
Attributes
action | The action method invoked by clicking the <netui:node>'s icon or hyperlink text. |
|
Required | Supports runtime expression evaluation | Data bindable |
No | No | No |
|
|
expanded | Boolean. If set to true, then the node is displayed in an expanded state when the
page first loads into the browser. |
|
Required | Supports runtime expression evaluation | Data bindable |
No | No | No |
|
|
href | The destination when the <netui:node>'s hyperlink text is clicked. |
|
Required | Supports runtime expression evaluation | Data bindable |
No | Yes | No |
|
|
icon | The path to the node's icon. If the root <netui:tree> tag's imageRoot
points to a folder, then the path is relative to this folder. |
|
Required | Supports runtime expression evaluation | Data bindable |
No | No | No |
|
|
label | The text displayed by the <netui:node>'s hyperlink text. |
|
Required | Supports runtime expression evaluation | Data bindable |
No | Yes | Read Only |
|
|
node |
Sets the
TreeNode
object.
|
|
Required | Supports runtime expression evaluation | Data bindable |
No | No | No |
|
|
target | The window target of the <netui:node>'s hyperlink text.
Typically the navigation tree and the content are displayed in two
different frames. Use this attribute to target the link at the content frame. |
|
Required | Supports runtime expression evaluation | Data bindable |
No | No | No |
|
|
Sample
The following example shows a set of <netui:nodes> arranged to form a tree of
navigable links.
<netui:tree tree="{session.tree}" imageRoot="treeImages" style="tree-control" action="treeState">
<netui:node label="Root Folder" expanded="true" action="treeState" target="contentFrame">
<netui:node label="I" expanded="false" action="treeState" target="contentFrame">
<netui:node label="A" expanded="false" action="treeState" target="contentFrame">
<netui:node label="1" action="treeState" target="contentFrame"/>
<netui:node label="2" action="treeState" target="contentFrame"/>
</netui:node>
</netui:node>
</netui:node>
</netui:tree>
Related Topics
<netui:tree> Tag Sample
<netui:tree> Tag: Dynamic Tree Sample
<netui:tree> Tag
TreeNode