1 Reply Latest reply on Jun 16, 2011 7:39 AM by Abdulkerim İnanmış

    How can I make horizontal scroll for rich:tree?

    Abdulkerim İnanmış Novice

      Hi,

      I am using richfcaes 4.0 final and JSF 2.04 libraries.

      How can I make horizontal scroll for rich:tree?

        • 1. Re: How can I make horizontal scroll for rich:tree?
          Abdulkerim İnanmış Novice

          I created  styleClasses and applied them to rich:tree and rich:panel .

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml"

                xmlns:h="http://java.sun.com/jsf/html"

                xmlns:f="http://java.sun.com/jsf/core"

                xmlns:ui="http://java.sun.com/jsf/facelets"

                xmlns:a4j="http://richfaces.org/a4j"

                xmlns:rich="http://richfaces.org/rich">

                    <h:head>

           

           

                    </h:head>

                    <h:body >

          <h:outputStylesheet>

                  .scroll{

                      vertical-align: top;

                      width:200px;

                      overflow:auto;

                      height:400px;

                  }

                    .scroll2{

                      vertical-align: top;

                

                      width:200px;

                      overflow-x:auto;

                      height:400px;

                  }

                   .top2{

                      vertical-align: top;

                      width: 50%;

                     

                  }

                  .bold{

                      font-weight: bold;

                  }

              </h:outputStylesheet>

              <h:panelGrid columns="2" columnClasses="top2,top2" >

                  <rich:panel styleClass="scroll">

                  <h:form>

                      <rich:tree id="tree" nodeType="#{node.type}" var="node"

                          value="#{treeBean.rootNodes}" toggleType="client"

                          selectionType="ajax" styleClass="scroll2"

                          selectionChangeListener="#{treeBean.selectionChanged}">

                          <rich:treeNode type="country">

                          #{node.name}

                      </rich:treeNode>

                          <rich:treeNode type="company" icon="/images/tree/disc.gif">

                          #{node.name}

                      </rich:treeNode>

                          <rich:treeNode type="cd" icon="/images/tree/song.gif">

                          #{node.artist} - #{node.name} - #{node.year}

                      </rich:treeNode>

                      </rich:tree>

                  </h:form>

                  </rich:panel>

                  <a4j:outputPanel ajaxRendered="true" layout="block">

                      <rich:panel header="Current Selection"

                          rendered="#{not empty treeBean.currentSelection}">

                          <h:outputText value="Name:" />

                          <h:outputText value="#{treeBean.currentSelection.name}" />

                          <h:panelGroup rendered="#{treeBean.currentSelection.leaf}">

                              <fieldset><legend>Details</legend> <h:panelGrid columnClasses="bold"

                                  columns="2">

                                  <h:outputText value="Country:" />

                                  <h:outputText value="#{treeBean.currentSelection.company.country}" />

                                  <h:outputText value="Company:" />

                                  <h:outputText value="#{treeBean.currentSelection.company}" />

                                  <h:outputText value="Artist:" />

                                  <h:outputText value="#{treeBean.currentSelection.artist}" />

                                  <h:outputText value="Price:" />

                                  <h:outputText value="#{treeBean.currentSelection.price}">

                                      <f:convertNumber type="currency" currencyCode="USD"/>

                                  </h:outputText>

                                  <h:outputText value="Year:" />

                                  <h:outputText value="#{treeBean.currentSelection.year}" />

                              </h:panelGrid></fieldset>

                          </h:panelGroup>

                      </rich:panel>

                  </a4j:outputPanel>

              </h:panelGrid>

                              </h:body>

          </html>