To work with data in the Gantt chart, you need to know how to get the object or id of a data item. Firstly, most methods take the data object/id as a parameter. Secondly, any data-related code scenario can't be implemented without referring to the data object/id.
To learn about available tree-related methods for tasks, refer to the Task Parent/Child article.
To get a task object, use the getTask method:
gantt.getTask("t1");
//->{id:"t1", text:"Task #5", start_date:"02-09-2020", duration:28,
// progress:0.6, parent:"pr_2", $source:[3,5], $target:[2,1], ...}
To get the parent of a task, use the getParent method or the parent property of the task's object:
gantt.getParent("t1"); //->"pr_2".If there is no parent, the method returns the root id
//or
var taskObj = gantt.getTask("t1"); //-> {id:"t1", text:"Task #5", parent:"pr_2", ...}
var taskParent = taskObj.parent; //-> "pr_2"
To see all methods related to the tree nature of the Gantt chart, read the Task Parent/Child article.
For details about how to get all links connected to a specific task, see the Getting the Link Object/Id article.
To get the duration of a task, use the calculateDuration method:
gantt.calculateDuration(new Date(2020,03,30),new Date (2020,04,02)); // ->16
The method won't work after only changing the duration parameter and updating the task object. To make it work, you also need to update the end_date parameter via the calculateEndDate method. Check the example.
Note, if the work_time option is enabled, the calculateDuration method calculates the task's duration in working time.
To get the height of the DOM element of the task, use the getTaskBarHeight method:
gantt.config.bar_height = 45;
gantt.render();
gantt.getTaskBarHeight(1); // -> 45
The return value can also match the value specified to the bar_height property of the task object:
var tasks = {
data:[
{ id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18,
progress: 0.4, open: true, bar_height: "full", row:height: 50 },
{ id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8,
progress: 0.6, parent: 1, bar_height: 25, row:height: 50 },
]
};
gantt.init("gantt_here");
gantt.parse(tasks);
gantt.getTaskBarHeight(1); // -> 45
gantt.getTaskBarHeight(2); // -> 25
Note, if the bar_height property is specified to "full", the method calculates the height of the task bar in pixels.
To get the end date of a task, use the calculateEndDate method:
gantt.calculateEndDate(new Date(2020,03,30),48,"hour"); //-> Thu May 07 2020 17:00:00
Note, if the work_time option is enabled, the method considers duration as a working time.
To get the currently selected task, use the getSelectedId method:
gantt.selectTask("t_1");
gantt.getSelectedId(); //-> "t_1" - the id of the selected task
To get a collection of tasks that occur during the specified period, use the getTaskByTime method:
var tasks = gantt.getTaskByTime(new Date(2020,03,05),new Date(2020,03,15));
// where tasks is an array of tasks' objects
To get all tasks presented in the Gantt chart, use the getTaskByTime method as in:
var tasks = gantt.getTaskByTime(); //returns all tasks as an array of objects
You can also call the serialize method.
To get links related to a task, use the $source, $target properties of the task object. The properties are autogenerated and store ids of the related links:
var taskObj = gantt.getTask("t1");
var sourceLinks = taskObj.$source; //-> ["l1","l4"] - ids of coming-out links var targetLinks = taskObj.$target; //-> ["l5","l8"] - ids of coming-into links
To get the nearest oncoming task, use the getTaskByTime method as in:
var tasks = gantt.getTaskByTime(new Date(), new Date(9999,1,1);
// tasks - the list of all oncoming tasks
tasks.sort(function(a,b){ return (a.start_date > b.start_date ? 1 : -1); });
// tasks[0] - the nearest oncoming event
Generally, you can get the id of a task from the "data" object of the data set.
{
tasks:[
{id:1, text:"Task #1", start_date:"01-04-2020", duration:18, progress:0.4}, {id:2, text:"Task #2", start_date:"02-04-2020", duration:8, progress:0.6} ],
links:[...]
}
If you can't get the task's id from the data set, use the getTaskByTime method as in:
var tasks = gantt.getTaskByTime(); //returns all tasks
for(var i=0;i < tasks.length; i++){ //goes over all tasks to find the one needed
if (tasks[i].text == "Task #3")
var taskId = tasks[i].id;
};
If you know an approximate time when the needed task occurs, you'd better limit the returned collection of tasks in order to increase the app speed:
var tasks = gantt.getTaskByTime(new Date(2020,05,01),new Date(2020,05,10));
for(var i=0;i < tasks.length; i++){
if (tasks[i].text == "Task #3")
var taskId = tasks[i].id;
};
To change the current id of a task, use the changeTaskId method:
gantt.changeTaskId("t1", "t11"); //changes the task id from "t1" to "t11"
The open state of a task branch is defined by the task.$open property, which is available after tasks are loaded into gantt. Once the value is modified, the changes will be displayed after the next repainting of the gantt:
// expand all branches
gantt.eachTask(function(task){
task.$open = true;
});
gantt.render();
// collapse all branches
gantt.eachTask(function(task){
task.$open = false;
});
gantt.render();
In order to open/close a single task, you can use the open and close methods. They'll change the inner state of the task and invoke repainting. However, to modify many tasks, it's better to work with task.$open directly in order to avoid unnecessary repaintings.
Follow the examples given in the How to copy and paste tasks section.
Back to top