Skip to main content

Configuring the Tree Column

To know about available tree-related methods, please, refer to the Task Parent/Child article.

Expanding/collapsing a task branch​

  • 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 a 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"); /*!*/

Expanding/collapsing several branches​

If you need to open/close several task branches, the fastest way is to programatically set the corresponding boolean value (true - to open, false - to close) to the .$open property of the needed tasks and then redraw the gantt.

  • expanding all tasks:
gantt.eachTask(function(task){
    task.$open = true;
});
gantt.render();
  • collapsing all tasks:
gantt.eachTask(function(task){
    task.$open = false;
});
gantt.render();
note

If you want to collapse/expand all tasks at once with a button, go to the How to expand/collapse all tasks with a button section.

Getting the children of a 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.

Changing the tree's icons​

Parent items​

To set the icon for the parent items, use the grid_folder template:

gantt.templates.grid_folder = function(item) {
    return "<div className='gantt_tree_icon gantt_folder_" +
    (item.$open ? "open" : "closed") + "'></div>";
};

Child items​

To set the icon for the child items, use the grid_file template:

gantt.templates.grid_file = function(item) {
    return "<div className='gantt_tree_icon gantt_file'></div>";
};

Open/close sign​

To set the icon for the open/close sign, use the grid_open template:

gantt.templates.grid_open = function(item) {
    return "<div className='gantt_tree_icon gantt_" + 
    (item.$open ? "close" : "open") + "'></div>";
};

Setting the indent of children in a branch​

To set the indent of child tasks in a 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>"
};

Adding checkboxes to tree nodes​

To add the 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>"
};

Setting the template of tree nodes​

To set the template for tree nodes, use the template attribute in the columns property.

The return value of the **template'**s function will be added as an inner HTML. That's why, you can use any HTML structures in the attribute.

note

Note, if you don't use dhtmlxConnector to integrate with the server side, you have to sanitize the data you load into the Gantt chart in order to prevent possible XSS attacks (dhtmlxConnector does it automatically)

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 className='important'>"+task.text+" ("+task.users+") </div>";
    return task.text+" ("+task.users+")";
};

Template for tree nodes