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 TreeNodeType element 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.
·
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
Describes an
alternative text for the graphic of a leave that is displayed when the
corresponding graphic is not available or cannot be loaded.
·
defaultItemIconSource
Describes the Web address (URL) of the graphic to be displayed for a
leave.
·
defaultNodeIconAlt
Describes an
alternative text for the graphic of a node that is displayed when the
corresponding graphic is not available or cannot be loaded.
·
defaultNodeIconSource
Describes the Web address (URL) of the graphic to be displayed for a
node.
·
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.
Name |
Interface |
Type |
Initial Value |
Bindable |
Value Required |
dataSource |
IWDTree |
Object |
|
bindable_mandatory |
No |
defaultItemIconAlt |
IWDTree |
String (TranslatableText) |
|
bindable |
No |
defaultItemIconSource |
IWDTree |
String |
|
bindable |
No |
defaultNodeIconAlt |
IWDTree |
String (TranslatableText) |
|
bindable |
No |
defaultNodeIconSource |
IWDTree |
String |
|
bindable |
No |
enabled |
IWDUIElement |
boolean |
true |
bindable |
No |
minHeight |
IWDTree |
String (CSS size) |
|
bindable |
No |
rootText |
IWDTree |
String (TranslatableText) |
|
bindable |
No |
rootVisible |
IWDTree |
boolean |
true |
bindable |
No |
selectionChangeBehaviour |
IWDTree |
WDLeadSelectionChangeBehaviour |
auto |
not_bindable |
No |
title |
IWDTree |
String (TranslatableText) |
|
bindable |
No |
titleVisible |
IWDTree |
WDVisibility |
visible |
bindable |
No |
tooltip |
IWDUIElement |
String (TranslatableText) |
|
bindable |
No |
visible |
IWDUIElement |
WDVisibililty |
visible |
bindable |
No |
width |
IWDTree |
String (CSS size) |
|
bindable |
No |
The tooltip property is ignored and does not affect the browser.
See Data Binding of a Tree UI Element.