### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.9.2. < rich:treeNode > available since 3.0.0

expand all

#### 6.9.2.1. Description

The <rich:treeNode> component is designed for creating sets of tree elements within a <rich:tree> component.

Figure 6.70. <rich:treeNode> component

#### 6.9.2.2. Key Features

- Possibility to assign different icon images for each node within a tree

- Drag and Drop support

- Look-and-Feel customization

#### 6.9.2.3. Details of Usage

The "icon" , "iconCollapsed" , "iconExpanded" , "iconLeaf" attributes define icons for the component. Also you can define icons using facets with the same names. If the facets are defined, the corresponding attributes are ignored and facets contents are used as icons. The width of a rendered facet area is 16px.

    ...

    <rich:tree ...>

            ...

            <rich:treeNode>

                    <f:facet name="icon">

                        <outputText value="A"/>

                    </f:facet>

                    <f:facet name="iconCollapsed">

                        <outputText value="B"/>

                    </f:facet>

                    <f:facet name="iconExpanded">

                        <outputText value="C"/>

                    </f:facet>

                    <f:facet name="iconLeaf">

                        <outputText value="D"/>

                    </f:facet>

            </rich:treeNode>

            ...

    </rich:tree>

    ...

As it has been mentioned above, <rich:treeNode> defines a template for nodes rendering in a tree. Thus, during XML document rendering (a web.xml application) as a tree, the following nodes output (passed via `var="data"` on a tree) happens:

Example:

    ...

    <rich:tree faceNode="simpleNode" value="#{bean.data}" var="data">

            <rich:treeNode type="simpleNode">

                    <h:outputText value="context-param:"/>

                    <h:inputText value="#{data.name}"/>

            </rich:treeNode>

    </rich:tree>

    ...

Figure 6.71. Nodes output

Hence, <h:outputText /> tag outputs the `"context-param"` string and then the <h:inputText /> outputs the `data.name` element of this node.

Different nodes for rendering could be defined depending on some conditions on the tree level. Each condition represents some rendering template. To get more information on various treeNodesAdaptorAdaptor definition for nodes, see the tree component chapter.

Switching between expanded/collapsed modes is also managed on the tree level and defined in the corresponding section.

Default nodes of the tree level as well as the ones defined with the treeNodesAdaptorAdaptor component could send Ajax requests when selected with the mouse, it's managed with the "ajaxSubmitSelection" attribute (true/false).

Information about the "process" attribute usage you can find " Decide what to process " guide section.

#### 6.9.2.4. Built-in Drag and Drop

The main information on Drag and Drop operations is given in the corresponding paragraph of the tree component chapter. It's only necessary to mention that each node could also be a Drag element as well as a Drop container, i.e. the container and the element have all attributes, listeners and ways of behavior similar to the ones of the <rich:dragSupport > and <rich:dropSupport > components simultaneously.

#### 6.9.2.5. Events Handling

Just as Drag and Drop operations it corresponds to the one described on the tree component level for a default Node.

#### 6.9.2.6. Reference Data

Table of <rich:treeNode> attributes.

Table 6.96. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.TreeNode
component-class | org.richfaces.component.html.HtmlTreeNode
component-family | org.richfaces.TreeNode
renderer-type | org.richfaces.TreeNodeRenderer
tag-class | org.richfaces.taglib.TreeNodeTag

Table 6.97. Facets

Facet name | Description
--- | ---
icon | Redefines the icon for node. Related attribute is "icon"
iconCollapsed | Redefines the icon for collapsed node. Related attribute is "iconCollapsed"
iconExpanded | Redefines the icon for expanded node. Related attribute is "iconExpanded"
iconLeaf | Redefines the icon for component leaves. Related attribute is "iconLeaf"

Table 6.98. Classes names that define a node element

Class name | Description
--- | ---
rich-tree-node | Defines styles for a tree node
rich-tree-node-handle | Defines styles for a tree node handle
rich-tree-node-handleicon | Defines styles for a tree node handle icon
rich-tree-node-children | Defines styles for all tree node subnodes
rich-tree-node-text | Defines styles for a tree node text
rich-tree-node-icon | Defines styles for a tree node icon
rich-tree-h-ic-img | Defines styles for an image of a tree node
rich-tree-node-icon-leaf | Defines styles for a tree node icon leaf

Table 6.99. Classes names that define states for a node element

Class name | Description
--- | ---
rich-tree-node-selected | Defines styles for a selected tree node
rich-tree-node-highlighted | Defines styles for a highlighted tree node
rich-tree-node-handleicon-collapsed | Defines styles for a collapsed tree node handleicon
rich-tree-node-handleicon-expanded | Defines styles for a expanded tree node handleicon

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

#### 6.9.2.7. Relevant Resources Links

How to Expand/Collapse Tree Nodes from code see in thiswiki article.

- Prev6.9.1. < rich:tree > ...
- Top of page
- Front page
- Next6.9.3. < rich:treeNodesAdaptor > ...