Treeview based on select-tree

Tree-view is one of the most complex topics in totum. Therefore, we study it in two stages.

First — folders and values in one table. To format a table as a tree, we need to:

1. Create a field in the row part of type String for the folder/element name.

2. Create a field of type Tree with name — tree.

3. Fill in the select code:

   
   =: selectRowListForTree(table: $#ntn; field: 'nazvanie'; parent: $#nf; order: 'nazvanie' asc)
   
   

4. Ensure that the parameters tree is built from one table and folders can be selected are enabled.

At this point, you can save and see what happens. When adding, we fill in the name, and in the tree field, we can select a parent for the row.

Add several rows this way. If tree remains empty, it means that this row will be at the top level.

5. Next, go to the tree settings and enable the parameter tree table type with the value by this table. Also, set Load all and Open all.

6. Now we need to format the tree field. Copy this code there and set the field width to 200:

   // Remove paths and add background color
   f1=: setFormat(text: " "; background: "whitesmoke"; editbutton: true)
   
   // Disable expansion for empty folders and replace their icon
   f2=: setFormat(condition: #id != $sel; icon: "folder-o";  expand: false)
       sel: selectList(table: $#ntn; field: 'tree')
   
   // Hide the tree field from the panel
   f3=: setFormat(hide: "extpanel" = true) 
   
   

tree

Tree table type.

This means that the tree structure and the final values are in the same table.

Yes, through code formatting. Use the reference provided above as a sample.

This means that the tree is stored in one table, and its values in another.

For the example, we use the first table as the source of the tree and create another one with values.

1. Create another table.

2. Create a couple of fields in the row part where the values will be.

3. Create a field with name = tree with the type Select-tree. In the select code, write:

   =: selectRowListForTree(table: 'table_tree_1'; field: 'title'; parent: 'tree'; order: 'title' asc)
   
   

   Turn on the settings tree is built by one table and folders can be selected because the tree in the table_tree_1 is built by ONE! table.

4. Now we can add several rows with values, choosing in which folders they will be located. Nothing complicated.

5. Turn on the parameter tree table type with the value by another table because the tree from table_tree_1 is in another table. Also, set Load all and Open all.

6. Immediately add formatting to the tree field and set its width to 80:

   
   f1=: setFormat(editbutton: true; text: " "; background: "whitesmoke")
   
   

7. Make an automatic indent for the values in the first field on the left with values:

   
   f1=: setFormat(tab: $count)
   
   count:  #l.tree * 22
   
   

If we want to show not the entire tree, but only a part of it, we need to pass a list of roots to the tree code.

These are the bases (by default id) of those parent elements that should be at the top level.

For this, an additional field with name = tree_category is added.

In the field, either by code or manually, a value corresponding to the id or bfield of the folder that the row corresponds to should be selected.

Please note that the parent category is specified in the tree field, so the values in tree and tree_category differ by one level.

For correct operation, the tree_category field must be visible to the user. It can be hidden by default.