Components/Form components

ETransfer Transfer

import EUI 1.0

Examples

Reorder transferred items

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETransfer { value: [2, 3] reorderable: true width: Math.min(700, parent.width) data: [{ "key": 1, "label": "Design" }, { "key": 2, "label": "Develop" }, { "key": 3, "label": "Review" }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Drag between panels

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETransfer { value: [3] draggable: true reorderable: true width: Math.min(700, parent.width) data: [{ "key": 1, "label": "Design" }, { "key": 2, "label": "Develop" }, { "key": 3, "label": "Review" }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Transfer

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 ETransfer { targetOrder: "push" props: ({key: "id", label: "name", disabled: "locked"}) filterMethod: function(query, item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) >= 0 } leftFooter: Component { EText { padding: 8 width: parent.width wrapMode: Text.WordWrap text: qsTr("Select entries, then move with the arrow") } } data: [{id: "desktop", name: qsTr("Desktop")}, {id: "web", name: qsTr("Web")}, {id: "mobile", name: qsTr("Mobile"), locked: true}, {id: "embedded", name: qsTr("Embedded")}] } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Transfer selection

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETransfer { width: 620 data: exampleData.models.TransferItems value: exampleData.models.InitialTransferredKeys }

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

datavar

Full transfer list data; props maps custom field names.

key, label, disabled

Default[]

enabledbool

Allow interaction; false disables the control.

Defaulttrue

filterMethodvar

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

Defaultnull

filterablebool

Allow keyword filtering.

Defaulttrue

heightreal

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

DefaultimplicitHeight

leftFooterComponent

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

Defaultnull

leftTitlestring

Title of the left or right transfer panel.

DefaultLocalized text

optionDelegateComponent

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

Defaultnull

propsvar

Mapping of data field names.

key, label, disabled

Default({key: "key", label: "label", disabled: "disabled"})

rightFooterComponent

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

Defaultnull

rightTitlestring

Title of the left or right transfer panel.

DefaultLocalized text

targetOrderstring

Ordering policy for selected items in the target list.

"original" / "push"
"unshift"

Default"original"

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

valuevar

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

Default[]

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultimplicitWidth

effectiveDatavarRead only

Transfer data after field mapping.

DefaultComputed at runtime

selectedKeysvarRead only

Keys of currently selected transfer items.

DefaultComputed at runtime

targetDatavarRead only

Items in the right-hand transfer target panel.

DefaultComputed at runtime

draggablebool

Allow entries to be moved by dragging.

Defaultfalse

reorderablebool

Allow entries to be reordered.

Defaultfalse

Signals

SignaturePurpose

changed(var value)

Emitted when the selection changes; value is the new value.

reordered(bool right)

Emitted after reordering a list; right indicates that the right list changed.

moved(var value, string direction, var keys)

Emitted after transferring items; value is the selection, direction is the transfer direction, and keys contains the transferred keys.

Methods

SignaturePurpose

reorder(right, from, to)

Reorder an item in the specified list from index from to index to.

move(keys, toRight)

Transfer the items identified by keys; toRight moves them to the right list.