Basic Operations with Tasks

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

Adding a new task

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

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

Preventing from adding tasks to certain levels

A simple way to prevent users from adding subtasks 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 = (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;
}

Predefined Project Structure

Updating a task's property

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

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

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

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

task.text = "Task #10_1";
gantt.refreshTask(10);

Redrawing tasks

To redraw all tasks in the Gantt chart, use the refreshData() method:

const firstTask = gantt.getTask(10); // -> { id: 10, text: "Task #10", start_date: "2027-09-02", ... }
const secondTask = gantt.getTask(11); // -> { id: 11, text: "Task #11", start_date: "2027-09-05", ... }

firstTask.text = "Task #10_1";
secondTask.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 the parent task, while its nested tasks and links will be deleted by the server.

The cascade_delete option affects the way of implementing 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();