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.
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 |
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. |
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 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>
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:
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;
}
}
As obvious from provided demo, the integration between TreeNode instance and p:treeNode component is the type attribute.
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");
}
}
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.
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 "";
}
}
One remaining notes should be mentioned for full detailed explanation:
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>
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>
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>
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 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());
}
}
TreeTable is used for displaying hierarchical data in tabular format.
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;
}
}
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 "";
}
}
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));
}
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>
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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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.
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
how i can edit tree node (to change the name of the node) inline?
- manish baranwal
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
Good Job, thank you for your great effort :)
- Mohammad Alzarai
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
Hi, How to drag and drop the selected node from the tree?
- kiran
how to make dynamic tree table from json object?
- rohit
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
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
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
“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