dhtmlxGantt is a fully functional Gantt chart for cross-browser and cross-platform applications. It can meet all the needs of project management applications and is the most complete Gantt chart library. It allows you to create dynamic Gantt charts and visualize project progress in a convenient graphical way. With dhtmlxGantt, you can display the dependencies between activities, display the current task status with a shadow of completion percentage, and organize activities into a tree structure.
Click to download the trial version of dhtmlxGantt
Expand/collapse task branches
To open a task branch, use the open method:
var data = {
tasks:[
{
id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
{
id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
parent:"p_1"}
]};
gantt.open("p_1");
To close the task branch, use the close method:
var data = {
tasks:[
{
id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
{
id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
parent:"p_1"}
]};
gantt.close("p_1");
Expand/collapse multiple branches
If you need to open/close multiple task branches, the fastest way is to programmatically set the required Boolean value (true-open, false-close) to the required task. $ open property, and then redraw the Gantt chart.
Expand all tasks:
gantt.eachTask(function(task){
task.$open = true;
});
gantt.render();
Collapse all tasks:
gantt.eachTask(function(task){
task.$open = false;
});
gantt.render();
Get children of the task
To get the children of a branch task, use the getChildren method:
var data = {
tasks:[
{
id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
{
id:"t_1", text:"Task #1", start_date:"02-04-2020", duration:8,
parent:"p_1"}
]};
gantt.getChildren("p_1");//->["t_1"]
To see more tree-related methods, please read the "Task Parent/Child" article.
Change the icon of the tree
Parent item
To set an icon for the parent item, use the grid_folder template:
gantt.templates.grid_folder = function(item) {
return "<div class='gantt_tree_icon gantt_folder_" +
(item.$open ? "open" : "closed") + "'></div>";
};
Child
To set the icon of the child, use the grid_file template:
gantt.templates.grid_file = function(item) {
return "<div class='gantt_tree_icon gantt_file'></div>";
};
Open/close flag
To set the icon for the open/close flag, use the grid_open template:
gantt.templates.grid_open = function(item) {
return "<div class='gantt_tree_icon gantt_" +
(item.$open ? "close" : "open") + "'></div>";
};
Set the indentation of the children in the branch
To set the indentation of the subtasks in the branch, use the grid_indent template (change the width CSS property):
gantt.templates.grid_indent=function(task){
return "<div style='width:20px; float:left; height:100%'></div>"
};
Add checkbox to tree node
To add checkboxes (or any other HTML content) to tree nodes, use the grid_blank template:
gantt.templates.grid_blank=function(task){
return "<input id='ch1' type='checkbox' onClick='someFunc()'></input>"
};
Set tree node template
To set a template for a tree node, use the template attribute in the columns attribute. The return value of the template function will be added as internal HTML. Therefore, you can use any HTML structure in the attributes.
Please note that if you do not use dhtmlxConnector to integrate with the server, you must disinfect to prevent possible XSS attacks on the data you load into the Gantt chart (dhtmlxConnector automatically completes it)
gantt.config.columns=[
{
name:"text", label:"Task name", tree:true, width:230, template:myFunc },
{
name:"start_date", label:"Start time", align: "center" },
{
name:"duration", label:"Duration", align: "center" }
];
gantt.init("gantt_here");
function myFunc(task){
if(task.priority ==1)
return "<div class='important'>"+task.text+" ("+task.users+") </div>";
return task.text+" ("+task.users+")";
};