Tutorial

Primefaces Tree, TreeNode, TreeTable Example Tutorial

Published on August 3, 2022
Default avatar

By Pankaj

Primefaces Tree, TreeNode, TreeTable Example Tutorial

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

For displaying hierarchical data and create site navigation, Primefaces provides you Tree & TreeTable components. Leveraging these components aren’t so easy and it needs a lot of technical details. Some of those technical issues are covered randomly along spread published technical documents on the internet while others aren’t. This tutorial intended to provide you full explanations of how you can benefit from these components.

Primefaces Tree Basic Info

Info Tree
Component Class org.primefaces.component.tree.Tree
Component Type org.primefaces.component.Tree
Component Family org.primefaces.component
Renderer Type org.primefaces.component.TreeRenderer
Renderer Class org.primefaces.component.tree.TreeRenderer

Primefaces Tree Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
widgetVar null String Name of the client side widget
value null Object A TreeNode instance as the backing model
var null String Name of the request-scoped variable that’ll be usedto refer each treenode data.
dynamic false Boolean Specifies the ajax/client toggleMode
cache true Boolean Specifies caching on dynamically loaded nodes.When set to true expanded nodes will be kept in memory.
onNodeClick null String Javascript event to process when a tree node isclicked.
selection null Object TreeNode array to reference the selections.
style null String Style of the main container element of tree
styleClass null String Style class of the main container element of tree
selectionMode null String Defines the selectionMode
highlight true Boolean Highlights nodes on hover when selection is enabled.
datakey null Object Unique key of the data presented by nodes.
animate false Boolean When enabled, displays slide effect on toggle.
orientation vertical String Orientation of layout, vertical or horizontal.
propagateSelectionUp true Boolean Defines upwards selection propagation forcheckbox mode.
propagateSelectionDown true Boolean Defines downwards selection propagation forcheckbox mode.
dir ltr String Defines text direction, valid values are ltr and rtl.
draggable false Boolean Makes tree nodes draggable.
droppable false Boolean Makes tree droppable.
dragdropScope null String Scope key to group a set of tree components fortransferring nodes using drag and drop.
dragMode self String Defines parent-child relationship when a node isdragged, valid values are self (default), parent andancestor.
dropRestrict none String Defines parent-child restrictions when a node isdropped valid values are none (default) and sibling.
required false Boolean Validation constraint for selection.
requiredMessage null String Message for required selection validation.

Getting Started with Primefaces Tree

Tree is populated with an org.primefaces.model.TreeNode instance which corresponds to the root. Following below simple example that you may develop in which a Tree component had used. index.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node">
		<p:treeNode>
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>
package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create child node
		TreeNode child = new DefaultTreeNode("Child Node", this.root);
		// Reference the parent of child node
		child.setParent(this.root);
		// Create descendent nodes
		TreeNode descendent = new DefaultTreeNode("Descendent Node", child);
		// Reference the parent of descendent node
		descendent.setParent(child);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

Here are additional explanations beside those commented above:

  • Tree component has associated with a TreeNode instance called root.
  • Root instance has also a child as a TreeNode instance which also refers its child.
  • This hierarchical view is displayed by referencing the root node directly using value attribute.
  • Attributue var has used by the Tree component for referencing the Request-Scoped variable that’ll be used to refer each treenode data.
  • Each TreeNode has been created by passing two arguments; encapsulated data object instance and parent reference.
  • Properties of every TreeNode are: type, data, children, parent and expanded boolean indicator. All of those properties has to be explored in the next coming sections.

Primefaces Tree, Primefaces Tree Example

Primefaces Dynamic Tree

Tree component isn’t dynamic by default, dynamic mode uses ajax to fetch the tree nodes from the server side on demand. When node is expanded, tree loads the children of the particular expanded node and send to the client for display. Unlike what is happened originally, when toggling is set to client all the tree nodes in model are rendered to the client and tree is created. For large scale of data the dynamic mode is suitable than using the default behavior. Following below the way in which dynamic attribute can be identified. index.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode>
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>

Primefaces Multiple TreeNode Types

It’s a common requirement that you want different TreeNode types and icons inside your hierarchy. For implementing this, you should follow below simple steps:

  • Define/Place more than one <p:treeNode/> components, each having a different type.
  • Use that defined type to bind TreeNodes in your model.

Following below simple example demonstration for using different TreeNode for showing that type varieties. The files have affected by are both files index.xhtml view and TreeManagedBean.java. index.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>
package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

