<netui:tree> Tag

Renders a navigable tree of TreeElement tags.

Syntax

<netui:tree
    dataSource="dataSource"
    [defaultIcon="defaultIcon"]
    [disableClass="disableClass"]
    [disabledStyle="disabledStyle"]
    [expansionAction="expansionAction"]
    [expansionTarget="expansionTarget"]
    [imageHandleDownLast="imageHandleDownLast"]
    [imageHandleDownMiddle="imageHandleDownMiddle"]
    [imageHandleRightLast="imageHandleRightLast"]
    [imageHandleRightMiddle="imageHandleRightMiddle"]
    [imageLineLast="imageLineLast"]
    [imageLineMiddle="imageLineMiddle"]
    [imageLineVertical="imageLineVertical"]
    [imageRoot="imageRoot"]
    [runAtClient="runAtClient"]
    selectionAction="selectionAction"
    [selectionClass="selectionClass"]
    [selectionStyle="selectionStyle"]
    tagId="tagId"
    [treeClass="treeClass"]
    [treeStyle="treeStyle"]
    [unselectClass="unselectClass"]
    [unselectStyle="unselectStyle"] />

Description

Renders a navigable tree of TreeElement tags.

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 image names should be:

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

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

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

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

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

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

imageHandleDownLast
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".)
imageHandleDownMiddle
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".)
imageHandleRightLast
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".)
imageHandleRightMiddle
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".)
imageLineLast
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

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

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

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

The directory containing the images for tree icons, relative to the page that includes the tag.
runAtClient
Required: No  |   Supports runtime evaluation: No  |   Data bindable:

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

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

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

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

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

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

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

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


 
Example

The following example shows a <netui:tree> tag with a set of children <netui:node> tags that form the tree's navigational structure. The tree attribute stores the tree in the Session object, under the property "tree". The imageRoot attribute points to fa older of images relative to the Page Flow directory.

  <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>