Back to TreeGrid home
Simple Gantt chart
A demonstration of TreeGrid application showing simple Gantt chart - timetable of tasks and their completion.
This example shows tree structure, with freedom for levels.
When row does not contain any (not deleted) children it is standard task and its data can be changed.
When row contains some (not deleted) children it is computed group task and shows summary of its children.
The Start and Date columns contains planned task duration,
Complete column contains how much is already done, the task completion is shown by red/green colors.
The Gantt chart is automatically updated whenever some cell is edited, row is added, deleted or moved (dragged by mouse).
Default colors in Gantt chart: Black is used for Gantt in automatically calculated grouped rows. White for not complete grouped rows.
Light green for compete tasks. Light red for not yet started tasks.
Dark green / dark red colors are used for tasks in progress and show the percentage of completion.
The Gantt chart is interactive:
New task bars can be created by mouse dragging on empty space, only when no task bar exists in the row.
The task bars can be resized by mouse dragging their edges.
The task bars can be deleted by resizing to zero width or ctrl + click or from right click popup menu.
The percent complete can be set by double click or from popup menu.
Here are also other examples with Gantt chart: Interactive Gantt chart, Gantt chart with 3000 rows.