How to Reorder Tasks in the Grid of JavaScript Gantt – DHTMLX Video Tutorial

While managing projects, users may face the need to change the order of tasks or move tasks between several Gantt projects. Today we’ll get acquainted with the ways of implementing this functionality in DHTMLX Gantt.

Our HTML5 Gantt provides two alternative ways of reordering tasks in the grid:

  • Via drag-and-drop
  • Via sorting

By default, both modes are disabled.

In order to enable the reordering of tasks by drag-n-drop, we need to set the order_branch option to ‘true’:

// ordering tasks only inside a branch
gantt.config.order_branch = true;

gantt.init("gantt_here");

The order_branch property activates the ‘branch’ mode that enables the reordering of tasks within the same nesting level.
JavaScript Gantt tasks reorderingCheck the sample >

Changing of the task position involves firing of the onBeforeTaskMove or onAfterTaskMove events; the first can be used to control where the task can be moved. To prevent moving to another sub-branch, use the onBeforeTaskMove event:

gantt.config.order_branch = true;
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});
gantt.init("gantt_here");

Tasks reordering in JS GanttCheck the sample >
If your Gantt contains lots of tasks, the default mode of the branch reordering may slow down the performance. To speed it up, you can make use of the ‘marker’ mode:

gantt.config.order_branch = "marker";

In this mode, only the name of the task is reordered (on holding the left mouse key), and Gantt is re-rendered only when a task is dropped in the target position (on releasing the key):
Modes of task reordering - JS Gantt by DHTMLXCheck the sample >
Unlike the default mode, changing the task position doesn’t involve the firing of the onBeforeTaskMove or onAfterTaskMove events. To prevent dropping of a task in a particular position, we can use the onBeforeRowDragMove event instead. Note that it works only in the ‘marker’ mode:

// ordering tasks only inside a branch
gantt.config.order_branch = "marker";
gantt.attachEvent("onBeforeRowDragMove", function(id, parent, tindex){
        var task = gantt.getTask(id);
        if(task.parent != parent)
                return false;
        return true;
});
gantt.init("gantt_here");

Hope our tutorial turned out to be useful for you! If you’d like to experiment with DHTMLX Gantt yourself, download a free 30-day evaluation version.

Catch up with the previous tutorials from the series:

Subscribe to our YouTube channel to stay tuned: https://www.youtube.com/user/dhtmlx

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components