Locale

Change the locale of the datepicker, schedule and client side validation messages.

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Estonian
Persian
Finnish
Danish
Hindi
Indonesian
Icelandic
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Serbian
Swedish
Thai
Turkish
Ukrainian
Uzbek
Vietnamese
Chinese
Chinese

Input Style

Themes

PrimeUIX
Aura Light Emerald Aura Light Emerald
Aura Dark Emerald Aura Dark Emerald
PrimeOne
Saga Blue Saga Blue
Vela Blue Vela Blue
Arya Blue Arya Blue
Bootstrap
Bootstrap Blue Light Bootstrap Blue Light
Bootstrap Purple Light Bootstrap Purple Light
Bootstrap Blue Dark Bootstrap Blue Dark
Bootstrap Purple Dark Bootstrap Purple Dark
Material Design
Material Indigo Light Material Indigo Light
Material Deep Purple Light Material Deep Purple Light
Material Indigo Dark Material Indigo Dark
Material Deep Purple Dark Material Deep Purple Dark
Material Design Compact
Material Compact Indigo Light Material Compact Indigo Light
Material Compact Deep Purple Light Material Compact Deep Purple Light
Material Compact Indigo Dark Material Compact Indigo Dark
Material Compact Deep Purple Dark Material Compact Deep Purple Dark
Legacy
Nova Light Nova Light
Nova Dark Nova Dark
Nova Colored Nova Colored
Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink

Tree Filter

Filtering updates the node based on the constraints.

Tree Tag Documentation

Tree is is used for displaying hierarchical data and creating site navigations.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
animate boolean false false When enabled, Displays slide effect during toggling of a node.
cache boolean false true Specifies caching on dynamically loaded nodes. When set to true expanded nodes will be kept in memory.
datakey Object false Unique key of the data presented by tree nodes.
dir String false ltr Defines text direction, valid values are ltr and rtl.
disabled boolean false false Disables the tree.
dragMode String false self Defines parent-child relationship when a node is dragged, valid values are "self", "parent" and "ancestor".
dragdropScope String false Scope key to group a set of tree components for transferring nodes using drag and drop.
draggable boolean false false Controls dragging of tree nodes.
dropCopyNode boolean false false When enabled and dropMode='move', the copy of the selected nodes can be dropped from a tree to another tree using Shift key.
dropMode String false move Whether to 'move' or 'copy' the node on drop.
dropRestrict String false none Defines parent-child restrictions when a node is dropped valid values are "none" and "sibling".
droppable boolean false false Controls dropping of tree nodes.
dynamic boolean false false Specifies the ajax/client toggleMode.
filterBy Object false Property to be used for filtering.
filterDelay int false 300 Delay to wait in milliseconds before sending each filter query.
filterEvent String false keyup Client side event to invoke filtering. If "enter" it will only filter after ENTER key is pressed.
filterFunction MethodExpression false Custom implementation to filter TreeNodes against a constraint.
filterMatchMode String false startsWith Match mode for filtering.
filterMode String false lenient Mode for filtering valid values are "lenient" and "strict".
filterPlaceholder String false Placeholder for the filter input element.
highlight boolean false true Highlights nodes on hover when selection is enabled, set to false to disable highlighting.
multipleDrag boolean false false When enabled, the selected multiple nodes can be dragged from a tree to another tree.
nodeVar String false Name of the request-scoped variable that'll be used to refer current treenode using EL.
onDrop MethodExpression false Method returning whether the dragged node(s) can be dropped on the dropped node.
onNodeClick String false Javascript event to process when a tree node is clicked.
orientation String false vertical Defines the orientation of the tree, valid values are "vertical" and "horizontal".
propagateSelectionDown boolean false true Defines downwards selection propagation for checkbox mode.
propagateSelectionUp boolean false true Defines upwards selection propagation for checkbox mode.
required boolean false false Marks component as required.
requiredMessage String false
selection Object false TreeNode array to reference the selections.
selectionMode String false Defines the selectionMode, valid values are "single", "multiple" and "checkbox".
showUnselectableCheckbox boolean false false Defines if in checkbox selection mode, a readonly checkbox should be displayed for an unselectable node.
skipChildren boolean false false Ignores processing of children during lifecycle, improves performance if table only has output components.
style String false Inline style of the component.
styleClass String false Style class of the component.
tabindex int false 0 Position of the element in the tabbing order.
value TreeNode false Value of the component.
var String false Name of the request-scoped variable that'll be used to refer each treenode data during rendering.
Loading...
Tag DocumentationNew DocumentationNew Documentation JSDoc Basic Icon Selection Events DragDrop ContextMenu Animate RTL Filter Lazy Loading
Basic
Custom

Usage


<div class="card">
    <h:form>
        <h5>Basic</h5>
        <p:tree value="#{treeBasicView.root}" var="node" filterBy="#{node}" filterDelay="400">
            <p:treeNode>
                <h:outputText value="#{node}"/>
            </p:treeNode>
        </p:tree>

        <h5>Custom</h5>
        <p:tree value="#{treeBasicView.root}" var="node" filterFunction="#{treeBasicView.customFilter}">
            <p:treeNode>
                <h:outputText value="#{node}"/>
            </p:treeNode>
        </p:tree>
    </h:form>
</div>