Primefaces Tree, Primefaces TreeNode Types As obvious from provided demo, the integration between TreeNode instance and p:treeNode component is the type attribute.

Primefaces Tree Ajax Behavior Events

Tree provides various ajax behavior events:

Event Listener Parameter Fired
expand org.primefaces.event.NodeExpandEvent When a node is expanded.
collapse org.primefaces.event.NodeCollapseEvent When a node is collapsed.
select org.primefaces.event.NodeSelectEvent When a node is selected.
unselect org.primefaces.event.NodeUnselectEvent When a node is unselected.

Following tree has three listeners: index2.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
</h:form>
</html>
package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}

	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}

	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}

	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}
}

Primefaces Tree, Primefaces TreeNode Ajax Events Primefaces Tree, Primefaces TreeNode Ajax Events Messages

  • Once you’ve expanded TreeNode, an Ajax event has fired.
  • For each fired event, an ajax listener method has defined for handling purposes.
  • Event listeners are also useful when dealing with a huge amount of data. That is by providing the root and child nodes to the tree, use event listeners to get the selected node and add new nodes to that particular tree at runtime.
  • Select and UnSelect events haven’t produced now, issuing these events required SelectionMode to be set.

Primefaces Tree Selection & SelectionMode

Tree component provides a built-in functionality that help you identify those selected nodes. Node selection mechanism supports three modes, for each provided mode a TreeNode instance(s) has/have assigned as a selection reference.

  • Single Mode: One TreeNode can be selected at a time. Selection should be a TreeNode reference.
  • Multiple Mode: Multiple nodes can be selected. Selection should be a TreeNode array reference.
  • Checkbox Mode: Multiple nodes can be selected using a checkbox UI. Selection should be a TreeNode array reference.

index1.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="multiple" selection="#{treeManagedBean.multipleSelectedTreeNodes}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="checkbox" selection="#{treeManagedBean.checkboxSelectedTreeNodes}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<h:commandButton value="Print Selected Nodes" action="#{treeManagedBean.printSelectedNodes}"></h:commandButton>
</h:form>
</html>
package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;
	private TreeNode singleSelectedTreeNode;
	private TreeNode [] multipleSelectedTreeNodes;
	private TreeNode [] checkboxSelectedTreeNodes;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public TreeNode getSingleSelectedTreeNode() {
		return singleSelectedTreeNode;
	}

	public void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {
		this.singleSelectedTreeNode = singleSelectedTreeNode;
	}

	public TreeNode[] getMultipleSelectedTreeNodes() {
		return multipleSelectedTreeNodes;
	}

	public void setMultipleSelectedTreeNodes(TreeNode[] multipleSelectedTreeNodes) {
		this.multipleSelectedTreeNodes = multipleSelectedTreeNodes;
	}

	public TreeNode[] getCheckboxSelectedTreeNodes() {
		return checkboxSelectedTreeNodes;
	}

	public void setCheckboxSelectedTreeNodes(TreeNode[] checkboxSelectedTreeNodes) {
		this.checkboxSelectedTreeNodes = checkboxSelectedTreeNodes;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}

	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}

	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}

	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}

	public String printSelectedNodes(){
		System.out.println("Single Selection Is :: "+this.singleSelectedTreeNode.getData());
		for(TreeNode n : this.multipleSelectedTreeNodes){
			System.out.println("Multiple Selection Are :: "+n.getData());
		}
		for(TreeNode n : this.checkboxSelectedTreeNodes){
			System.out.println("CheckBox Selection Are :: "+n.getData());
		}
		return "";
	}
}

Primefaces Tree, Primefaces Tree Selection Modes - Ajax Select And UnSelect Events Primefaces Tree, Primefaces Tree Selection Modes - Ajax Select And UnSelect Events - Console Messages One remaining notes should be mentioned for full detailed explanation:

  • TreeNode component has attributes like expandedIcon and collapsedIcon for specifying icons of both expand and collapsed behaviors.
  • TreeNode component has also icon attribute that used for specifying the icon of the node itself.

Primefaces Node Cache & OnNodeClick

By default cache attribute has turned on, nodes are loaded dynamically will be kept in memory so re expanding a node won’t trigger a server side request. In case you’ve set to false, collapsing the node will remove the children and expanding it later causes the children nodes to be fetched from the server again. It’s also applicable for you to execute a custom JavaScript in case certain node has clicked on. onNodeClick attribute used for this purpose, JavaScript method invoked with passing html clicked node and event elements. Following example is a log messages have displayed once onNodeClick has called. index3.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function onNodeClick(node,event){
			console.log("nodeArg :: "+node);
			console.log("eventArg ::"+event);
		}
	</script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" 
				onNodeClick="onNodeClick(node,event)"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Primefaces Tree - OnNodeClick Example

