A responsive data tree control. Use this control to show tree data structures with a depth > 2 and/or many items. For navigation purposes use the BMOBILE:NAVMENU control instead.
When a node is opened, the control also supports dynamically loading subtrees: Set
property dynamicloading="true".
In case the subnodes of the opened node have not yet been loaded, the built-in event
value-of-valueprop.reactOnToggle will be triggered.
To switch on multiselection, set property
singleselect="false".
As default, the event value-of-valueprop.reactOnSelect is sent
to Natural when an item is selected or unselected. When the escape key is pressed, all
items will be deselected. In this case the event
value-of-valueprop.reactOnClearSelection is sent to Natural.
To prevent neither events from being sent to Natural on each selection change, set the
property triggerserver="false".
For a BMOBILE:DATATREE control with valueprop="mytree"
the following adapter interface is generated:
1 MYTREE (1:*) 2 LEVEL (I4) /* level starts with 1 2 OPENED (I4) /* 0: closed, 1: opened, 2: end node 2 SELECTED (L) /* TRUE or FALSE whether the item is selected 2 TEXT (A) DYNAMIC /* text of the node
You can dynamically set tooltip texts on nodes from within your Natural program. For a BMOBILE:DATATREE with the following property settings ...
<bmobile:datatree valueprop="mytree" titleprop="mytooltip" ...
the following adapter interface is generated:
1 MYTREE (1:*) 2 LEVEL (I4) /* level starts with 1 2 MYTOOLTIP (A) DYNAMIC 2 OPENED (I4) /* 0: closed, 1: opened, 2: end node 2 SELECTED (L) /* TRUE or FALSE whether the item is selected 2 TEXT (A) DYNAMIC /* text of the node
value-of-valueprop.reactOnSelect
|
triggered when the selection on nodes changes in the user interface |
value-of-valueprop.reactOnToggle |
triggered when the |
value-of-valueprop.reactOnClearSelection |
triggered when the escape key is pressed and all items are deselected |
Optionally, reacting to double click events is possible:
Set property ondblclickmethod=”myondblclick”. This will
trigger value-of-valueprop.myondblclick when a node is double
clicked.
| Basic | |||
| comment |
Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. |
Optional | |
| valueprop |
Name of the adapter parameter that provides the content of the control. |
Obligatory | |
| triggerserver |
Per default the event reactOnSelect is sent to Natural when the selection of an item is changed. Set this property to "false" if you don't want this event to be sent. |
Optional |
true false |
| openonselect |
If set to TRUE not only a click on the corresponding icons but also the selection of the text will automatically open the tree node. Default is TRUE. |
Optional |
true false |
| Binding | |||
| valueprop | (already explained above) | ||
| titleprop |
Name of the adapter parameter that dynamically defines the title of the control. The title is displayed as tool tip when ther user moves the mouse onto the control. |
Optional | |
| ondblclickmethod |
Name of the event that is sent to the adapter when the user double clicks. |
Optional | |
| Appearance | |||
| styleclasses |
CSS style classes separated by a blank. |
Optional |
bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light |
| style |
CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. |
Optional | |
| title |
Text that is shown as tooltip for the control. Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal. |
Optional | |
| dynamicloading |
If set to "true" then you indicate to the tree control that not all tree information may be loaded when initializing the tree (i.e. the tree collection on server side). As consequence the tree control will pass the "toggle-event" to the server - in case the subnodes of a certain nodes are not yet loaded. In the case the toggle event is passed to the server, the method onToggle() is called inside the tree item. |
Optional |
true false |
| hscroll |
Set this property if you did define a limitted width for the surrounding container. Default is that contents is cut ("hidden"). You can define that scrollbars are shown if the content is exceeding the control's container ("auto"). Or scrollbars can be shown always ("scroll"). |
Optional |
auto scroll hidden |
| size |
Set this property to render the tree smaller or larger. Valid values are "sm" and "lg". |
Optional |
sm lg |
| singleselect |
If set to "true" then only one item can be selected. If set to "false" then multiple icons can be selected. |
Optional |
true false |
| iconclassopened |
Icon of a tree node that has subnodes and that is currently showing its nodes. The icon is defined as css class. You can use the Bootstrap Icons library. Example: bi-folder2-open. |
Optional | |
| iconclassclosed |
Icon of a tree node that has subnodes and that is currently not showing its nodes. The icon is defined as css class. You can use the Bootstrap Icons library. Example: bi-folder2. |
Optional | |
| iconclassendnode |
Icon of a tree node that is an end node (leaf node). The icon is defined as css class. You can use the Bootstrap Icons library. Example: bi-file-richtext. |
Optional | |
| titlestraighttext |
If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". |
Optional |
true false |
| Miscellaneous | |||
| testtoolid |
Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification |
Optional | |