Basic Operations with Tasks

In this chapter you'll learn how to do basic operations with tasks: to create or delete a task, to dynamically update a task's property.

Adding a new task

To add a new task to the Gantt chart, use the addTask method:

var taskId = gantt.addTask({
    id:10,
    text:"Project #1",
    start_date:"02-09-2020",
    duration:28
});

Preventing from adding tasks to certain levels

A quite easy way to prevent users from adding sub-tasks to a task of a certain level (or based on some other condition) is to hide the 'Add' button through CSS.

You can assign a CSS class for each task row using the grid_row_class template:

gantt.templates.grid_row_class = function( start, end, task ){
    if ( task.$level > 1 ){
        return "nested_task"
    }
    return "";
};

and hide the 'Add' button for such rows:

.nested_task .gantt_add{
    display: none !important;
}

Updating a task's property

To dynamically update a property of a task object, use the updateTask method:

var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
 
task.text = "Task #10_1"; gantt.updateTask(10);

If Data Processor is enabled, the updateTask() method will cause the changes to be sent to the server.

After the task is updated, the onAfterTaskUpdate event fires. It can cause other changes, for example, when the auto scheduling is enabled, Gantt will auto-schedule the task and all its successors.

If you need just to re-render the changes, call the refreshTask() method instead of updateTask().

var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
 
task.text = "Task #10_1"; 
gantt.refreshTask(10);

Redrawing tasks

To re-draw all tasks in the Gantt chart, use the refreshData method:

var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
var task2 = gantt.getTask(11);//->{id:11,text:"Task #11",start_date:"05-09-2020",...}
 
task.text = "Task #10_1";  task2.text = "Task #11_1"; gantt.refreshData();

Deleting tasks

To delete a task, use the deleteTask method:

gantt.deleteTask(taskId);

Cascade deleting of nested tasks

There is a cascade_delete config that regulates the process of deleting tasks from Gantt. By default, it is set to true, which means that when you delete a task, Gantt sends a request to a server for each nested task and link of the deleted task.

If you don't need to send multiple requests to the server, you can simply disable the cascade_delete config:

gantt.config.cascade_delete = false;

In that case Gantt will send only one request to the server - for deleting just the parent task, while its nested tasks and links will be deleted by the server.

The cascade_delete option affects the way of implemeting a backend. Read more in the related section of the Server-side Integration article.

Removing all tasks from the Gantt chart

To clear the Gantt chart from tasks, call the clearAll method:

gantt.clearAll();