Primefaces DragDrop

Tree nodes can be reordered within a single tree and can even be transferred between multiple trees using dragdrop. Following example shows you how can make single tree draggable and droppable. index4.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Primefaces Tree - Draggable Drobbale Example - Drag Phase Primefaces Tree - Draggable Drobbale Example - Drop Phase Applying drag-drop concept against single tree is so easy, more complicated example can be noticed when it comes for dragging-dropping against multiple tree components. Following example shows you a simple example for that. This time a new attribute dragdropScope should be used for making trees’ nodes draggable and droppable between each others. index5.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}"
				dragdropScope="myScope">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
	
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}"
				dragdropScope="myScope">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>	
</h:form>
</html>

Primefaces Multiple Tree - Draggable Drobbale Example - Drag Phase Primefaces Multiple Tree - Draggable Drobbale Example - Drop Phase

Primefaces Horizontal Tree

Default orientation of tree is vertical, setting it to horizontal displays nodes in a horizontal layout. All features of vertical tree except dragdrop are available for horizontal tree as well. Attribute orientation is used for this purpose. index6.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" orientation="horizontal" 
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Primefaces Tree - Horizontal View

Primefaces ContextMenu

Primefaces provides you a special component that can serve you achieve some sort of contextual operations. ContextMenu component used for that, Tree component has even integrated with the context menu in order for applying those sorted operations against selected node and nodes in case you’ve developed multiple selections. ContextMenu’s for attribute should be used for referencing Tree component’s id attribute so that defined menu has been displayed at every time certain node within Tree component has selected. Use Right click for displaying context menu component. index6.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:contextMenu for="tree">
		<p:menuitem value="View" actionListener="#{treeManagedBean.view}" icon="ui-icon-search"></p:menuitem>
	</p:contextMenu>
	<p:tree id="tree" value="#{treeManagedBean.root}" var="node" dynamic="true" orientation="horizontal" 
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>
package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;
	private TreeNode singleSelectedTreeNode;
	private TreeNode [] multipleSelectedTreeNodes;
	private TreeNode [] checkboxSelectedTreeNodes;
	
	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
	
	public TreeNode getSingleSelectedTreeNode() {
		return singleSelectedTreeNode;
	}

	public void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {
		this.singleSelectedTreeNode = singleSelectedTreeNode;
	}

	public TreeNode[] getMultipleSelectedTreeNodes() {
		return multipleSelectedTreeNodes;
	}

	public void setMultipleSelectedTreeNodes(TreeNode[] multipleSelectedTreeNodes) {
		this.multipleSelectedTreeNodes = multipleSelectedTreeNodes;
	}

	public TreeNode[] getCheckboxSelectedTreeNodes() {
		return checkboxSelectedTreeNodes;
	}

	public void setCheckboxSelectedTreeNodes(TreeNode[] checkboxSelectedTreeNodes) {
		this.checkboxSelectedTreeNodes = checkboxSelectedTreeNodes;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}
	
	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}
	
	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}
	
	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}
	
	public String printSelectedNodes(){
		System.out.println("Single Selection Is :: "+this.singleSelectedTreeNode.getData());
		for(TreeNode n : this.multipleSelectedTreeNodes){
			System.out.println("Multiple Selection Are :: "+n.getData());	
		}
		for(TreeNode n : this.checkboxSelectedTreeNodes){
			System.out.println("CheckBox Selection Are :: "+n.getData());	
		}		
		return "";
	}
	
	public void view(ActionEvent e){
		System.out.println("View action has invoked against node :: "+this.singleSelectedTreeNode.getData());
	}	
}

Primefaces Tree - ContextMenu - Display Menu Primefaces Tree - ContextMenu - Print Out Selected Node Data

Primefaces TreeTable

TreeTable is used for displaying hierarchical data in tabular format.

Getting Started With Primefaces TreeTable

It’s important before exploring TreeTable component to take a look at it’s basic information and attributes respectively.

