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.
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
});
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;
}
Related sample: Predefined Project Structure
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); gantt.refreshData();
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();
To delete a task, use the deleteTask method:
gantt.deleteTask(taskId);
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.
To clear the Gantt chart from tasks, call the clearAll method:
gantt.clearAll();
Back to top