ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / TreeView Table control
  • Overview
  • How to?
  • Creating a TreeView Table control based on a data file
  • Creating a TreeView Table control based on a data file
  • Defining the data sources for the TreeView Table control (control description window)
  • Defining the bindings for the columns of the TreeView Table control
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
TreeView Table control based on a data file
Overview
This type of TreeView Table control is linked to a data file or query. In this case, the TreeView Table can only be linked to a data file or query loaded in memory.
How to?
WINDEViPhone/iPad

Creating a TreeView Table control based on a data file

To create a TreeView Table control based on a data file:
  1. On the "Creation" tab, in the "Data" group, expand "Table and List Box" and select "TreeView Table".
  2. Click at the desired location to create the control.
  3. Go to the "Content" tab of the TreeView Table control description window.
    Content tab of the TreeView Table control
    In this tab you can define the different data sources of the TreeView Table control. TreeView Table controls based on a data file are linked to different data sources, used to display nested records.
    Select the population mode: "File/Query".
  4. If necessary, define the bindings of the different columns of the TreeView Table control.
WINDEV "Delayed fill of sub-levels (faster)" option
If a TreeView Table control based on a data file contains multiple elements and sub-elements, it can take quite long to populate this control.
The "Delayed fill of sub-levels (faster)" option populates each sub-level only when the user expands a level. The population time is optimized and it takes less time to populate the control the first time.
Remark: To use this option on a TreeView Table control populated programmatically, call AddChildDelayed.
WEBDEV - Server code

Creating a TreeView Table control based on a data file

To create a TreeView Table control based on a data file:
  1. On the "Creation" tab, in the "Data" group, expand "Table and List Box" and select "TreeView Table".
  2. The TreeView Table control creation wizard starts.
  3. In the wizard, select "Display data from a file or existing query". Go to the next step.
  4. Define the different data sources of the TreeView Table control. TreeView Table controls based on a data file are linked to different data sources, used to display nested records.
    Data sources of the tree structure (control creation wizard)
Remark: If this data is not specified in the wizard, it can be defined later in the "Content" tab of the control.

Defining the data sources for the TreeView Table control (control description window)

To define the data sources of the TreeView Table control:
  1. Open the control description window.
  2. In the "Content" tab, select "File/Query" if necessary.
  3. Click the "Add" button. A "<None>" data source is automatically added.
  4. Define the characteristics of this source:
    • Source: corresponds to the data file or query that will be looped through.
    • Browse: corresponds to the search key used to loop through the data source.
    • Display: corresponds to the item displayed in the first column of the TreeView Table control.
      WEBDEV - Server code Remark: For each level, you can customize the collapsed and the expanded image.
  5. If necessary, define the source of the link of the previous level. For example, if the first level loops through the Customer data file, the second one can loop through the Orders data file. The items that will be used to set the relation are "Customer.CustomerID" and "Orders.CustomerID". By default, the source of the link is automatically deduced from the items and links defined in the analysis.
  6. Define as many sources as necessary.
The first column of the TreeView Table control displays the data from the selected sources.
Special case: Recursive TreeView Table control based on a data file
A TreeView Table control based on a data file can display records that depend on the previous record (standard case of a recursive relationship to manage parents / children, for example)
Example of recursive TreeView Table control
To use this type of TreeView Table control, you can set a reflexive relationship in the "Content" tab of the control description window.
The "root" rows are associated with a record for which the bound item corresponds to 0 or empty (according to the type of item).

Defining the bindings for the columns of the TreeView Table control

By default, the first column of the TreeView Table control (column representing the hierarchy) displays the elements specified in the data sources ("Content" tab, value set in the "Display" field of the different data sources).
The TreeView Table control can also display other data in its other columns.
To define the bindings of the different columns:
  1. If necessary, create a new column ("New" in the description window of the TreeView Table control) or select an existing column.
  2. Go to the "Binding" tab and define the desired data binding. The binding can be:
    • single-file: in this case, the binding can be set to one of the source files of the TreeView Table control.
      If one of the records displayed in the TreeView Table control is modified, the changes reflect automatically in the associated data file.
    • multi-file: in this case, the binding can be set to a data file related to a source file.
      If one of the records displayed in the TreeView Table control is modified, the changes do not reflect automatically in the associated data file. It must be managed programmatically.
  3. Validate.
Minimum version required
  • Version 14
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 06/09/2022

Send a report | Local help