Show TOC

 TreeLocate this document in the navigation structure

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.
  • If the number of levels is already specified at design time, a recursive node is not used.

The following graphic shows how the UI element is displayed:

Tree

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 TreeNodeTypeelements, the decision of whether to use children is dynamically made at runtime.

Note

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
width

IWDTree

String (CSS size)

 

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

Note

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

Event
  • onDrop(String data, String mimeType, int offset, String path, String tags)

    This event is triggered if the user drops something on the tree's root node, which must be a valid drop target for that drag-and-drop operation. Note that the event is fired on the same view element which aggregates the drop target info which governs the behavior of that drop. In other words, the event is fired on the tree itself, no matter whether one attempts to drop something right onto the tree's root node or in between existing direct children of it.

    The parameters are:

    • data : The data specified for the drag source.
    • mimeType : the mime type specified for the drag source.
    • offset : the position relative to the index, the user has dropped the object onto.
      • -1 : just above the item specified by the index
      • 0 : right onto the item specified by the index
      • +1 : just below the item specified by the index.
    • path : The tree node is described by a path to the node element representing it. Declare an action and event handler parameter of type IWDNodeElement (or one of your own node element classes) along with a suitable parameter mapping; then the path will be automatically transformed into a node element instance.
    • tags : the tags defined for the drag source

    More information: Implementing Drag and Drop