Skip to main content
Version: Upcoming 🦄

TreeView

The TreeView control enables you to display complex dataSources/catalogs in a hierarchical view and offers the possibility to select and store multiple values as well as the hierarchical path of the values.

Info

The catalogs must be valid and compatible JSON represenations.

Note

If you develop locally in the FormDev environment it's best to paste the full catalog URL including the "hierarchy" part (eg. https://exampleserver.hybridforms.net/api/catalog/TreeviewCatalog/hierarchy) in your browser and add the resulting JSON response as local file to your formDefinition folder.

Minimum configuration
<div
    id="treeview_minimum"
    data-hf-control="TreeView"
    data-hf-options="{ 
        label: 'TreeView',   
        url: '/api/catalog/Hierarchietest/hierarchy',
        treeviewCtrlOptions: {
            dataTextField: 'Text',
            dataValueField: 'ID',
        },
        selectCtrlOptions:{
            placeholder: 'Open tree',
        }
    }"
></div>
Complex configuration
<div
    id="treeview_complex"
    data-hf-control="TreeView"
    data-hf-options="{ 
        label: 'TreeView',
        multiselect: true,      
        url: '/api/catalog/Hierarchietest/hierarchy?start=0001&maxlevel=3&sort=Text&select=Text,ID',
        treeviewCtrlOptions: {
            checkboxes: {
                checkChildren: true
            },
            dataTextField: 'Text',
            dataValueField: 'ID',
            selectOnlyLeaves: true,
        },
        textValueCallback: HFFormdefinition.QAFormHelpers.getTreeViewTextTemplate,
        selectCtrlOptions:{
            placeholder: 'Open tree',
        },
            onChanged: HFFormdefinition.QAFormHelpers.onTreeViewChange
    }"
></div>
Info

The TreeView control currently supports only a via URL provided datasource.

FormControl Options​

Options of the kendo components are also available. (TreeView, MultiSelect) read more

url - required​

The URL must be a HFSql server relative URL. For instance, the oData link to a HFSql server list. Note: The URL has to contain '/hierarchy' to obtain the hierarchical catalog. Possible URL paramters are:
  • start: Define the start node inside the catalog to reduce the provided items.
  • maxlevel: Define the nodes depth (levels) of the presented catalog to reduce the provided items for example show only items of the first three levels.
  • sort: Define a sort criterion according to which the items are sorted in ascending order. These sort values are used to build up the "sortpath".
  • select: Define the columns to be included in the query. Not defined the complete catalogs is queried.
How to use:
url: '/api/catalog/Hierarchietest/hierarchy?start=0001'
Type: string

doNotCopy​

Set "true" whenever the field should get deleted if the Form is copied.
How to use:
doNotCopy: true
Type: boolean

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

label​

Define a label for your control element.
How to use:
label: 'TreeView'
Type: string

list​

Set this property to "true" if data connected with this control should be a sorting/filtering/grouping option on the ListPage, is used in template objects (eg. the listTemplate) or it should show up in Admin UI listings.
How to use:
list: true
Type: boolean

listOptions​

Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them completely.
How to use:
listOptions: {...}
Type: { dialogText: string, dialogHide: boolean }

multiselect​

Set "true" whenever the user can select more than one value.
How to use:
multiselect: true
Type: boolean

onChanged​

Call a pre-defined JS-method to do something when the status of the control changes.
How to use:
onChanged: HFFormdefinition.Namespace.Method
Type: function
Signature: function(value: { id: string, text: string }[]) => void

selectCtrlOptions: {placeholder: '...'}​

Define a placeholder value - this option is obligatory.
How to use:
selectCtrlOptions: {placeholder: 'Open tree'}
Type: MultiSelectOptions

textValueCallback​

Provide a method to configure the text value, for example show the complete path of the selected item (node).
How to use:
textValueCallback: NameSpace.getTreeViewTextTemplate
Type: function
Signature: function(nodeVal: string, node: any) => string

treeviewCtrlOptions​

This array contains the options to configure the selection behaviuor of the node and its children. Default setting is no simultaneous selection of children.
How to use:
treeviewCtrlOptions: { ... }
Type: TreeViewOptions

treeviewCtrlOptions: {checkboxes: {..}}​

Set the option checkChildren to true, if you want to select all the children of a node simultaneously.
How to use:
checkboxes: { checkChildren: true } }
Type: TreeViewOptions

treeviewCtrlOptions: {dataTextField: 'Text'}​

Provide the catalog column name of the text value of the items.
How to use:
dataTextField: 'Text'
Type: TreeViewOptions

treeviewCtrlOptions: {dataValueField: 'ID'}​

Provide the catalog column name of the unique identifier (i.e.: ID or Title) of the items.
How to use:
dataValueField: 'ID'
Type: TreeViewOptions

treeviewCtrlOptions: {selectOnlyLeaves: true}​

Set the option to true to restrict the selection to the "leaves" (i.e. the end nodes of the tree). Default setting is false.
How to use:
selectOnlyLeaves: true
Type: TreeViewOptions

listOptions Object​

dialogHide​

Hide field from filter/sort/group dialogs.
How to use:
dialogHide: true
Type: boolean

dialogText​

Set custom label for filter/sort/group dialogs.
How to use:
dialogText: 'Display Text'
Type: string

Stored data

​

For each TreeView inside your Forms there are two value pairs of stored data:

First the information for the TreeView itself...

{
    "id": "treeview",
    "value": "0009"
}

...and second for the selected value:

{
    "id": "treeview_HFText",
    "value": "Punkt 3"
}