dhtmlxGantt tutorial: how to reorder tasks

dhtmlxGantt is a fully functional Gantt chart for cross-browser and cross-platform applications. It can meet all the needs of project management applications and is the most complete Gantt chart library. It allows you to create dynamic Gantt charts and visualize project progress in a convenient graphical way. With dhtmlxGantt, you can display the dependencies between activities, display the current task status with a shadow of completion percentage, and organize activities into a tree structure.

Click to download the trial version of dhtmlxGantt

Reorder tasks

dhtmlxGantt provides two ways to reorder tasks in the grid:

1. Drag and drop
2. Sort

These methods are alternative. By default, both modes are disabled.
To enable drag-and-drop reordering, use the order_branch option:

gantt.config.order_branch = true;
gantt.init("gantt_here");

You can take a look at the video guide, which shows how to sort and reorder tasks in a grid.

Video link: https://www.evget.com/video/3625

Drag and drop throughout the Gantt structure

The order_branch option allows dragging tasks in the same tree level.

It is also possible to enable a mode in which tasks can be reordered throughout the Gantt chart. This means that one task can replace another task at any tree level. To use this type of task reordering, use the order_branch_free option:

// reordering tasks within the whole gantt
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
 
gantt.init("gantt_here");

Refuse to fall to a specific location

To refuse to place the task in a specific location, use the onBeforeTaskMove or onBeforeRowDragEnd event:

//prevent moving to another sub-branch:
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    
    
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});
 
//or
gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){
    
    
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

Improve performance of large data sets

If your Gantt chart contains many tasks, the default mode of branch reordering may reduce performance. To speed things up, you can use the "Mark" mode.

gantt.config.order_branch = "marker";

In this mode, only the task names are reordered (hold down the left mouse button), and the Gantt chart is re-rendered only when the task is placed at the target location (release the key). Unlike the default mode, changing the task position does not involve triggering onBeforeTaskMove / onAfterTaskMove events.
In order to prevent the task from falling to a specific location, please use the onBeforeRowDragMove event instead (only valid in "Mark" mode).

Highlight available placement locations when dragging and dropping

To highlight the available target locations during the drag process (for example, it is impossible to drag the root node to another root directory, and you want to visually notify the user of this information), use the onRowDragStart and onRowDragEnd events:

gantt.config.order_branch = true;// order tasks only inside a branch
gantt.init("gantt_here");
gantt.parse(demo_tasks);
 
var drag_id = null;
gantt.attachEvent("onRowDragStart", function(id, target, e) {
    
    
    drag_id = id;
    return true;
});
gantt.attachEvent("onRowDragEnd", function(id, target) {
    
    
    drag_id = null;
    gantt.render();
});
 
gantt.templates.grid_row_class = function(start, end, task){
    
    
    if(drag_id && task.id != drag_id){
    
    
        if(task.$level != gantt.getTask(drag_id).$level)
            return "cant-drop";
        }
    return "";
};

Product recommendation:

VARCHART XGantt : C# Gantt chart control that supports ActiveX, .Net and other platforms

AnyGantt : An ideal tool for building complex and rich Gantt charts

jQuery Gantt Package : Cross-platform jQuery Gantt package based on HTML5 / jQuery

phGantt Time Package : Gantt chart for task and time allocation management

APS helps improve the production efficiency of enterprises, truly realize the visual presentation and control of production plans , quickly and effectively respond to production plans in different scenarios , improve on-time delivery capabilities, and increase production capacity and resource utilization.