The TreeView Table control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / TreeView Table control

Overview of the TreeView Table control
How to?
Creating a TreeView Table control
Control characteristics
TreeView column
Handling the nodes of the tree structure through programming
Vocabulary
Swapping the Table/TreeView Table controls

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

The TreeView Table control

Overview of the TreeView Table control

The TreeView Table control is a cross between the Table control and the TreeView control.

This control is based on the structure of a Table control (column, row, cell) but it also contains a TreeView column that introduces the notion of tree structure. This notion does not exist in a Table control.

The columns of a TreeView Table control and the columns of a Table control have the same characteristics.

In WINDEV, the TreeView column of a TreeView Table control can also be a container column.

A TreeView Table control allows you to perform a single selection or a multiple selection as well as a sort on the columns (sort by level, among sibling elements).

The information displayed in the TreeView Table control can:

be defined programmatically: this is referred to as TreeView Table control populated programmatically.
come from a variable: this is referred to as TreeView Table control based on a variable.
come from a data file or query : this is referred to as Browsing TreeView Table. Only the browsing TreeView Table controls loaded in memory are available. In this case, the control handles the records of the data file loaded in memory.

How to?

Creating a TreeView Table control

To create a TreeView Table control:

On the "Creation" tab, in the "Data" group,
- expand "Table and List Box" and select "TreeView Table".
- expand "Table" and select "TreeView Table". The TreeView Table control creation wizard starts. This wizard is used to:
  select the data source for the TreeView Table control.
  select the specific parameters of the TreeView Table control.
Click where the control will be created in the window or page.

Remark: The dimensions of the control are optimized to take up the available space at the specified position. If the control size does not suit you, press Ctrl + Z: the control size will be reset to default.

Control characteristics

To view the characteristics of the control, select "Description" in the context menu. There are two types of information:

the information regarding the entire TreeView Table control (all you have to do is select the name of the control).
the information regarding each column of the TreeView Table control (all you have to do is select the name of a column).

Table and TreeView Table controls, as well as their columns, share most of their characteristics.

TreeView Table controls include the following option: "Expand by clicking the row". If this option is checked, the hierarchy can be expanded by clicking on the row (and not only on the expand icon).

Special case: "Android/iOS selection mode" option selected ("UI" tab of the control description window):

If the "Expand by clicking the row" option is enabled, the "Select a row" event is not called when the user clicks the row (if it is a node) and the value of the control does not change. The "Collapsing/Expanding" event of a node is called. In this event, the value of the control (Value property) corresponds to the row clicked.
If the "Expand by clicking the row" option is not enabled, the "Select a row" event is not called when the "+" and "-" buttons are clicked (if it is a node). The "Collapsing/Expanding" event of a node is called. In this event, the value of the control (Value property) corresponds to the row clicked.

For more details on the characteristics of Table controls, see:

For more details on TreeView Table controls, see:

TreeView column

To choose the column that will display the hierarchy:

Open the TreeView Table control description window.
In the "General" tab, enter the number of the desired column in "Number of TreeView column".

Handling the nodes of the tree structure through programming

To modify the images of the treeview nodes in a TreeView Table control, use the following properties:

ExpandedImage to modify the images of expanded nodes.
CollapsedImage to modify the images of collapsed nodes.

For more details on how to handle TreeView Table controls programmatically, see Handling TreeView Table controls programmatically.

Vocabulary

To easily handle a TreeView Table control, you must be familiar with the following vocabulary:

Name	Definition

Selection bar	Used to view the selected element. A specific color is used in most cases.
Branch	Part of the tree structure that can define a path: from the root to a leaf, from a node to another node, from a node to a leaf, from the root to a node.
Element	Generic name corresponding to the content of a TreeView: Root, Node or Leaf are the elements of the tree structure of a TreeView Table
Leaf	Last element of the tree structure: there is no level below.
Node	Intermediate level, can have higher levels (also called "Parent" levels) and lower levels (also called "Child" levels). Remark: the root and the leaves correspond to specific nodes.
Root	First element in the tree structure of the TreeView Table. The entire tree structure can be expanded from this element.

Swapping the Table/TreeView Table controls

A Treeview Table control can be automatically transformed into a Table control and conversely:

Select the TreeView Table control to transform.
On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Table / TreeView Table".

Related Examples:

Unit examples (WINDEV): The TreeView Table control

[ + ] Using the "TreeView Table" control.
This control is used to organize the data found in a table in tree structure.
The user has the ability to see only the informations he is interesting it.
This example explains how to fill a treeview table, insert data, add child elements...

Training (WINDEV): WD Reflexive link

[ + ] This example presents the management of a reflexive link with the WLanguage functions.
The following topics are presented in this example:
1/ Fill a control with HFSQL content (automatic management of reflexive link).
2/ Fill by programming.

Unit examples (WINDEV): Drag and drop

[ + ] Using Drag & Drop with the WLanguage functions.
The following topics are presented in this example:
1/ How to manage Drag&Drop between WINDEV controls
2/ How to manage Drag&Drop from the Windows file explorer to a WINDEV control
Drag & Drop is used to move objects via the mouse. "Drag" consists in clicking an object and moving the mouse while keeping the left button down. "Drop" consists in releasing the left mouse button.
Drag & Drop can be used with WINDEV on the List Box, TreeView, Table and Image controls.

Unit examples (WINDEV): The Table/TreeView Table control (Progress Bar columns)

[ + ] Using a Progress Bar column as well as the ..TextProgressBar property in a Table or TreeView Table control