Skip to content

Commit 90265bb

Browse files
committed
[update] api, add a draft for inbuilt timeline extra elements guide
1 parent f049594 commit 90265bb

16 files changed

+153
-47
lines changed

data/api/gantt_onafterunselect_event.md

Lines changed: 0 additions & 17 deletions
This file was deleted.

data/api/refs/gantt.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Gantt API
1515
- api/gantt_addshortcut.md - adds a new keyboard shortcut
1616
- api/gantt_addtask.md - adds a new task
1717
- api/gantt_addtasklayer.md - displays an additional layer with custom elements for a task in the timeline area
18-
- api/gantt_adjusttaskheightforbaselines.md -
18+
- api/gantt_adjusttaskheightforbaselines.md - adjusts the task's row height for proper display of baseline elements
1919
- api/gantt_alert.md - calls an alert message box
2020
- api/gantt_assert.md - if the specified expression is false, an errorMessage is shown in the red popup at the top right corner of the screen
2121
- api/gantt_attachevent.md - attaches the handler to an inner event of dhtmlxGantt
@@ -227,7 +227,6 @@ Gantt API
227227
- api/gantt_onafterquickinfo_event.md - fires after the pop-up edit form is closed
228228
- api/gantt_onafterredo_event.md - fires after the redo() method was called
229229
- api/gantt_onafterrowresize_event.md - fires after resizing of the row height is finished
230-
- api/gantt_onafterselect_event.md -
231230
- api/gantt_onaftersort_event.md - fires after tasks are sorted in the grid
232231
- api/gantt_onaftertaskadd_event.md - fires after the user adds a task to the Gantt chart
233232
- api/gantt_onaftertaskautoschedule_event.md - fires for each task which has been autoscheduled
@@ -236,7 +235,6 @@ Gantt API
236235
- api/gantt_onaftertaskmove_event.md - fires after a task was moved to a new vertical position
237236
- api/gantt_onaftertaskupdate_event.md - fires after the user updates a task
238237
- api/gantt_onafterundo_event.md - fires after the undo() method was called
239-
- api/gantt_onafterunselect_event.md -
240238
- api/gantt_onajaxerror_event.md - fires if the server returns an error
241239
- api/gantt_onautoschedulecircularlink_event.md - fires if some dependency loops were found during auto scheduling
242240
- api/gantt_onbeforeautoschedule_event.md - fires before auto scheduling
@@ -353,7 +351,7 @@ Gantt API
353351
- api/gantt_autosize_config.md - forces the Gantt chart to automatically change its size to show all tasks without scrolling
354352
- api/gantt_autosize_min_width_config.md - sets the minimum width (in pixels) that the Gantt chart can take in the horizontal 'autosize' mode
355353
- api/gantt_bar_height_config.md - sets the height of task bars in the timeline area
356-
- api/gantt_baselines_config.md -
354+
- api/gantt_baselines_config.md - configures the functionality of baselines in the Gantt chart
357355
- api/gantt_branch_loading_config.md - enables dynamic loading in the Gantt chart
358356
- api/gantt_branch_loading_property_config.md - specifies that the task has children that are not yet loaded from the backend
359357
- api/gantt_buttons_left_config.md - stores a collection of buttons resided in the left bottom corner of the lightbox
@@ -370,7 +368,7 @@ Gantt API
370368
- api/gantt_date_format_config.md - sets the date format that is used to parse data from a data set and to send dates back to the server
371369
- api/gantt_date_grid_config.md - sets the format of dates in the "Start time" column of the table
372370
- api/gantt_date_scale_config.md - sets the format of the time scale (X-Axis)
373-
- api/gantt_deadlines_config.md -
371+
- api/gantt_deadlines_config.md - enables or disables the display of deadline elements for tasks
374372
- api/gantt_deepcopy_on_parse_config.md - defines whether gantt will perform a deep copy of data objects passed into the gantt.parse() method
375373
- api/gantt_details_on_create_config.md - 'says' to open the lightbox while creating new events by clicking the '+' button
376374
- api/gantt_details_on_dblclick_config.md - 'says' to open the lightbox after double clicking on a task
@@ -414,7 +412,7 @@ Gantt API
414412
- api/gantt_link_arrow_size_config.md - sets the size of the link arrow
415413
- api/gantt_link_attribute_config.md - sets the name of the attribute that will specify the id of the link's HTML element
416414
- api/gantt_link_line_width_config.md - sets the width of dependency links in the timeline area
417-
- api/gantt_link_radius_config.md -
415+
- api/gantt_link_radius_config.md - sets the radius for rounding corners of link lines in the timeline
418416
- api/gantt_link_wrapper_width_config.md - sets the width of the area (over the link) sensitive to clicks
419417
- api/gantt_links_config.md - stores the types of links dependencies
420418
- api/gantt_min_column_width_config.md - sets the minimum width for a column in the timeline area
@@ -516,7 +514,7 @@ Gantt API
516514
<div class='h2'>Templates</div>
517515

