ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Gantt Chart control
  • Overview of the Gantt Chart control
  • Creating a Gantt Chart control
  • Characteristics of Gantt Chart control
  • Characteristics of Gantt chart
  • Other characteristics
  • Context menu proposed automatically
  • Customize the task area
  • Mode for filling a Gantt Chart column
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 Gantt Chart control
A Gantt chart allows you to graphically view the progress status of a project.
A Gantt chart is often used in project management or scheduling to view the different project tasks scheduled over time.
Tasks are organized in rows and time units in columns.
The dependency relationships between tasks are materialized by arrows that link the relevant tasks.
Creating a Gantt Chart control
WINDEV allows you to easily create a Gantt Chart control:
  • by creating a "Gantt Chart" Table or TreeView Table control.
  • by adding a "Gantt Chart" column into a Table or TreeView Table control.
To create a Table control containing a "Gantt Chart" column:
  1. On the "Creation" tab, in the "Graphic controls" group, expand "Time" and select "Gantt chart".
  2. Click at the desired location to create the control. The control appears in the editor.
  3. A Table control is created. This control contains:
    • a Text column,
    • a "Gantt Chart" column.
To create a TreeView Table control containing a "Gantt Chart" column:
  1. On the "Creation" tab, in the "Graphic controls" group, expand "Time" and select "TreeView Gantt chart".
  2. Click at the desired location to create the control. The control appears in the editor.
  3. A TreeView Table control is created. This control contains:
    • a Text column. This column is the hierarchy column.
    • a "Gantt Chart" column.
To add a "Gantt Chart" column into an existing Table or TreeView Table control:
  1. Open the description of the Table or TreeView Table control ("Description" in the context menu).
  2. In the upper section of the control description window:
    • Add a new column ("New").
    • Select the type of "Gantt Chart" column.
Remark: You can also create "Gantt Chart" reports. For more details, see Gantt Chart report.
Characteristics of Gantt Chart control
A Gantt Chart control being an advanced control, a specific window is required to configure its characteristics.
To display the characteristics of a "Gantt Chart" column, you can:
  • Double-click the Gantt Chart column in the window editor.
  • In the description window of the Table or TreeView Table control, select the "Gantt Chart" column. In the "General" tab, click "Options and styles of the Gantt Chart column".

Characteristics of Gantt chart

The parameters of the "Gantt Chart" column are as follows:
  • Number of days to display:
    • From the first to the last task: By default, the display is performed from the first task to the last one, the width of a day being set to 80 pixels. A horizontal scrollbar is used to scroll through the tasks if necessary.
    • According to the column width: This option is used to manage the advanced cases. For example:
      • displaying a very small period (less than 7 days). In this case, the division can be performed on an hourly basis.
      • displaying a long fixed period (more than 30 days). In this case, a button can be created to change the period displayed (GanttDateTimePosition).
  • Time display: Used to define:
    • the format of displayed date.
    • whether the hours must be displayed or not, as well as their format.
    • whether the week number must be displayed or not, as well as its format. In the format, the '%1' string corresponds to the week number. Example of format: "Wk. %1".
  • Time slot: Used to define:
    • the time slot shown: Time slot that will be shown in the control.
    • the working time slot: Time period for which a task can be defined in the Gantt chart. This time period can be modified:
  • Characteristics of a task:
    • Overlap: Managing the task overlap. The tasks can be displayed side by side or they can be slightly shifted.
    • Granularity of a task: You can define:
      • the granularity when moving a task (1 hour by default).
      • the granularity for task duration, which means the minimum duration of a task (1 hour by default).
  • Allow time range selection: Allows the user to select a period with the mouse.
  • Allow the direct input of a task: Allows the user to add a task directly. To do so, click the Gantt Chart column to create the task and type its caption with the keyboard.
The edit options via the mouse are as follows:
  • Change duration. You can allow or prevent users from changing task durations.
  • Move. You can allow (or not) the user to move a task. If this option is selected, the option "Allow users to change resources" becomes available. This option allows the user to change the resource associated with a task..
  • Allow users to overlap elements. If this option is checked, when moving tasks, the user will be able to make them overlap. In this case, the options defined for task overlap (offset or side by side) will be taken into account.
  • Reorganize other tasks when the user makes changes. This option allows you to ask for an automatic reorganization of the tasks whenever a modification is performed by the user.
Most of these parameters can be modified through programming. For more details, see Gantt Chart control properties.
Other characteristics

Context menu proposed automatically

A "GanttChart" column can display a specific context menu proposing automatic features to the user. This menu is proposed by the AAF (Automatic Application Features).
As soon as at least one task is found in the Gantt Chart, this menu allows the user to:
  • Add, delete or modify a task.
  • Link the selected task to a prerequisite task.
  • Delete all the prerequisites from a task.
  • Print the content of the Gantt chart. This option is available only if a "Gantt Chart" report was created.
For more details on the features of this context menu, see Automatic features of the "Gantt Chart" column.

Customize the task area

In the "Gantt chart" column, the task is displayed in a specific area. This area is an internal window. You have the ability to translate and customize this area (color of the title, background image of the task, ...): all you have to do is include the internal window in the project and modify it.
To customize the display of the tasks:
  1. Open the description window of the Gantt Chart column.
  2. Select the internal window used for the tasks:
    • "None": the default display mode will be used.
    • "Preset window": a preset window is automatically added to the project. By default, this window is named "IW_WinDevViewGanttTask.wdw".
  3. The internal window is available in the project explorer. It can be edited in the window editor.
    Caution: this internal window can only be used to customize the drawing regarding the task display. Only the process for declaring the global variables is run. No other process is run. Therefore, you cannot add buttons with a specific click code.
Remarks:
  • You also have the ability to use any internal window of your project.
  • The aspect of the tasks proposed by default can be configured in the "Style" tab of the control description window, in the "Task" element.
  • Tip: don't overload the internal window: if the Gantt chart contain several tasks, the rendering may become illegible or the display very slow.

Mode for filling a Gantt Chart column

A Gantt Chart column can be populated programmatically via several processes and via the WLanguage functions.
Minimum version required
  • Version 19
Comments
Click [Add] to post a comment

Last update: 06/23/2023

Send a report | Local help