Horizontal Tree - Events

An ajax behavior callback is provided for each event such as expand, collapse, select and unselect.

Documentation
Files
<h:form id="form">
    <p:growl id="messages" showDetail="true" />
    <p:tree value="#{treeEventsView.root}" var="doc" selectionMode="single" selection="#{treeEventsView.selectedNode}" orientation="horizontal">
        <p:ajax event="expand" update=":form:messages" listener="#{treeEventsView.onNodeExpand}" />
        <p:ajax event="collapse" update=":form:messages" listener="#{treeEventsView.onNodeCollapse}" />
        <p:ajax event="select" update=":form:messages" listener="#{treeEventsView.onNodeSelect}" />
        <p:ajax event="unselect" update=":form:messages" listener="#{treeEventsView.onNodeUnselect}" />
            
        <p:treeNode expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder">
            <h:outputText value="#{doc.name}"/>
        </p:treeNode>
        <p:treeNode type="document" icon="pi pi-file">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>
        <p:treeNode type="picture" icon="pi pi-image">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>
        <p:treeNode type="mp3" icon="pi pi-video">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>
    </p:tree>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.