Tree Controls and Tree Node Controls

Previous Next

Tree controls and their associated tree node controls can be found under the Controls tab of the Controls Tree.

Tree views are typically used to display parent-child-grandchild-etc data. Clicking the item in the tree view will make this record the current record in the associated data source: associated fields elsewhere on the page will respond to this. This means that when you have built your tree view all you need to do is associate some fields to the data source and you are able to view and edit the data without any additional coding.

 

Summary

The components that make up a working tree view are: Tree Control, for each level in the tree a Tree Node Control, one Table Data Source for each type of root node and for each child node a Related Data source. In the tree control you specify which node is the root node. With each Node you specify which node(s) is (are) its child node. A node may be its own child node.

NOTE 1: The tree view handles the synchronization between the data sources therefore you should clear the synchronization table property of the relate on the associated related data source.

NOTE 2: It is only possible to associate a Tree Node Control with one column of a data source and this is the column that will displayed in the tree view. To display more then one column in the tree view: add an extra column to the data source and use its output expression to concatenate multiple columns: e.g. column1 || ': ' || column2. Then associate the Tree Node Control with this extra column.

Quick steps for setting up a tree view:

1.Insert a Tree Control using the controls tab of the catalog.
2.Insert A Tree Node Control for each root node and also one for each child node.
3.Name all Tree Node Controls after the data they represent by setting the name property.
4.Set the root nodes property of the Tree Control to the names of all intended root nodes.
5.Set the child property of the Tree Control to the names of the intended child nodes.
6.Insert a Table Data source for each root node and a Related data source for each child node.
7.Clear the synchronization table property for the Related data sources.
8.Associate all nodes with the data sources by setting the data source and data source item properties.

 

See Also

TreeControl

TreeNodeControl

Configuring your Web Application with USoft Web Designer and CSS