Task Object/Id

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.

Task object

To get a task object, use the getTask method:

//->{id:"t1", text:"Task #5", start_date:"02-09-2020", duration:28, 
// progress:0.6, parent:"pr_2", $source:[3,5], $target:[2,1], ...}

Parent of a task

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
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.

Links connected to a task

For details about how to get all links connected to a specific task, see the Getting the Link Object/Id article.

Task duration

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.

Task height

To get the height of the DOM element of the task, use the getTaskBarHeight method:

gantt.config.bar_height = 45;
gantt.getTaskBarHeight(1); // -> 45

The return value can also match the value specified to the bar_height property of the task object:

var tasks = {
        { 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.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.

Task end date

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.

Selected task

To get the currently selected task, use the getSelectedId method:

gantt.getSelectedId();  //-> "t_1" - the id of the selected task

Tasks from a specific period

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

All tasks of Gantt

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.

Links of a certain task

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:

  • $source - links that comes out from the task.
  • $target - links that comes into task.
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

Nearest oncoming task

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

Task id

Generally, you can get the id of a task from the "data" object of the data set.

        {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}      ],

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;

Changing id of a task

To change the current id of a task, use the changeTaskId method:

gantt.changeTaskId("t1", "t11");  //changes the task id from "t1" to "t11"

Opening/Closing task branches

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
    task.$open = true;
// collapse all branches
    task.$open = false;

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.

Copying/pasting tasks

Follow the examples given in the How to copy and paste tasks section.

Back to top