Treeview

The description of the treeview element is under construction!

This treeview example contains the same elements as childs. Other treeviews contain different childs and need of course a different headline for each element. Such an example will come in the future.

Table and records

The child records are linked by "parentID" to the master record. The records are read recursive.

Controls

Additional controls allow to expand and collapse the tree and to insert new sub elements.

User manual

Controls

Sort and Filter depends only on the main entry
New
New Sub element (Insert Child)
Edit
Delete
+ expands the tree
- collapse the tree

Menu

Collapse all
Expand all
Collapse tree
Expand tree
Sort

Prerequisites

Table

parentID
sort

Datadefinition

"parentcolumn":"parentID"
"treearrayname":"_children"
masterdata:
- "btabselectstandard":true
- menuleft:
  - collapse
  - expand

JavaScript

additional column with control
menu functions for:
- collapse
- expand
form with callback
- cbAfterSave
- cbbtnCancel

Data defintion

_workflows/workflowprocess/workflowprocess.json:

The data definition contains details for reading, saving and displaying a recordset.

CSS
"parentcolumn":"parentID"
"treearrayname":"_children"
masterdata:
- "btabselectstandard":true
- menuleft:
  - collapse
  - expand
tabulator
- "maxHeight":"100%"
- "dataTree":true,
- "dataTreeElementColumn":"title",
- "dataTreeStartExpanded":true,,

Allow the user to change the parent

Developer

JavaScript:

The treeview is displayed with the masterdata plugin.

The function k8.datadefAddtreeview() prepares the datadefinition for the treeview presentation. It sets the properties like described above.

Parent title

Second datadefinition: k8menusolo.json

A second datadefinition for reading the titles is necessary.

The treeview datadefinition needs to be extended manually like described below.

Extensions to the datadefinition:

{
  "parenttitlecolumn":"title",
  "sortcolumn":"sort",
  "settingsadditional":["k8menusolo"],
  "masterdata": {
    "sql_orderby":"sort",
    "sql_additionals": {
      "select": {
        "parenttitle": "parent_menuentries.title"
      },
      "from": {
        "parent_menuentries": {
          "table": "k8menuentries",
          "expression": "parent_menuentries.IDentry=k8menuentries.parentID"
        }
      }
    }
  },
  "k8form": {
    "selector": ".js_dataform",
    "templatetype": "masterform",
    "fields": [
      {
        "name": "IDentry",
        "type": "hidden",
        "label": "IDentry"
      },
      {
        "name": "parenttitle",
        "type": "text",
        "label": "Parent  ",
        "attributes":{
          "list": "parenttitle_datalist",
          "data-fieldlist":"",
          "autocomplete": "OFF"
        },
        "datalist":{
          "datadefID":"k8menusolo",
          "IDfield":"parentID",
          "onlyoptions":false
        }
      }
    ]
  }
}

This are the adaptions:

parentitlecolumn: if not set the headtitlecolumn will be used
sortcolumn: sort
settingsadditionals: reference the datadefintion for parent title.
masterdata.sql_additionals: join the parentID to the parent title.
k8form: parenttitlecolumn as datalist field.

Sorting

New

The sort value is calculated (10 x number of records + 10).

Form: column sort

Set the sort field to a value, where you want to insert the record.

Menu: Sort

This function is added by datadefAddtreeview(). The filter parentID is set to the key of the selected row. The backend does a new sorting and the selected row is updated.