Responsive Trees

#### Search Results

Search

# Responsive Trees

- BMOBILE:DATATREE

## BMOBILE:DATATREE

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"`.

- Adapter Interface

- Built-in Events

- Properties

### Adapter Interface

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

### Built-in Events

`value-of-valueprop.reactOnSelect` | triggered when the selection on nodes changes in the user interface
`value-of-valueprop.reactOnToggle` | triggered when the `dynamicloading` is switched on and the subnodes of the opened node have not yet been loaded
`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.

### Properties

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 |
oncontextmenumethod | Name of the event that is sent to the adapter when the user presses the right mouse button in an empty area of the client tree. | 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. specifying 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
Natural
njx:natname | If a Natural variable with a name not valid for Application Designer (for instance #FIELD1) shall be bound to the control, a different name (for instance HFIELD1) can be bound instead. If the original name (in this case #FIELD1) is then specified in this attribute, the original name is generated into the parameter data area of the Natural adapter and a mapping between the two names is generated into the PROCESS PAGE statement of the Natural adapter. This mapping must not break a once defined group structure. If for instance a grid control that is bound to a name of GRID1 contains fields that are bound to FIELD1 and FIELD2 respectively, the corresponding njx:natname values may be #GRID1.#FIELD1 and #GRID1.#FIELD2, but not #GRID1.#FIELD1 and #MYGRID1.#FIELD2. | Optional |
njx:natstringtype | If the control shall be bound to a Natural system variable of string format with the attribute njx:natsysvar, this attribute indicates the format of the string, A (code page) or U (Unicode). The default is A. | Optional |
njx:natcomment | The value of this attribute is generated as comment line into the parameter data area of the Natural adapter, before the field name. The Map Converter, for instance, uses this attributes to indicate a generated statusprop variable to which field the statusprop belongs. | Optional |
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 |