Info TreeTable
Component Class org.primefaces.component.treetable.TreeTable
Component Type org.primefaces.component.TreeTable
Component Family org.primefaces.component
Renderer Type org.primefaces.component.TreeTableRenderer
Renderer Class org.primefaces.component.treetable.TreeTableRenderer
Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of thecomponent, when set to false component willnot be rendered.
binding null Object An el expression that maps to a server sideUIComponent instance in a backing bean
value null Object A TreeNode instance as the backing model.
var null String Name of the request-scoped variable used torefer each treenode.
widgetVar null String Name of the client side widget
style null String Inline style of the container element.
styleClass null String Style class of the container element.
selection null Object Selection reference.
selectionMode null String Type of selection mode.
scrollable false Boolean Whether or not the data should be scrollable.
scrollHeight null Integer Height of scrollable data.
scrollWidth null Integer Width of scrollable data.
tableStyle null String Inline style of the table element.
tableStyleClass null String Style class of the table element.
emptyMessage No records found String Text to display when there is no data to display.
resizableColumns false Boolean Defines if colums can be resized or not.
rowStyleClass null String Style class for each row.
liveResize false Boolean Columns are resized live in this mode withoutusing a resize helper.
required false Boolean Validation constraint for selection.
requiredMessage null String Message for required selection validation.
sortBy null ValueExpr Expression for default sorting.
sortOrder ascending String Defines default sorting order.
sortFunction null MethodExpr Custom pluggable sortFunction for defaultsorting.
nativeElements false Boolean In native mode, treetable uses nativecheckboxes.
dataLocale null Object Locale to be used in features such as sorting,defaults to view locale.
caseSensitiveSort false Boolean Case sensitivity for sorting, insensitive bydefault.

Similar to Tree, TreeTable is populating with a TreeNode instance that corresponds to the root node. TreeNode API has a hierarchical data structure and represents the data to be populated in tree. Following example shows you Plain Old Java Object (POJO) document instances that are displayed using TreeTable component. index7.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
</h:form>
</html>
package com.journaldev.prime.faces.data;

public class Document {
	private String name;
	private String id;
	private String author;
	
	public Document(String name, String id,String author){
		this.name = name;
		this.id = id;
		this.author = author;
	}
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getAuthor() {
		return author;
	}
	public void setAuthor(String author) {
		this.author = author;
	}
}
package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import com.journaldev.prime.faces.data.Document;

@ManagedBean
@SessionScoped
public class TreeTableManagedBean {
	
	private TreeNode root = new DefaultTreeNode("Root Node", null);

	public TreeTableManagedBean(){
		// Populate Document Instances
		Document doc01 = new Document("Primefaces Tutorial","1","Primefaces Company");
		
		Document doc02 = new Document("Hibernate Tutorial","2","JournalDev");
		
		// Create Documents TreeNode
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// Create Document TreeNode
		TreeNode document01 = new DefaultTreeNode(doc01, documents);
		TreeNode document02 = new DefaultTreeNode(doc02, documents);
	}
	
	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

Primefaces TreeTable, Primefaces TreeTable Example

Primefaces TreeTable - Selection

Similar to Tree component, node selection is a built-in functionality by which you can determine the type of selection; Single, multiple and checkbox are the values that you might use. Single selection will bind your selected node into one instance of TreeNode, while others have used array of TreeNode. Following example shows you how you can enclose user selections by displaying Growl Message. This example uses p:commandButton provided by Primefaces which will be discussed later on. index8.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>			
	<p:growl id="message">
	</p:growl>				
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="single"
		selection="#{treeTableManagedBean.singleSelectedNode}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="multiple"
		selection="#{treeTableManagedBean.multipleSelectedNodes}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="checkbox"
		selection="#{treeTableManagedBean.checkboxSelectedNodes}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>	
	<p:commandButton value="Show Selected Documents" action="#{treeTableManagedBean.viewSelectedNodes}" process="@form" update="message">
	</p:commandButton>	
</h:form>
</html>
package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import com.journaldev.prime.faces.data.Document;

@ManagedBean
@SessionScoped
public class TreeTableManagedBean {
	
	private TreeNode root = new DefaultTreeNode("Root Node", null);
	private TreeNode singleSelectedNode;
	private TreeNode [] multipleSelectedNodes;
	private TreeNode [] checkboxSelectedNodes;

	public TreeTableManagedBean(){
		// Populate Document Instances
		Document doc01 = new Document("Primefaces Tutorial","1","Primefaces Company");	
		Document doc02 = new Document("Hibernate Tutorial","2","JournalDev");
		// Create Documents TreeNode
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// Create Document TreeNode
		TreeNode document01 = new DefaultTreeNode(doc01, documents);
		TreeNode document02 = new DefaultTreeNode(doc02, documents);
	}
	
	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public TreeNode getSingleSelectedNode() {
		return singleSelectedNode;
	}

