Multi-Task Selection

Starting from version 3.2, the library provides the ext/dhtmlxgantt_multiselect.js extension that allows you to select multiple tasks at once.

Activating multi-task selection

To activate multi-task selection for tasks, include the multiselect extension file on the page:

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
   <script src="codebase/ext/dhtmlxgantt_multiselect.js"></script>  </head>
<body>
    //your code will be here
</body>
</html>

Related sample:  Multiselection and Indent/Outdent tasks

Once the extension is activated, multi-task selection will be automatically enabled.


To disable extension, use the multiselect option:

Disabling multi-task selection

gantt.config.multiselect = false;

One-time update for multiple tasks

To update multiple tasks/links at once, use the batchUpdate method:

gantt.batchUpdate(function () {
    var tasks = gantt.getTaskByTime();
    for(var i = 0; i < tasks.length; i++){
        var task = tasks[i];
        task.start_date = gantt.date.add(task.start_date, 1, "day");
        task.end_date = gantt.calculateEndDate(task.start_date, task.duration);
        gantt.updateTask(task.id);
    }
});

The method allows you to update multiple tasks/links at once with a single re-rendering instead of making multiple updates with multiple re-renderings.

Related sample:  Multiselection and Indent/Outdent tasks

Iterator

To iterate over all selected tasks in the Gantt chart, use the eachSelectedTask method:

gantt.batchUpdate(function () {
    gantt.eachSelectedTask(function(task_id){
        if(gantt.isTaskExists(task_id))
            gantt.deleteTask(task_id);
    });
});

Related sample:  Multiselection and Indent/Outdent tasks

Simultaneous indentation/outdentation

Multi-task selection allows you to apply different operations to multiple tasks at once. For example, you can add an indentation/outdentation thereby transforming tasks to sub-tasks and vice versa.

Related sample:  Multiselection and Indent/Outdent tasks

Checking if a task is selected

To check if a task is currenly selected, use the isSelectedTask method:

gantt.templates.task_class = 
gantt.templates.grid_row_class = 
gantt.templates.task_row_class = function (start, end, task) {
    if (gantt.isSelectedTask(task.id))
        return "gantt_selected";
};

Related sample:  Multiselection and Indent/Outdent tasks

To toggle between selected and unselected states, use the toggleTaskSelection method:

gantt.toggleTaskSelection("t_1"); //"t_1" is the task's id
gantt.render();

Getting all selected tasks

To get all tasks that are currently selected, use the getSelectedTasks method:

gantt.getSelectedTasks();

To get the last selected task, use the getLastSelectedTask method:

gantt.getLastSelectedTask();

Limiting multi-task selection within one level

To deny selecting tasks from different levels, use the multiselect_one_level option:

gantt.config.multiselect_one_level = true; 
gantt.init('gantt_here');

API events

When multi-task selection is enabled, selecting a task or a range of tasks will trigger both the general onTaskSelected / onTaskUnselected events, and events specific to the multiselect extension.

Multi-task selection has the following events flow:

  • onBeforeMultiSelect - fires before selecting task or a range of tasks, blockable
  • onBeforeTaskMultiSelect - fires before task selection state is being changed (the task is being selected or unselected), blockable
  • onTaskMultiSelect - fires after the task selection state has changed (the task has been selected/unselected)
  • onTaskUnselected - is called for each task of the multiselection range
  • onTaskSelected - is called for each task of the multiselection range
  • onMultiSelect - fires after selection of a task or a range of tasks has been completed
Back to top