Skip to main content

addTask

Description​

Adds a new task

addTask: (task: NewTask, parent?: string | number, index?: number) => string | number

Parameters​

  • task - (required) NewTask - the task object
  • parent - (optional) string | number - the parent's id
  • task - (optional) number - the position the task will be added into (0 or greater)

Returns​

  • id - (string, number) - the task's id

Example​

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

Details​

If you set the index parameter with the value from 0 and greater, a task will be added to the specified position in the branch. Otherwise, the task will be added to the end of the tasks' branch.

The method invokes the onBeforeTaskAdd and onAfterTaskAdd events.

Note, if you don't want to save task in case, for example, the user clicks the "Cancel" button in the lightbox, use the createTask method and the onTaskCreated event that this method invokes.

Preventing from adding tasks to certain levels​

A quite easy way to prevent users from adding sub-tasks to specific tasks is to hide the 'Add' button through CSS.

First, 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 "";
};

Then, hide the 'Add' button for such rows:

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

sample Predefined Project Structure