Tree / Tree Select

In Lowcoder, the Tree and Tree Select components are designed to display and interact with hierarchical data structures, providing users with intuitive navigation and selection capabilities.

Tree Component:

• Hierarchical Display: Presents data in a tree-like structure, allowing users to expand and collapse nodes to explore nested items.

• Customisation: Supports customisation of node labels, icons, and styles to align with application requirements.

• Event Handling: Offers event handlers for interactions such as node selection, expansion, and collapse, enabling dynamic responses to user actions.

Tree Select Component:

• Dropdown Hierarchy: Combines the hierarchical display of the Tree component with a dropdown interface, allowing users to select options from nested categories within a compact UI element.

• Search Functionality: Includes a search feature to help users quickly locate specific nodes within the hierarchy.

• Multiple Selection: Can be configured to allow single or multiple selections based on application needs.

Tree Select component Demo

Component Playground

On Component Playground, you can interact with the Tree/ Tree Select component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Tree/ Tree Select component.

• Tree Component
• Tree Select Component

Component Auto-Docs

In the Auto-Docs of Tree/ Tree Select component, we have shown how to use different properties of the component. It also includes the Styling properties of the component.

• Tree Component
• Tree Select Component

Properties of the Tree / Tree Select component

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
hidden	Boolean	Returns True or False based on whether the Tree/Tree Select component is hidden or not
disabled	Boolean	Returns True or False based on whether the Tree/Tree Select component is disabled or not
invalid	Boolean	Returns True or False based on whether the Tree/Tree Select component is invalid or not
value	Array	Returns an Array which contain the selected value/values from the Component
expanded	Array	Returns an Array which contain the expanded value/nodes of the Component
treeData	Array	Returns an Array which contain all the Tree component data

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Change	When a User "changes" anything on the component.
Focus	When a User "clicks" on the Component's typing area.
Blur	When a User "clicks" outside of the component i.e, defocuses the component.

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

Method Name	Description
setValue	Set the value of the property Value
resetValue	Reset the value of the property Value
clearValue	Clear the value of the property Value