Components/Form components

ETreeSelect Tree select

import EUI 1.0

Examples

Tree select

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 ETreeSelect { multiple: true filterable: true showCheckbox: true value: ["archived"] checkStrictly: false nodeDelegate: Component { EText { text: parent.node.label } } cacheData: [{value: "archived", label: qsTr("Archived item")}] data: [{label: qsTr("Engineering"), value: "engineering", children: [ {label: qsTr("Desktop"), value: "desktop"}, {label: qsTr("Web"), value: "web"}, {label: qsTr("Mobile"), value: "mobile", disabled: true}]}] } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Tree node selection

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETreeSelect { clearable: true leavesOnly: true data: exampleData.models.Regions }

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

allowCreatebool

Allow unmatched input to become a new option.

Defaultfalse

cacheDatavar

Cached lazy tree nodes used to resolve labels for selected values.

Default[]

checkStrictlybool

Keep parent and child selection independent.

Defaultfalse

childrenRolestring

Object field used for text, values, child nodes or indentation.

Default"children"

clearablebool

Show a clear action; ratings may be cleared by clicking the current score again.

Defaultfalse

collapseTagsbool

Collapse excess selected tags.

Defaultfalse

currentIndexint

Index of the current selected or displayed item.

-1: no selection
0 and above: item index

Default-1

datavar

Tree node array; role properties customize field mappings.

Fields:
label, value, children
disabled

Default[]

debounceint

Delay, throttling or automatic close time in milliseconds; 0 means no delay or no timed close.

Default300

defaultExpandAllbool

Expand all nodes or rows initially.

Defaulttrue

editablebool

Allow input editing or enable both tab addition and closing.

Defaultfalse

emptyValuesvar

Values treated as empty; includes undefined, null and the empty string by default.

DefaultInherited; default [undefined, null, ""]

enabledbool

Allow interaction; false disables the control.

Defaulttrue

expandedKeysvar

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

Default[]

filterMethodvar

Custom filter callback using the current component's filtering arguments and result.

DefaultDynamic binding

filterNodeMethodvar

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

Defaultnull

filterablebool

Allow keyword filtering.

Defaultfalse

heightreal

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

DefaultimplicitHeight

indentRolestring

Object field used for text, values, child nodes or indentation.

Default"level"

labelRolestring

Object field used for text, values, child nodes or indentation.

Default"label"

lazybool

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

Defaultfalse

leavesOnlybool

Allow only leaf nodes to be selected in tree-select.

Defaultfalse

loadvar

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

Defaultnull

loadingbool

Whether the component is loading.

Defaultfalse

loadingTextstring

Loading-state text.

DefaultLocalized text

maxCollapseTagsint

Maximum directly visible tags when collapsing.

Default1

modelvar

Component data source; item structure follows the current example and component contract.

DefaultDynamic binding

multiplebool

Allow multiple selection.

Defaultfalse

multipleLimitint

Maximum selections.

0: unlimited
Positive number: limit

Default0

noDataTextstring

Text displayed when no data is available.

DefaultLocalized text

noMatchTextstring

Text displayed when filtering finds no matches.

DefaultLocalized text

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"value"

optionDelegateComponent

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

DefaulttreeOption

placeholderTextstring

Placeholder shown when the value is empty.

DefaultLocalized text

popupFooterComponent

Component slot for a panel footer or popup header/footer. See this page’s examples for delegate context.

Defaultnull

popupHeaderComponent

Component slot for a panel footer or popup header/footer. See this page’s examples for delegate context.

Defaultnull

querystring

Current filtering or search query.

Default""

remotebool

Use remote search instead of local filtering.

Defaultfalse

remoteMethodvar

Remote query callback receiving a keyword and returning options or a Promise.

Defaultnull

reserveKeywordbool

Keep the search keyword after selection.

Defaulttrue

showCheckboxbool

Show checkboxes for tree nodes.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

tagDelegateComponent

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

Defaultnull

textRolestring

Object field used for text, values, child nodes or indentation.

Default"label"

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

validationMessagestring

Validation message or externally supplied error text.

Default""

validationStateint

Input validation state.

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

DefaultEValidationState.None

valuevar

Current value; read or write through property bindings, with arrays for multiple or range selection.

Defaultundefined

valueKeystring

Option value field or unique identifier for object values.

Default"value"

valueOnClearvar

Value after clearing, or a function returning it; inherits configuration by default.

DefaultInherited; default undefined

valueRolestring

Object field used for text, values, child nodes or indentation.

Default"value"

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultimplicitWidth

advancedboolRead only

Whether select uses advanced mode for multiple selection, filtering or custom delegates.

DefaultComputed at runtime

cacheOptionsvarRead only

Tree-select options derived from cached data.

DefaultComputed at runtime

emptyboolRead only

Whether the current value is considered empty.

DefaultComputed at runtime

groupedboolRead only

Whether the select model contains option groups.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

selectedValuesvarRead only

Selected values in multiple select mode.

DefaultComputed at runtime

sourceOptionsvarRead only

Normalized suggestion or selection options.

DefaultComputed at runtime

treeOptionsvarRead only

Tree-select options derived from tree nodes.

DefaultComputed at runtime

visibleOptionsvarRead only

Select options visible after filtering.

DefaultComputed at runtime

Signals

SignaturePurpose

loadFailed(string message)

Emitted when loading data fails; message explains why.

nodeExpanded(var value, bool expanded)

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

Methods

SignaturePurpose

labelFor(key)

Return the display label for the specified value.

checkedState(key)

Return the check state of a node or path, including partial selection.

toggleExpanded(key)

Toggle expansion of the tree node identified by key.

checkNode(key, checked)

Set the checked state of the tree node identified by key.