onAfterTaskDrag

Gantt
#1

Hi everybody

How can i refresh all parents duration and dates after task drag? because in my code it refresh when i click to the task

code :
gantt.attachEvent(“onTaskDrag”, function (id, mode, task, original) {
var modes = gantt.config.drag_mode;
var parent = gantt.getTask(task.parent);
var targetLinks = task.$target;

            var link = this.getLink(targetLinks[0]);
            if (link != null) {
                if (link.type == "0") {
                    var sourceTask = gantt.getTask(link.source);
                    var targetTask = gantt.getTask(link.target);
                    var diff2 = original.duration * (1000 * 60 * 60 * 24);
                    if (targetTask.start_date <= sourceTask.end_date) {

                        task.start_date = new Date(+sourceTask.end_date);
                        task.end_date = new Date(+task.start_date + diff2);
                    }
                }
            }
            if (parent != null) {


                if (mode == modes.move || mode == modes.resize) {
                    var diff = original.duration * (1000 * 60 * 60 * 24);

                    var children = new Array();
                    children = gantt.getChildren(parent.id);
                    var n = children.length;
                    var indice = children.indexOf(task.id)
            
                 
                    if (indice >= 1) {
                        var idprec = children[indice - 1];
                        var datafine = gantt.getTask(idprec);
                        var leftLimit = datafine.end_date;            
                        var diff2 = original.duration * (1000 * 60 * 60 * 24);
                        if (task.start_date < leftLimit) {

                            task.start_date = new Date(+leftLimit);
                            task.end_date = new Date(+task.start_date + diff2);
                            parent.end_date = new Date(task.end_date);
                            parent.duration = gantt.calculateDuration(parent.start_date, parent.end_date);
                        }
                    }
                    
                   
                    if (n >= 2) {
                        var first = gantt.getTask(children[0]);
                        var last = gantt.getTask(children[children.length - 1]);
                        var targetLinksParent = parent.$target;
                        var link1 = this.getLink(targetLinksParent[0]);
                        if (mode == modes.move) {
                            if (link1 != null) {
                                if (link1.type == "0") {
                                    var sourceTask = gantt.getTask(link1.source);
                                    var diff2 = original.duration * (1000 * 60 * 60 * 24);
                                    if (first.start_date <= sourceTask.end_date) {

                                        task.start_date = new Date(+sourceTask.end_date);
                                        task.end_date = new Date(+task.start_date + diff2);
                                    }
                                }
                            }
                        }
  


                      
                        if (mode == modes.move) {
                            if (+task.end_date > +parent.end_date) {
                                parent.end_date = new Date(task.end_date);
                                parent.duration = gantt.calculateDuration(parent.start_date, parent.end_date);
                            }
                        }
                        if (mode == modes.move) {
                            if (+task.start_date < +parent.start_date) {
                                parent.start_date = new Date(task.start_date);
                                parent.duration = gantt.calculateDuration(parent.start_date, parent.end_date);

                            }
                        }

                        if (mode == modes.move) {
                            if (+task.end_date < +parent.end_date) {

                                parent.end_date = new Date(last.end_date);
                                parent.duration = gantt.calculateDuration(parent.start_date, parent.end_date);
                            }

                        }
                        if (mode == modes.move) {
                            if (+task.start_date > parent.start_date) {
                                parent.start_date = new Date(first.start_date);
                                parent.duration = gantt.calculateDuration(parent.start_date, parent.end_date);
                            }
                        }       
                    }
                    else
                       
                            var first = gantt.getTask(children[0]);
                            var targetLinksParent = parent.$target;
                            var link1 = this.getLink(targetLinksParent[0]);
                            if (link1 != null) {
                                if (link1.type == "0") {
                                    if (mode == modes.move) {
                                    var sourceTask = gantt.getTask(link1.source);
                                    var diff2 = original.duration * (1000 * 60 * 60 * 24);
                                    if (first.start_date <= sourceTask.end_date) {

                                        task.start_date = new Date(+sourceTask.end_date);
                                        task.end_date = new Date(+task.start_date + diff2);
                                    }
                                }
                            }
                            if (+task.end_date > +parent.end_date) {
                                parent.end_date = new Date(task.end_date);
                                parent.start_date = new Date(task.start_date);
                                parent.duration = gantt.calculateDuration(parent.start_date, parent.end_date);
                            }
                            if (mode == modes.move) {
                                if (+task.start_date < +parent.start_date) {
                                    parent.start_date = new Date(task.start_date);
                                    parent.end_date = new Date(task.end_date);

                                    parent.duration = gantt.calculateDuration(parent.start_date, parent.end_date);
                                }
                            }

                        }


                    gantt.calculateEndDate(task);
                    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)
                }
            }


            else 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)
            } if (parent == 0) {
                var targetLinks = task.$target;
                var link = this.getLink(targetLinks[0]);
                if (link == null) {

                    var leftLimit = gantt.getTask(link.source).end_date;


                    if (mode == modes.move) {
                        var diff2 = original.duration * (1000 * 60 * 60 * 24);
                        if (+task.start_date < +leftLimit) {
                            task.start_date = new Date(+leftLimit);
                            task.end_date = new Date(+task.start_date + diff2);
                        }
                    }

                    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)
                    }
                }

                else {

                    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 parent = gantt.getTask(task.parent);

          parent.duration = gantt.calculateDuration(parent.start_date, parent.end_date);
    
          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);
        }
    });
