NUI / Components / Scroll, Lists & Data

TreeView

ImplementedScroll, Lists & Data

TreeView displays hierarchical data with expandable entries.

Supported as a hierarchical data view.

Overview

TreeView displays hierarchical data with expandable entries.

When to use

Skill trees.
File-like hierarchies.
Nested categories.
Quest chains.
Nested settings.

Children

Uses data/template fields instead of normal children.

Basic syntax

nui

TreeView QuestTree {
    items: "main|Main Quest|0;side|Side Quest|0"
}

Supported properties

Property	Type	Required	Default	Description
`items`	string	No	Empty	Inline item data.
`dataSource`	string	No	Empty	Named external data source.
`childrenSource`	string	No	Empty	Child data source field or binding.
`expandedKeys`	string	No	Empty	Initially expanded keys.
`maxDepth`	integer	No	Unset	Maximum rendered tree depth.
`itemKey`	string	No	Empty	Field or static key binding.
`itemText`	string	No	Empty	Field or static display text binding.
`itemValue`	string	No	Empty	Field or static value binding.
`itemCommand`	string	No	Empty	Command when an item is used or selected.
`selectedKey`	string	No	Empty	Initially selected item key.
`selectionMode`	enum	No	single	Selection mode.
`entryHeight`	number	No	Default	Entry height.
`scrollBarVisibility`	enum	No	auto	Scrollbar visibility.
`gap`	number	No	0	Space between entries.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

TreeView may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. It does not support normal authored child nodes.

Full syntax example

nui

TreeView QuestTree {
    items: "main|Main Quest|0;side|Side Quest|0"
    childrenSource: "children"
    expandedKeys: "main,side"
    maxDepth: 4
    itemKey: "id"
    itemText: "name"
    itemValue: "state"
    itemCommand: "SelectQuest"
    selectedKey: "main"
    selectionMode: single
    entryHeight: 32
    scrollBarVisibility: auto
    gap: 4
    width: 360
    height: 280
    visible: true
}

Limitations

Normal children { ... } blocks are not public syntax for this component.
Tree data shape and binding examples should be verified against the project data source used in a project.