	public void setSingleSelectedNode(TreeNode singleSelectedNode) {
		this.singleSelectedNode = singleSelectedNode;
	}

	public TreeNode[] getMultipleSelectedNodes() {
		return multipleSelectedNodes;
	}

	public void setMultipleSelectedNodes(TreeNode[] multipleSelectedNodes) {
		this.multipleSelectedNodes = multipleSelectedNodes;
	}

	public TreeNode[] getCheckboxSelectedNodes() {
		return checkboxSelectedNodes;
	}

	public void setCheckboxSelectedNodes(TreeNode[] checkboxSelectedNodes) {
		this.checkboxSelectedNodes = checkboxSelectedNodes;
	}
	
	public String viewSelectedNodes(){
		String message = "You've selected documents :: ";
		message+="- "+((Document)this.singleSelectedNode.getData()).getName()+"\n";
		for(TreeNode node : this.multipleSelectedNodes){
			message+="- "+((Document)node.getData()).getName()+"\n";	
		}
		for(TreeNode node : this.checkboxSelectedNodes){
			message+="- "+((Document)node.getData()).getName()+"\n";	
		}		
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
		return "";
	}
}

Primefaces TreeTable, Primefaces TreeTable Selection Sample

Primefaces TreeTable - Ajax Behavior Events & ContextMenu

TreeTable has supported the same Ajax behavior events that already Tree component come with. One exceptional event is that colResize that would be fired when a column is resized. Also, the using of ContextMenu doesn’t differ from that’s occurred in Tree component. Unfortunately, free version of Primefaces 5.0 that already used for now has a crucial issue prevents us from clarifying column re size event listening but for just knowing how such that event could be listening a simple example is provided below: index9.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" resizableColumns="true">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
		<p:ajax event="colResize" listener="#{treeTableManagedBean.colResizeListener}"></p:ajax>
	</p:treeTable>
</h:form>
</html>
// .. Some Required Code
	public void colResizeListener(ColumnResizeEvent e){
		String message ="Column resize event is thrown";
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
	}

Primefaces TreeTable - Sorting

Sorting is enabled by setting sortBy expressions at column level. index10.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node">
		<p:column sortBy="#{node.name}">
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column sortBy="#{node.author}">
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column sortBy="#{node.id}">
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
</h:form>
</html>

Primefaces TreeTable - Sort By NamePrimefaces TreeTable - Sort By Author In case you would like to display TreeTable as sorted on page load use sortBy attribute of TreeTable, optional sortOrder and sortFunction attributes are provided to define the default sort order (ascending or descending) and a Java method to the actual sorting respectively.

Primefaces Tree TreeNode TreeTable Summary

Tree and TreeTable components are used intensively for displaying structural hierarchical data. We learned how to use these components properly and what are the main attributes you should need. Contribute us by commenting below and for your use, download below source code.

Download PrimeFaces Tree Project

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Pankaj

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
JournalDev
DigitalOcean Employee
DigitalOcean Employee badge
June 4, 2019

how i can edit tree node (to change the name of the node) inline?

- manish baranwal

    JournalDev
    DigitalOcean Employee
    DigitalOcean Employee badge
    October 14, 2018

