Components/Data display

ETree Tree

import EUI 1.0

Examples

Checking, partial selection, filtering and drag and drop

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width EInput { width: Math.min(360, parent.width) placeholderText: qsTr("Filter nodes") onTextChanged: tree.filter(text) } ETree { id: tree draggable: true showCheckbox: true expandedKeys: ["team"] expandOnClickNode: true width: Math.min(440, parent.width) model: [{ id: "team", label: qsTr("Product team"), children: [ { id: "design", label: qsTr("Design") }, { id: "engineering", label: qsTr("Engineering") }, { id: "archived", label: qsTr("Archived"), disabled: true }] }, { id: "operations", label: qsTr("Operations"), children: [{ id: "support", label: qsTr("Support") }] }] } Row { spacing: 8 EButton { text: qsTr("Check team") onClicked: tree.setCheckedKeys(["team"]) } EButton { text: qsTr("Clear") onClicked: tree.setCheckedKeys([]) } ECheckBox { text: qsTr("Strict checking") onToggled: tree.checkStrictly = checked } } EText { width: parent.width wrapMode: Text.WordWrap text: qsTr("Checked: %1 Partially checked: %2").arg(tree.getCheckedKeys().join(", ")).arg(tree.halfCheckedKeys.join(", ")) } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Basic usage

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETree { expandedKeys: ["root"] model: [{ "id": "root", "label": qsTr("Projects"), "children": [{ "id": "app", "label": qsTr("Application") }] }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Basic usage

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETree { height: 260 width: parent.width model: exampleData.models.ManyNodes }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

accordionbool

Accordion mode allowing at most one expanded node or collapse item at a level.

Defaultfalse

allowDragvar

Drag guard receiving a node and returning whether dragging is allowed.

Defaultnull

allowDropvar

Drop guard receiving the dragged node, target node and drop position.

Defaultnull

autoExpandParentbool

Expand ancestors when expanding or locating a node.

Defaulttrue

checkOnClickLeafbool

Toggle checking when a leaf is clicked.

Defaultfalse

checkOnClickNodebool

Toggle checking when any node is clicked.

Defaultfalse

checkStrictlybool

Keep parent and child selection independent.

Defaultfalse

checkedKeysvar

Unique keys of checked nodes or selected table rows.

Default[]

currentKeystring

Unique key of the selected node.

Default""

defaultExpandAllbool

Expand all nodes or rows initially.

Defaultfalse

draggablebool

Enable dragging of the object defined by the current component.

Defaultfalse

draggingKeystring

Unique key of the node being dragged.

Default""

emptyDelegateComponent

Component slot for custom empty state; null uses the default content. See this page’s examples for delegate context.

Defaultnull

emptyTextstring

Text displayed when no data is available.

DefaultLocalized text

enabledbool

Allow interaction; false disables the control.

Defaulttrue

expandOnClickNodebool

Expand or collapse when clicking node text.

Defaultfalse

expandedKeysvar

Unique keys of expanded nodes, table rows or menu entries.

Default[]

filterNodeMethodvar

Node filter callback (query, node), returning whether to retain the node.

Defaultnull

filterValuestring

Current filtering or search query.

Default""

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

highlightCurrentbool

Highlight the selected node or row.

Defaulttrue

iconSourceint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_RIGHT

indentint

Indentation per tree or menu level in pixels.

Default18

itemHeightint

Menu item, data row or header row height in pixels.

Default34

lazybool

Create content or load data on demand; data controls use load / lazyLoad.

Defaultfalse

loadvar

Lazy-load callback receiving a node and resolve; call resolve(children) to provide children.

Defaultnull

loadedChildrenvar

Loaded child-node cache keyed by node identifier.

DefaultDynamic binding

loadingKeysvar

Keys of nodes or rows currently loading lazily.

Default[]

modelvar

Tree node data array; props and nodeKey customize field mappings.

Fields:
id, label, children
disabled, isLeaf

Default[]

nodeDelegateComponent

Component slot for custom tree or cascader node; null uses the default content. See this page’s examples for delegate context.

Defaultnull

nodeKeystring

Unique identifier field; stable unique keys preserve selection, expansion and caches.

Default"id"

propsvar

Object configuring data field mappings and node behavior.

Fields:
label, children, disabled
isLeaf

Default({})

showCheckboxbool

Show checkboxes for tree nodes.

Defaultfalse

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

allNodesvarRead only

Flattened array of all tree nodes.

DefaultComputed at runtime

checkSummaryvarRead only

Summary of checked and partially checked tree nodes.

DefaultComputed at runtime

currentNodevarRead only

Data object of the selected tree node.

DefaultComputed at runtime

halfCheckedKeysvarRead only

Keys of partially checked tree nodes.

DefaultComputed at runtime

visibleNodesvarRead only

Tree nodes visible after expansion and filtering.

DefaultComputed at runtime

Signals

SignaturePurpose

nodeDragStarted(var node)

Emitted when dragging starts; node is the dragged node.

checked(var node, var state)

Emitted when node checking changes; node is the node and state contains the check result.

loadFailed(var node, var error)

Emitted when loading a node fails; node is the node and error describes the failure.

nodeDragLeft(var node, var target)

Emitted when a dragged node leaves a target; node is the dragged node and target is the node being left.

nodeDragOver(var node, var target)

Emitted while dragging over a target; node is the dragged node and target is the target node.

nodeSelected(var node, string key)

Emitted when a node is selected; node is its data and key is its identifier.

currentChanged(var node, string key)

Emitted when the current node changes; node is its data and key is its identifier.

nodeContextMenu(var node, var mouse)

Emitted when a node is right-clicked; node is its data and mouse is the mouse event.

nodeDragEntered(var node, var target)

Emitted when a dragged node enters a target; node is the dragged node and target is the target node.

nodeExpanded(string key, bool expanded)

Emitted when a node expands or collapses, with its identifier and expanded state.

nodeDropped(var node, var target, string position)

Emitted after dropping a node; node is the dragged node, target is the target node, and position is the drop position.

nodeDragEnded(var node, var target, string position)

Emitted when dragging ends; node is the dragged node, target is the target node, and position is the drop position.

checkChanged(var node, bool checked, bool halfChecked)

Emitted when a node check state changes; node is the node, checked is its checked state, and halfChecked is its partial check state.

Methods

SignaturePurpose

getCurrentKey()

Return the current node identifier.

getCurrentNode()

Return the current node data object.

getNode(key)

Return the entry for key, including node data and hierarchy information.

getHalfCheckedKeys()

Return the identifiers of all partially checked nodes.

toggle(key)

Toggle the expanded or selected state; pass the target identifier when required.

isLoading(key)

Return whether the node identified by key is loading.

isChecked(key)

Return whether the specified item is checked.

isHalfChecked(key)

Return whether the node identified by key is partially checked.

findNode(key)

Return the node data for key, or null when not found.

remove(node)

Remove the node specified by node.

filter(value)

Set value as the tree filter text.

setCurrentNode(node, expandParents)

Set the current node; expandParents controls expansion of its ancestors.

isExpanded(key)

Return whether the specified item is expanded.

setCheckedNodes(nodes)

Set the checked nodes to nodes.

updateKeyChildren(key, children)

Replace the children of the node identified by key with children.

insertAfter(data, reference)

Insert data after reference.

insertBefore(data, reference)

Insert data before reference.

getHalfCheckedNodes()

Return the data objects of all partially checked nodes.

getCheckedKeys(leafOnly)

Return checked node identifiers; leafOnly limits the result to leaves.

setCurrentKey(key, expandParents)

Set the current node by key; expandParents controls expansion of its ancestors.

select(key)

Select the item identified by the given index or key.

getCheckedNodes(leafOnly, includeHalfChecked)

Return checked nodes; leafOnly limits the result to leaves and includeHalfChecked includes partially checked nodes.

append(data, parentNode)

Append node data under parentNode.

moveNode(key, targetKey, position)

Move node key relative to targetKey using position.

setCheckedKeys(keys, leafOnly)

Set checked nodes by keys; leafOnly limits changes to leaf nodes.

setExpanded(key, expanded)

Set expansion of node key to expanded.

loadNode(key)

Request child data for node key.

setChecked(key, value, deep)

Set the checked state of key to value; deep also updates descendants.