title: Primefaces TreeNode, showing Root Node in Vertical orientation
body: <p>I am implementing a tree module using PrimeFaces framework. I want to show the Root Node in vertical orientation. I figured out that, with the same code, <em>Horizontal</em> orientation shows its Root Node, but <em>Vertical</em> orientation does not. Why is that? Is there anyway to show the Root Node in Vertical mode? </p>
  
  <p>Vertical: </p>
  
  <pre><code>- Documents
  - Videos
  - Images
  </code></pre>
  
  <p>Horizontal:</p>
  
  <pre><code>               ----------- Images ---------- Travel.gif
                 -
  ---- Root Node ----------- Videos ---------- Play.avi 
                 -                   
                 ----------- Documents ------- Expenses.doc
  </code></pre>
  
  <p>Here are the codes:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"&gt;
  &lt;h:head&gt;
  &lt;script name="jquery/jquery.js" library="primefaces"&gt;&lt;/script&gt;
  &lt;/h:head&gt;
  &lt;h:form&gt;
  &lt;p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" orientation="horizontal"
              selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}"&gt;
      &lt;p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
                      collapsedIcon="ui-icon ui-icon-folder-collapsed"&gt;
          &lt;h:outputText value="#{node}"/&gt;
      &lt;/p:treeNode&gt;
      &lt;p:treeNode type="document" icon="ui-icon ui-icon-document"&gt;
          &lt;h:outputText value="#{node}"/&gt;
      &lt;/p:treeNode&gt;
      &lt;p:treeNode type="image" icon="ui-icon ui-icon-image"&gt;
          &lt;h:outputText value="#{node}"/&gt;
      &lt;/p:treeNode&gt;                 
      &lt;p:treeNode type="video" icon="ui-icon ui-icon-video"&gt;
          &lt;h:outputText value="#{node}"/&gt;
      &lt;/p:treeNode&gt;
      &lt;p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"&gt;&lt;/p:ajax&gt;
      &lt;p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"&gt;&lt;/p:ajax&gt;
      &lt;p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"&gt;&lt;/p:ajax&gt;
      &lt;p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"&gt;&lt;/p:ajax&gt;                                 
  &lt;/p:tree&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>@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 "";
  }
  }
  </code></pre>