Components/Data displayIntroduced in 1.3.0

EOrgChart Org chart

import EUI 1.0

Examples

Organization

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 width: Math.min(700, parent.width) model: [{ "key": "team", "label": qsTr("Team"), "children": [{ "key": "design", "label": qsTr("Design") }, { "key": "dev", "label": qsTr("Development"), "children": [{ "key": "qa", "label": qsTr("QA") }] }] }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Collapsed branch

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 collapsedKeys: ["dev"] width: Math.min(700, parent.width) model: [{ "key": "team", "label": qsTr("Team"), "children": [{ "key": "design", "label": qsTr("Design") }, { "key": "dev", "label": qsTr("Development"), "children": [{ "key": "qa", "label": qsTr("QA") }] }] }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Multiple selection

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 selectionMode: "multiple" selectedKeys: ["design", "qa"] width: Math.min(700, parent.width) model: [{ "key": "team", "label": qsTr("Team"), "children": [{ "key": "design", "label": qsTr("Design") }, { "key": "dev", "label": qsTr("Development"), "children": [{ "key": "qa", "label": qsTr("QA") }] }] }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Checkbox cascade

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 selectionMode: "checkbox" width: Math.min(700, parent.width) model: [{ "key": "team", "label": qsTr("Team"), "children": [{ "key": "design", "label": qsTr("Design") }, { "key": "dev", "label": qsTr("Development"), "children": [{ "key": "qa", "label": qsTr("QA") }] }] }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Custom node

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 width: Math.min(700, parent.width) nodeDelegate: EText { anchors.centerIn: parent text: "★ " + parent.node.label } model: [{ "key": "team", "label": qsTr("Team"), "children": [{ "key": "design", "label": qsTr("Design") }, { "key": "dev", "label": qsTr("Development"), "children": [{ "key": "qa", "label": qsTr("QA") }] }] }] }

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

modelvar

Root node or roots of an organization tree with key, label, and children.

Default[]

nodeHeightreal

Height of each organization node.

Default56

nodeWidthreal

Width of each organization node.

Default150

selectedKeysvar

Keys of the selected organization nodes.

Default[]

verticalGapreal

Vertical spacing between hierarchy levels.

Default48

collapsedKeysvar

Array of collapsed organization node keys.

Default[]

horizontalGapreal

Horizontal spacing between organization nodes.

Default20

nodeDelegateComponent

Custom organization node; read parent.node.

Defaultnull

selectionModestring

Org chart selection mode: none, single, multiple, checkbox.

Default"single"

layoutvarRead only

Computed node positions, connectors and dimensions.

DefaultbuildLayout()

errorStringstringRead only

Model validation error code; empty for a valid model.

Defaultlayout.error

Signals

SignaturePurpose

nodeClicked(var node)

Emitted when an organization node is clicked; node is its data.

selectionChanged(var keys)

Emitted when selected nodes change; keys contains their identifiers.

toggled(var key, bool collapsed)

Emitted when a node expands or collapses; key identifies the node and collapsed is its collapsed state.

Methods

SignaturePurpose

toggle(key)

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

select(key)

Select the item identified by the given index or key.