Tree incubating / since 0.8.5

Use b:tree to obtain a Tree component with basic functionalities.

The Tree component needs a backend model to provide the UI structure. This means you must provide a value of type net.bootsfaces.component.tree.model.Node.

Currently, the Tree component does not mantain its state so, if you refresh the page, the tree resets to its initial state. This happens because the component is rendered only client-side.

Basic usage


Attention We must indeed pay attention to a couple of things: while the tree component was a client side component, and that i need to put it inside a form to be able to perform ajax call, i need to set the prependId="false" option to the form, to prevent the component to lose it's styling, that is based on ids. We will try to solve this limitation in the future version of the component.

This component is also able to mantain it's state also after a page refresh (expansion level and checked items).

Advanced usage

In this case, we have defined a nodeSelectionListener that listen to selection and check events


To manage selection and check events, you need to implement in your bean, the TreeNodeEventListener interface. This interface exposes some methods to manage the events in the backend. For example:


Reference section

Attribute Default value Description
border-color
borderColor (alternative writing)
#DDDDDD Hex value of border color (default #DDDDDD)
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
collapse-icon
collapseIcon (alternative writing)
(none) Glyphicons of collapse.
color (none) Hex value of text color.
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
enable-links
enableLinks (alternative writing)
false Boolean value to specify if enable href link.
expand-icon
expandIcon (alternative writing)
(none) Glyphicons of expand.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
hover-color
hoverColor (alternative writing)
(none) Hex value of hover color.
id (none) Unique identifier of the component in a namingContainer.
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
node-selection-listener
nodeSelectionListener (alternative writing)
(none) Selection listener called on selection changed.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
render-root
renderRoot (alternative writing)
true Boolean value to specify if the root node must be rendered.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
selected-color
selectedColor (alternative writing)
(none) Hex value of selected color.
show-border
showBorder (alternative writing)
false Boolean value to specify if tree items has to display the border.
show-checkbox
showCheckbox (alternative writing)
false Boolean value to specify if checkbox is rendered or not.
show-icon
showIcon (alternative writing)
false Boolean value to specify if icons are rendered or not.
show-tags
showTags (alternative writing)
false Boolean value to specify if tags was show or not.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style (none) Inline style of the input element.
style-class
styleClass (alternative writing)
(none) Style class of this element.
tabindex (none) Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
update (none) Component(s) to be updated with ajax.
value (none) Tree model value. Requires a java.util.List<net.bootsfaces.component.tree.model.Node> to work.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.