i customize a DHTMLX gantt with my db. For Data i only choose id, text, start_date, duration and end_date. For links i choose id, souce, target and type, all types are 0.
I’ve done dragging task together with their dependent task, moving task manualy. Moving Descendants synchronously with the main task( link: https://docs.dhtmlx.com/gantt/desktop__dragging_dependent_tasks.html#movingtasksmanually )
I’ve add to my gantt.aspx this code:
gantt.eachSuccessor = function (callback, root) {
if (!this.isTaskExists(root))
return;
// remember tasks we've already iterated in order to avoid infinite loops
var traversedTasks = arguments[2] || {};
if (traversedTasks[root])
return;
traversedTasks[root] = true;
var rootTask = this.getTask(root);
var links = rootTask.$source;
if (links) {
for (var i = 0; i < links.length; i++) {
var link = this.getLink(links[i]);
if (this.isTaskExists(link.target) && !traversedTasks[link.target]) {
callback.call(this, this.getTask(link.target));
// iterate the whole branch, not only first-level dependencies
this.eachSuccessor(callback, link.target, traversedTasks);
}
}
}
};
gantt.attachEvent("onTaskDrag", function (id, mode, task, original) {
var modes = gantt.config.drag_mode;
if (mode == modes.move) {
var diff = task.start_date - original.start_date;
gantt.eachSuccessor(function (child) {
child.start_date = new Date(+child.start_date + diff);
child.end_date = new Date(+child.end_date + diff);
gantt.refreshTask(child.id, true);
}, id);
}
return true;
});
gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
var modes = gantt.config.drag_mode;
if (mode == modes.move) {
gantt.eachSuccessor(function (child) {
child.start_date = gantt.roundDate(child.start_date);
child.end_date = gantt.calculateEndDate(child.start_date, child.duration);
gantt.updateTask(child.id);
}, id);
}
});```
Now i have to add the constrain that a child(target) task can’t move before the end date of father(source). I have to add a Left limit for all tasks, but i have no idea how to do, because i haven’t “parent” on my data details.
In the onTaskDrag
event handler you have the task
object of the task you are dragging. For the related tasks, there is the child
variable, though the tasks are not necessarily the children of the dragged task. So, you can get the end date of the task you are dragging from the task
object.
In the onAfterTaskDrag
event handler, you don't have the task
object, but you can get it by using the gantt.getTask(id)
method:
gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
var task = gantt.getTask(id);
var modes = gantt.config.drag_mode;
if (mode == modes.move) {
gantt.eachSuccessor(function (child) {
child.start_date = gantt.roundDate(child.start_date);
child.end_date = gantt.calculateEndDate(child.start_date, child.duration);
gantt.updateTask(child.id);
}, id);
}
});
https://docs.dhtmlx.com/gantt/api__gantt_gettask.html
You can also use the auto-scheduling feature: https://docs.dhtmlx.com/gantt/desktop__auto_scheduling.html