Tree  

Definition

Hierarchies defined in the context can be visualized using the Tree UI element. The hierarchy to be displayed is defined in the context. You can describe this context structure in two ways:

●      If the number of levels is not known at design time, a recursive node is used (see Code Example of the Use of a Recursive Node).

●      If the number of levels is already specified at design time, a recursive node is not used (see Code Example for Creation of a Tree UI Element).

The following graphic shows how the UI element is displayed:

The Tree UI element is bound against the top-level context node to be displayed.

You use nodes (TreeNodeType elements) or leaves (TreeItemType-Elemente) to specify which subnodes are to be displayed and which context atttributes are to be displayed on these subnodes as a text or tooltip. The dataSource property of the TreeNodeTypeelement or TreeItemType element is bound to the corresponding context node and the properties text, tooltip, and so on, are bound to the corresponding context attributes on this context node.

TreeItemType elements cannot have children. Therefore, they are always displayed as leaves. They are used when it is decided at design time that the corresponding node does not have children. When using TreeNodeType elements, the decision of whether to use children is dynamically made at runtime.

Hierarchy levels defined in the context cannot be left out when displaying the UI element. For example, a TreeNodeType element that is bound to the Orders must also exist to display the items for the hierarchy Customers → Orders → Items, which is defined in a context.

All nodes that are not directly below the context root node must be non-singleton nodes, because all elements should be displayed in a tree regardless of the lead selection.

Description of UI Element Properties

●      dataSource

This property is used to specify the data source. You can use it to specify the path to the context node providing the data.

●      defaultItemIconAlt

This property is deprecated. Use tooltip instead.

●      defaultItemIconSource

defines the path to the icon source of the graphic to be displayed for a leave.

More information: Specifying the Image Source

●      defaultNodeIconAlt

This property is deprecated. Use tooltip instead.

●      defaultNodeIconSource

defines the path to the icon source of the graphic to be displayed for a node.

More Inforamtion: Specifying the Image Source

●      minHeight

Specifies the minimum height of the tree.

●      rootText

Describes the text for labeling the root node.

●      rootVisible

Specifies whether the root node of the tree structure is visible.

●      selectionChangeBehaviour

The selectionChangeBehaviour property can be filled with the following values and is represented by the enumeration type WDLeadSelectionChangeBehaviour.

auto	Specifies that the UI element automatically changes the lead selection after an interaction by the user before the corresponding event is triggered.
manual	Specifies that the UI element does not change the lead selection after an interaction by the user but triggers the corresponding event. In this case, the event handler must change the lead selection to enable the UI element to display the data. This setting allows you to check the change of the lead selection.

●      title

Describes the tree header.

●      titleVisible

Specifies whether the tree label is visible.

●      width

Specifies the width of the tree and can be specified in CSS units like em, ex, pixels, or percentage.

Properties Overview

Name	Interface	Type	Initial Value	Bindable
dataSource	IWDTree	Object		bindable_mandatory
defaultItemIconAlt	IWDTree	String (TranslatableText)		bindable
defaultItemIconSource	IWDTree	String		bindable
defaultNodeIconAlt	IWDTree	String (TranslatableText)		bindable
defaultNodeIconSource	IWDTree	String		bindable
enabled	IWDUIElement	boolean	true	bindable
minHeight	IWDTree	String (CSS size)		bindable
rootText	IWDTree	String (TranslatableText)		bindable
rootVisible	IWDTree	boolean	true	bindable
selectionChangeBehaviour	IWDTree	WDLeadSelectionChangeBehaviour	auto	not_bindable
title	IWDTree	String (TranslatableText)		bindable
titleVisible	IWDTree	WDVisibility	visible	bindable
tooltip	IWDUIElement	String (TranslatableText)		bindable
visible	IWDUIElement	WDVisibililty	visible	bindable
width	IWDTree	String (CSS size)		bindable

The tooltip property is ignored and does not affect the browser.

Data Binding

See Data Binding of a Tree UI Element.