dhtmlxGantt It's full-featured for cross browser and cross platform applications Gantt Chart . Meet all the requirements of the project management application , Is the most complete Gantt chart Library . It allows you to create dynamic Gantt charts , And visualize the project progress in a convenient graphical way . With dhtmlxGantt, You can show dependencies between activities , Displays the current task status with a percent complete shadow and organizes activities into a tree structure .

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 , Please use order_branch Options ：

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

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

Drag and drop throughout the Gantt structure

The order_branch Option allows you to drag tasks at the same tree level .

You can also enable the mode that you can reorder tasks across the Gantt Chart . This means that one task can replace another at any tree level . To use this type of task reordering , Please use order_branch_free Options ：

// 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 put a task in a specific place , Please use 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 the performance of large datasets

If your Gantt chart contains many tasks , The default mode of branch reordering may degrade performance . In order to speed up , You can use “ Mark ” Pattern .

gantt.config.order_branch = "marker";

In this mode , Just reorder the task names （ Hold down the left mouse button ）, And only when the task is in the target position （ Release key ） Before rendering the Gantt chart again . Different from the default mode , Changing the task location does not involve triggering onBeforeTaskMove / onAfterTaskMove event .

To prevent the task from falling to a specific location , Please switch to onBeforeRowDragMove event （ Only in “ Mark ” Valid in mode ）.

Highlight available drop positions when dragging and dropping

To highlight available target locations during dragging （ for example , It is impossible to drag the root node to another root directory , And you want to visually inform the user of this information ）, Please use onRowDragStart and onRowDragEnd event ：

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： Support ActiveX、.Net Equal platform C# Gantt chart control

AnyGantt： Ideal tool for building complex and rich Gantt charts

jQuery Gantt Package： be based on HTML5 / jQuery cross-platform jQuery Gantt package

phGantt Time Package： A Gantt chart for the management of assignments and time

APS Help to improve the production efficiency of enterprises , To realize the visualization and control of production plan , Respond quickly and effectively to different scenarios Production plan , Improve the ability to deliver on time , Increase capacity and resource utilization