#2

Hello,
You can set auto_types to true which automatically converts tasks with subtasks to projects and projects without subtasks back to tasks. This will automatically update the duration of parent tasks after task drag:

gantt.config.auto_types = true;

You can also drag tasks together with their dependent tasks. There are several ways to do this.
You can make it using the Auto Scheduling extension.
To use the auto scheduling functionality, you should enable it using the gantt.plugins method:

gantt.plugins({
   auto_scheduling: true
});

And set the auto_scheduling property to true:

gantt.config.auto_scheduling = true;

Here is an example in the snippet: https://snippet.dhtmlx.com/r9yzqbxi

You can also do it manually. Look please Moving Tasks Manually.
Here is an example when “Moving Descendants synchronously with the main task”: https://snippet.dhtmlx.com/2k4zb2vc.

But if you are moving many tasks at the same time it is better to use “Moving Descendants after movement of the main task is finished”. Here is an example: https://snippet.dhtmlx.com/zcakp624.

If you want to refresh the duration and start/end dates of all parent tasks on the backend, then you need to make a custom solution.
You can save the state of the tasks before updating using the onBeforeLightbox and onBeforeTaskDrag handlers:

previous_state = JSON.parse(JSON.stringify(gantt.serialize().data))

Then compare using the onAfterTaskUpdate handler the previous and current states of the tasks:

let current_state = JSON.parse(JSON.stringify(gantt.serialize().data));
for (let i = 0; i < previous_state.length; i++) {
    for (let j = 0; j < current_state.length; j++) {
        if (current_state[j].id == previous_state[i].id){
            if (current_state[j].start_date !=  previous_state[i].start_date || current_state[j].end_date !=  previous_state[i].end_date) {
                gantt.message(current_state[j].text+" was updated")
            }
        }
    }
}

Here is an example in the snippet: https://snippet.dhtmlx.com/f2v2qyfb.

Or you can check in the onLightboxSave and onAfterTaskDrag handlers which parent tasks have changed:

function update_parent_projects(id){
    gantt.eachParent(function(parent){
        if (parent.type == gantt.config.types.project) gantt.updateTask(parent.id);
    }, id)  
}

Here is an example in the snippet: https://snippet.dhtmlx.com/xjmk7dxy

If you have additional questions, write to us, and we will try to help you.

1 Like