    I tried primeng datatable with angular 6 for 4 hours to get it working but in vain, is it <p-table or <p-dataTable or <p:table or <p:dataTable ??? 1) I put “import {TableModule} from ‘primeng/table’;” in app.module.ts and 2) in import section I put imports: [ … TableModule, …] and i used in my html file but i got “Can’t bind to ‘value’ since it isn’t a known property of ‘p-table’.” 3) I want to thank Primeng for forcing me to use ag-grid and deleting everything related to primeng…

    - th_hasan

      JournalDev
      DigitalOcean Employee
      DigitalOcean Employee badge
      August 27, 2018

      Good Job, thank you for your great effort :)

      - Mohammad Alzarai

        JournalDev
        DigitalOcean Employee
        DigitalOcean Employee badge
        February 13, 2018

        Hey Amir, Thanks a tonne for the post! Could you also share an example of the “highlight” feature. Also is the sample code above available as a zip file to download. Regards!

        - DIPAK

          JournalDev
          DigitalOcean Employee
          DigitalOcean Employee badge
          June 20, 2017

          Hi, How to drag and drop the selected node from the tree?

          - kiran

            JournalDev
            DigitalOcean Employee
            DigitalOcean Employee badge
            December 13, 2016

            how to make dynamic tree table from json object?

            - rohit

              JournalDev
              DigitalOcean Employee
              DigitalOcean Employee badge
              June 9, 2016

              Hi this is nafeel, Am currently working in treetable in primefaces. I could use the treetable in a tab view. If the user may create multiple tabs. Each tab contain a tree table. Everything in the multiple tab is bean value. Which is list of bean is assigned to the tab value. The problem here is when I iterate the tree table its iterated. But I cant get the exact bean value. The tree table value and selection value are all bean value. I could get via active index. If I click the checkbox and perform action it prints null pointer exception on tree rendered components. Kindly help me over it…

              - nafeel

                JournalDev
                DigitalOcean Employee
                DigitalOcean Employee badge
                January 5, 2016

                Name Def Id Level max_occur Root Root 0 0 1 Root BBB 1 1 1 Root CCC 2 2 1 Root DDD 3 2 1 Root EEE 4 2 1 Root FFF 5 3 1 Root GGG 6 3 1 Root HHH 7 3 1 Root III 8 2 1 Root JJJ 9 2 3 Root KKK 10 2 1 Root LLL 11 3 1 Root MMM 12 3 2 Root NNN 13 3 1 Root PPP 15 3 1 Root QQQ 16 1 1 Root RRR 17 1 1 Root SSS 18 2 1 Id’s are always linear in nature 1)On Clicking (+)Root ------> (+)BBB ------> (-)QQQ ------> (+)RRR 2)On Clicking (+)BBB -----> (-)CCC -----> (-)DDD -----> (+)EEE 3)On Clicking (+)EEE -----> (-)FFF -----> (-)GGG -----> (+)HHH -----> (-)III -----> (+)JJJ -----> (-)JJJ1 -----> (-)JJJ2 -----> (-)JJJ3 -----> (-)KKK -----> (-)LLL -----> (+)MMM -----> (-)MMM1 -----> (-)MMM2 -----> (-)NNN -----> (-)PPP 4)On Clicking QQQ we dont get anything as it has no id inside it (inside its id 1) -----> (-)QQQ 5)On Clicking (+)RRR -----> (-)SSS

                - Brindha

                  JournalDev
                  DigitalOcean Employee
                  DigitalOcean Employee badge
                  January 5, 2016

                  I am developing a site where I am getting the data from db, I have columns Name Def Id Level max_occur Root Root 0 0 1 Root BBB 1 1 1 Root CCC 2 2 1 Root DDD 3 2 1 Root EEE 4 2 1 Root FFF 5 3 1 Root GGG 6 3 1 Root HHH 7 3 1 Root III 8 2 1 Root JJJ 9 2 3 Root KKK 10 2 1 Root LLL 11 3 1 Root MMM 12 3 2 Root NNN 13 3 1 Root PPP 15 3 1 Root QQQ 16 1 1 Root RRR 17 1 1 Root SSS 18 2 1 Id’s are always linear in nature 1)On Clicking (+)Root ------> (+)BBB ------> (-)QQQ ------> (+)RRR 2)On Clicking (+)BBB -----> (-)CCC -----> (-)DDD -----> (+)EEE 3)On Clicking (+)EEE -----> (-)FFF -----> (-)GGG -----> (+)HHH -----> (-)III -----> (+)JJJ -----> (-)JJJ1 -----> (-)JJJ2 -----> (-)JJJ3 -----> (-)KKK -----> (-)LLL -----> (+)MMM -----> (-)MMM1 -----> (-)MMM2 -----> (-)NNN -----> (-)PPP 4)On Clicking QQQ we dont get anything as it has no id inside it (inside its id 1) -----> (-)QQQ 5)On Clicking (+)RRR -----> (-)SSS

                  - Brindha

                    JournalDev
                    DigitalOcean Employee
                    DigitalOcean Employee badge
                    March 17, 2015

                    “name” and “library” attribute of script tag not working in my eclipse. Please help. I even checked the attributes of tag. There are no attributes called “name” and “library” for it. Kindly help.

                    - Adish

                      Try DigitalOcean for free

                      Click below to sign up and get $200 of credit to try our products over 60 days!

                      Sign up

                      Join the Tech Talk
                      Success! Thank you! Please check your email for further details.

                      Please complete your information!

                      Get our biweekly newsletter

                      Sign up for Infrastructure as a Newsletter.

                      Hollie's Hub for Good

                      Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

                      Become a contributor

                      Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

                      Welcome to the developer cloud

                      DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

                      Learn more
                      DigitalOcean Cloud Control Panel