ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

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
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
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.
WINDEV 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.
  • WINDEV come from a variable: this is referred to as TreeView Table control based on a variable.
  • WINDEVWEBDEV - Server codeiPhone/iPad 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:
  1. On the "Creation" tab, in the "Data" group,
    • WINDEVAndroidiPhone/iPad expand "Table and List Box" and select "TreeView Table".
    • WEBDEV - Server code 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.
  2. 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.
WINDEVAndroidiPhone/iPad 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).
AndroidiPhone/iPad 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:
  1. Open the TreeView Table control description window.
  2. 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:
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:
NameDefinition
Selection barUsed to view the selected element. A specific color is used in most cases.
BranchPart 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.
ElementGeneric name corresponding to the content of a TreeView: Root, Node or Leaf are the elements of the tree structure of a TreeView Table
LeafLast element of the tree structure: there is no level below.
NodeIntermediate 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.
RootFirst 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:
  1. Select the TreeView Table control to transform.
  2. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Table / TreeView Table".
Related Examples:
The TreeView Table control 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...
WD Reflexive link 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.
Drag and drop 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.
The Table/TreeView Table control (Progress Bar columns) 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
Minimum version required
  • Version 11
This page is also available for…
Comments
Video TreeView Table Control
https://youtu.be/YVpI0kagEN8

https://windevdesenvolvimento.blogspot.com/2018/12/dicas-1972-publica-windev-tabela-87.html


amarildo
06 Apr. 2019
Video TreeView
https://youtu.be/uRfh6Xhu8u0
amarildo
15 Jul. 2018

Last update: 06/22/2023

Send a report | Local help