Skip to main content
Version: 8.3

Perspective - Tree

Component Palette Icon:

Description

The Tree component displays a tree hierarchy based on an array of objects. Icons can be chosen for the nodes of the tree, and different icons can be used when an node is expanded or collapsed.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
itemsAn array of objects, each of which represents a node on the tree.
  • label: Label text for the list item. Value is string.
  • expanded: Whether or not the tree appears with all levels expanded. Value is boolean.
  • data: String data for list item. Value is string.
  • items: An array of objects, each of which represents a child node on the tree. Value is an array.
array
interactableIf set to false, the tree is displayed but the user can't interact with it in the runtime. Default is true.value: boolean
selectionHolds the item index path of the current selection.value: string
selectionDataArray of objects containing the data and index path for all currently selected nodes.
  • itemPath: Index path. Value is numeric.
  • value: The value of the 'data' property for the selected node. Value is string.
array
appearanceSettings for the appearance of the tree. Click here to see the appearance properties.object
styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

appearance Properties

NameDescriptionProperty Type
textOverflowSetting indicating whether overflowing text should cause the entire tree to scroll horizontally or whether the text should be truncated with an ellipsis. Default is scroll.value: string dropdown
expandIconsSettings for the expand icons . Options as follows:
  • collapsed: Icon appearance when path is collapsed.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • expanded: Icon appearance when path is expanded.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • empty: Icon appearance when path is empty.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
object
defaultNodeIconsSettings for the node icons. Options as follows:
  • collapsed: Icon appearance when path is collapsed.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • expanded: Icon appearance when path is expanded.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • empty: Icon appearance when path is empty.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
object
selectedStyleSets a style for when nodes are selected. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
unselectedStyleSets a style for when nodes are unselected. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
rowHeightHeight, in pixels, of each row/node of the tree. Default is 24.value: numeric

Scripting

See the Perspective - Tree Scripting page for the full list of scripting functions available for this component.

Example

PropertyValue
appearance.defaultNodeIcons.collapsed.pathmaterial/Play_arrow
appearance.defaultNodeIcons.collapsed.color#D9D900
appearance.defaultNodeIcons.expanded.pathmaterial/subdirectory_arrow_right
appearance.defaultNodeIcons.expanded.color#FFAC47
appearance.defaultNodeIcons.empty.pathmaterial/panorama_fish_eye
appearance.defaultNodeIcons.empty.color#000000