Contineo Platform

Tree

A hierarchical tree component that displays data in a collapsible tree structure. Features customizable node display, lazy loading, filtering, checkbox selection, and advanced data formatting options. Supports both flat list and hierarchical data structures with comprehensive node customization.

Extends: listComponent

Fields

Name	Code	Data Type	Description
Label	`label`	multi-locale	Display label for the tree
ID	`resourceId`	text	Unique identifier for the component
Width	`widthClass`	text	Controls component width
Style Classes	`styleClasses`	text	CSS classes for styling
List	`list`	text	Array of nodes to display in the tree
Tree Label Field Name	`treeLabelFieldName`	text	Field name to use for node labels
Tree Children Key Name	`treeChildrenKeyName`	text	Field name for child nodes array
Tree Nodes Key Field Name	`treeNodesKeyFieldName`	text	Field name for unique node identifiers
No Nodes Label	`noNodesLabel`	text	Text to display when tree is empty
Default Expand All	`defaultExpandAll`	boolean	Automatically expands all nodes on load
Tick Strategy	`tickStrategy`	text	Node selection behavior (none/strict/leaf/leaf-filtered)
Accordion	`accordion`	boolean	Enables accordion-style node expansion
No Transition	`noTtransition`	boolean	Disables node expand/collapse animations
Custom Node	`treeSlot`	boolean	Enables custom node template
HTML Content Function	`htmlFunction`	text	Function for custom node HTML rendering
Data Format	`dataFormatValue`	text	Input data format (tree/list)
ID Field Name	`idFieldName`	text	Field name for node IDs in list format
Parent ID Field Name	`parentIdFieldName`	text	Field name for parent IDs in list format
Filter	`filter`	boolean	Enables node filtering
Filter By	`filterBy`	text	Field name to use for filtering
Filter Input Style Classes	`filterInputStyleClasses`	text	CSS classes for filter input

Methods

Name	Description
`getTreeList`	Processes and formats input data into tree structure
`buildHierarchy`	Converts flat list data into hierarchical structure
`loadNodes`	Handles lazy loading of child nodes
`handleNodeTick`	Processes node selection events
`handleNodeSelection`	Handles node click/selection events
`loadHTMLContent`	Renders custom node content using HTML function

Events

Name	Description
`onLazyLoad`	Triggered when child nodes need to be loaded
`onTicked`	Triggered when node selection changes
`onNodeSelect`	Triggered when a node is clicked/selected