<netui:tree> Tag

Renders a navigable tree of TreeElement objects.

Syntax

<netui:tree
    dataSource="dataSource"
    [disabledStyle="disabledStyle"]
    [disabledStyleClass="disabledStyleClass"]
    [escapeForHtml="escapeForHtml"]
    [expansionAction="expansionAction"]
    [iconRoot="iconRoot"]
    [imageRoot="imageRoot"]
    [itemIcon="itemIcon"]
    [lastLineJoinImage="lastLineJoinImage"]
    [lastNodeCollapsedImage="lastNodeCollapsedImage"]
    [lastNodeExpandedImage="lastNodeExpandedImage"]
    [lineJoinImage="lineJoinImage"]
    [nodeCollapsedImage="nodeCollapsedImage"]
    [nodeExpandedImage="nodeExpandedImage"]
    [renderTagIdLookup="renderTagIdLookup"]
    [rootNodeCollapsedImage="rootNodeCollapsedImage"]
    [rootNodeExpandedImage="rootNodeExpandedImage"]
    [runAtClient="runAtClient"]
    [selectedStyle="selectedStyle"]
    [selectedStyleClass="selectedStyleClass"]
    selectionAction="selectionAction"
    [selectionTarget="selectionTarget"]
    tagId="tagId"
    [treeStyle="treeStyle"]
    [treeStyleClass="treeStyleClass"]
    [unselectedStyle="unselectedStyle"]
    [unselectedStyleClass="unselectedStyleClass"]
    [verticalLineImage="verticalLineImage"] />

Description

Renders a navigable tree of TreeElement objects.

The tree is bound to a variable through the dataSource attribute. If the bound variable exists, then the body content of this tag is not processed and the tree is rendered. If the bound variable doesn't exist, we will process the body and create the TreeElement tree structure and set the the bound variable with the newly created tree.

This tag can automatically handle display icons for the tree nodes through the imageRoot attribute. If you point the imageRoot attribute at a folder containing appropriately named image files, the correct images will be used for any given state of the tree's nodes. The default image names are:

Attributes
dataSource
Required: Yes  |   Supports runtime evaluation: No  |   Data bindable:

disabledStyle
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

disabledStyleClass
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

escapeForHtml
Required: No  |   Supports runtime evaluation: No  |   Data bindable:

expansionAction
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

iconRoot
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The directory containing the icon images for tree items.
imageRoot
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The directory containing the images for tree icons.
itemIcon
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

lastLineJoinImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The image name for a blank area of the tree. (Defaults to "linelastnode.gif")
lastNodeCollapsedImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The image name for a closed non-leaf node with no line below it. (Defaults to "handlerightlast.gif".)
lastNodeExpandedImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The image name for an open non-leaf node with no line below it. (Defaults to "handledownlast.gif".)
lineJoinImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The image name for an area with a line through it. (Defaults to "linemiddlenode.gif").
nodeCollapsedImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The image name for a closed non-leaf node with a line below it. (Defaults to "handlerightmiddle.gif".)
nodeExpandedImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The image name for an open non-leaf node with a line below it. (Defaults to "handledownmiddle.gif".)
renderTagIdLookup
Required: No  |   Supports runtime evaluation: No  |   Data bindable:

rootNodeCollapsedImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: Yes

The image representing the root when it is collapsed.
rootNodeExpandedImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: Yes

The image representing the root when it is expanded.
runAtClient
Required: No  |   Supports runtime evaluation: No  |   Data bindable:

selectedStyle
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

selectedStyleClass
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

selectionAction
Required: Yes  |   Supports runtime evaluation: Yes  |   Data bindable:

selectionTarget
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

tagId
Required: Yes  |   Supports runtime evaluation: Yes  |   Data bindable:

treeStyle
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

treeStyleClass
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

unselectedStyle
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

unselectedStyleClass
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable:

verticalLineImage
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The image name for an area with a line through it. (Defaults to "linevertical.gif").

 
Example

The following example shows a <netui:tree> tag with a set of children <netui:treeLabel> and <netui:treeItem> tags that form the tree's navigational structure. The dataSource attribute identifies the TreeElement in the appropriate binding context; in this case, the page flow context is used. The selectionAction attribute is required so there can be a postback to the tree. tagId is used to uniquely identify a tree on the page.

  <netui:tree
    dataSource="pageflow.myTree"
    selectionAction="postback"
    tagId="myTree">
      <netui:treeItem expanded="true" >
          <netui:treeLabel>Root Folder</netui:treeLabel>
          <netui:treeItem expanded="false">
              <netui:treeLabel>I</netui:treeLabel>
              <netui:treeItem expanded="false">
                  <netui:treeLabel>A</netui:treeLabel>
                  <netui:treeItem>1</netui:treeItem>
                  <netui:treeItem>2</netui:treeItem>
              </netui:treeItem>
          </netui:treeItem>
      </netui:treeItem>
  </netui:tree>