518516
{{api
519-
- api/gantt_baseline_text_template.md -
517+
- api/gantt_baseline_text_template.md - specifies the text displayed inside the baseline element
520518
- api/gantt_date_grid_template.md - specifies the content of columns that show dates (return `Date` values) in grid
521519
- api/gantt_drag_link_template.md - specifies the text of tooltips that are displayed when the user creates a new dependency link
522520
- api/gantt_drag_link_class_template.md - specifies the CSS class that will be applied to the pop-up that appears when a user drags a link

data/api/refs/gantt_events.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ Events
1313
- api/gantt_onafterquickinfo_event.md - fires after the pop-up edit form is closed
1414
- api/gantt_onafterredo_event.md - fires after the redo() method was called
1515
- api/gantt_onafterrowresize_event.md - fires after resizing of the row height is finished
16-
- api/gantt_onafterselect_event.md -
1716
- api/gantt_onaftersort_event.md - fires after tasks are sorted in the grid
1817
- api/gantt_onaftertaskadd_event.md - fires after the user adds a task to the Gantt chart
1918
- api/gantt_onaftertaskautoschedule_event.md - fires for each task which has been autoscheduled
@@ -22,7 +21,6 @@ Events
2221
- api/gantt_onaftertaskmove_event.md - fires after a task was moved to a new vertical position
2322
- api/gantt_onaftertaskupdate_event.md - fires after the user updates a task
2423
- api/gantt_onafterundo_event.md - fires after the undo() method was called
25-
- api/gantt_onafterunselect_event.md -
2624
- api/gantt_onajaxerror_event.md - fires if the server returns an error
2725
- api/gantt_onautoschedulecircularlink_event.md - fires if some dependency loops were found during auto scheduling
2826
- api/gantt_onbeforeautoschedule_event.md - fires before auto scheduling
@@ -131,7 +129,6 @@ Events
131129
- api/gantt_onafterquickinfo_event.md
132130
- api/gantt_onafterredo_event.md
133131
- api/gantt_onafterrowresize_event.md
134-
- api/gantt_onafterselect_event.md
135132
- api/gantt_onaftersort_event.md
136133
- api/gantt_onaftertaskadd_event.md
137134
- api/gantt_onaftertaskautoschedule_event.md
@@ -140,7 +137,6 @@ Events
140137
- api/gantt_onaftertaskmove_event.md
141138
- api/gantt_onaftertaskupdate_event.md
142139
- api/gantt_onafterundo_event.md
143-
- api/gantt_onafterunselect_event.md
144140
- api/gantt_onajaxerror_event.md
145141
- api/gantt_onautoschedulecircularlink_event.md
146142
- api/gantt_onbeforeautoschedule_event.md

data/api/refs/gantt_methods.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Methods
1111
- api/gantt_addshortcut.md - adds a new keyboard shortcut
1212
- api/gantt_addtask.md - adds a new task
1313
- api/gantt_addtasklayer.md - displays an additional layer with custom elements for a task in the timeline area
14-
- api/gantt_adjusttaskheightforbaselines.md -
14+
- api/gantt_adjusttaskheightforbaselines.md - adjusts the task's row height for proper display of baseline elements
1515
- api/gantt_alert.md - calls an alert message box
1616
- api/gantt_assert.md - if the specified expression is false, an errorMessage is shown in the red popup at the top right corner of the screen
1717
- api/gantt_attachevent.md - attaches the handler to an inner event of dhtmlxGantt

data/api/refs/gantt_props.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Properties
1818
- api/gantt_autosize_config.md - forces the Gantt chart to automatically change its size to show all tasks without scrolling
1919
- api/gantt_autosize_min_width_config.md - sets the minimum width (in pixels) that the Gantt chart can take in the horizontal 'autosize' mode
2020
- api/gantt_bar_height_config.md - sets the height of task bars in the timeline area
21-
- api/gantt_baselines_config.md -
21+
- api/gantt_baselines_config.md - configures the functionality of baselines in the Gantt chart
2222
- api/gantt_branch_loading_config.md - enables dynamic loading in the Gantt chart
2323
- api/gantt_branch_loading_property_config.md - specifies that the task has children that are not yet loaded from the backend
2424
- api/gantt_buttons_left_config.md - stores a collection of buttons resided in the left bottom corner of the lightbox
@@ -35,7 +35,7 @@ Properties
3535
- api/gantt_date_format_config.md - sets the date format that is used to parse data from a data set and to send dates back to the server
3636
- api/gantt_date_grid_config.md - sets the format of dates in the "Start time" column of the table
3737
- api/gantt_date_scale_config.md - sets the format of the time scale (X-Axis)
38-
- api/gantt_deadlines_config.md -
38+
- api/gantt_deadlines_config.md - enables or disables the display of deadline elements for tasks
3939
- api/gantt_deepcopy_on_parse_config.md - defines whether gantt will perform a deep copy of data objects passed into the gantt.parse() method
4040
- api/gantt_details_on_create_config.md - 'says' to open the lightbox while creating new events by clicking the '+' button
4141
- api/gantt_details_on_dblclick_config.md - 'says' to open the lightbox after double clicking on a task
@@ -79,7 +79,7 @@ Properties
7979
- api/gantt_link_arrow_size_config.md - sets the size of the link arrow
8080
- api/gantt_link_attribute_config.md - sets the name of the attribute that will specify the id of the link's HTML element
8181
- api/gantt_link_line_width_config.md - sets the width of dependency links in the timeline area
82-
- api/gantt_link_radius_config.md -
82+
- api/gantt_link_radius_config.md - sets the radius for rounding corners of link lines in the timeline
8383
- api/gantt_link_wrapper_width_config.md - sets the width of the area (over the link) sensitive to clicks
8484
- api/gantt_links_config.md - stores the types of links dependencies
8585
- api/gantt_min_column_width_config.md - sets the minimum width for a column in the timeline area

data/api/refs/gantt_templates.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Templates
44
=======
55

66
{{api
7-
- api/gantt_baseline_text_template.md -
7+
- api/gantt_baseline_text_template.md - specifies the text displayed inside the baseline element
88
- api/gantt_date_grid_template.md - specifies the content of columns that show dates (return `Date` values) in grid
99
- api/gantt_drag_link_template.md - specifies the text of tooltips that are displayed when the user creates a new dependency link
1010
- api/gantt_drag_link_class_template.md - specifies the CSS class that will be applied to the pop-up that appears when a user drags a link

data/desktop/baselines.md

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
1-
Extra Elements in Timeline Area
1+
Custom Elements in Timeline Area
22
==========================================
33

44
{{pronote This functionality is available only in the PRO edition}}
55

6-
Common description
7-
------------------------------------------
8-
9-
By default, dhtmlxGantt renders elements of the timeline area as layers and does it in the following order:
10-
11-
1. Timeline's grid
12-
2. Links
13-
3. Tasks
14-
15-
Displaying additional elements, such as a baseline or deadline marker, is usually done by creating a displayable layer and placing custom elements there
16-
(using the absolute positioning to put custom elements next to the related task).
6+
dhtmlxGantt provides the [built-in functionality](desktop/inbuilt_baselines.md) that allows rendering such extra elements as baselines,
7+
deadlines and task constraints by default. In case, you need to extend or modify the default features, you can add custom elements into timeline manually as described below.
178

189
**To add one more layer to the timeline area**, use the api/gantt_addtasklayer.md method. As a parameter, the method takes a function that:
1910

data/desktop/inbuilt_baselines.md

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
Extra Elements in Timeline
2+
================================
3+
4+
{{pronote This functionality is available only in the PRO edition}}
5+
6+
7+
By default, dhtmlxGantt renders elements of the timeline area as layers and does it in the following order:
8+
9+
1. Timeline's grid
10+
2. Links
11+
3. Tasks
12+
13+
Displaying additional elements, such as a baseline or deadline marker, is usually done by creating a displayable layer and placing custom elements there
14+
(using the absolute positioning to put custom elements next to the related task).
15+
16+
Baselines
17+
----------------
18+
19+
In project management tools like Gantt charts, baselines are essential for comparing the planned project timeline with the actual progress.
20+
Gantt API provides built-in support for baseline entities, greatly simplifying the work with this important element.
21+
22+
![Inbuilt baselines](desktop/inbuilt_baselines.png)
23+
24+
### Loading Baselines with Tasks
25+
26+
Baselines can be loaded directly alongside tasks, streamlining data management and display. Check the example below:
27+
28+
~~~js
29+
gantt.parse({
30+
tasks: [
31+
{
32+
id: 2,
33+
start_date: "2025-04-04 00:00:00",
34+
duration: 2,
35+
text: "Task #1",
36+
progress: 0.5,
37+
parent: 0,
38+
open: true,
39+
end_date: "2025-04-06 00:00:00",
40+
},
41+
// Additional tasks...
42+
],
43+
links: [],
44+
baselines: [ /*!*/
45+
{ /*!*/
46+
id: 2, /*!*/
47+
task_id: 2, /*!*/
48+
start_date: "2025-04-03 00:00:00", /*!*/
49+
duration: 2, /*!*/
50+
end_date: "2025-04-05 00:00:00", /*!*/
51+
}, /*!*/
52+
// Additional baselines... /*!*/
53+
], /*!*/
54+
});
55+
~~~
56+
57+
Once baselines are loaded, Gantt will automatically display them in the timeline without any additional configuration.
58+
59+
{{sample 04_customization/15_baselines.html}}
60+
61+
### Using the lightbox
62+
63+
You can manage baselines via the lightbox control. Adding, editing and deleting baselines is avalable directly from the task details.
64+
65+
~~~js
66+
gantt.config.lightbox.sections = [
67+
{ name: "description", height: 38, map_to: "text", type: "textarea", focus: true },
68+
{ name: "time", type: "duration", map_to: "auto" },
69+
{ name: "baselines", height: 100, type: "baselines", map_to: "baselines" }, /*!*/
70+
];
71+
~~~
72+
73+
![Baseline lightbox](desktop/baselines_lightbox.png)
74+
75+
### Baseline Rendering Modes
76+
77+
Gantt offers three modes for displaying baselines. You can choose the rendering mode that suits best for your needs
78+
by setting the **gantt.config.baselines.render_mode** configuration option to the corresponding value. There are three modes available:
79+
80+
- Same row as task ("taskRow")
81+
82+
Baselines are displayed directly on the same row as the task bars:
83+
84+
~~~js
85+
gantt.config.baselines.render_mode = "taskRow";
86+
~~~
87+
88+
![Task row mode](desktop/baselines_task_row.png)
89+
90+
- Separate subrow below task ("separateRow")
91+
92+
All baselines are rendered on a single subrow below each task:
93+
94+
~~~js
95+
gantt.config.baselines.render_mode = "separateRow";
96+
~~~
97+
98+
![Subrow mode](desktop/baselines_subrow.png)
99+
100+
- Individual subrows for each baseline ("individualRow")
101+
102+
Each baseline is displayed on its subrow for maximum clarity:
103+
104+
~~~js
105+
gantt.config.baselines.render_mode = "individualRow";
106+
~~~
107+
108+
![Individual row mode](desktop/baselines_individual_row.png)
109+
110+
Deadlines and constraints
111+
--------------------------
112+
113+
In project management, tracking deadlines and understanding task constraints are vital for timely delivery.
114+
DHTMLX Gantt comes with built-in visualization for deadlines and constraints, enhancing the ability to manage project timelines effectively.
115+
116+
### Deadlines visualization
117+
118+
Gantt supports a numeric **task.deadline** field. When specified, it displays a visual indicator on the chart, thereby simplifying the tracking of task deadlines.
119+
120+
~~~js
121+
gantt.parse({
122+
data: [
123+
{
124+
id: 1,
125+
text: "Task with Deadline",
126+
start_date: "2025-04-04",
127+
duration: 5,
128+
deadline: new Date(2025, 3, 10), // April 10, 2025 /*!*/
129+
},
130+
// Additional tasks...
131+
],
132+
});
133+
~~~
134+
135+
![Deadlines](desktop/deadlines.png)
136+
137+
{{sample 04_customization/14_deadline.html}}

data/desktop/task_bars.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ Configuring Tasks
1414
- desktop/multiselection.md
1515
- desktop/working_time.md
1616
- desktop/critical_path.md
17+
- desktop/inbuilt_baselines.md
1718
- desktop/baselines.md
1819
- desktop/milestones.md
1920
- desktop/tooltips.md

data/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ Start
99
<ul>
1010
<li><a href="desktop/custom_skins.md">Skins customization with CSS variables</a></li>
1111
<li><a href="desktop/skins.md#darkskin">New Dark skin</a></li>
12-
<li><a href="desktop/baselines.md">Built-in support for Baselines</a></li>
13-
<li><a href="desktop/custom_projects_dates.md">Manually Scheduled Projects</a></li>
12+
<li><a href="desktop/baselines.md">Built-in support for baselines</a></li>
13+
<li><a href="desktop/custom_projects_dates.md">Manually scheduled projects</a></li>
1414
</ul>
1515

1616
<p class='action_buttons'>

0 commit comments

Comments
 (0)