Row reordering from Top to Bottom is not working, using onRowDragEnd event

Gantt
#1

Hello,
I am using “dhtmlx-gantt”: “^7.0.4”. I have 3 tasks.
Task 1
Task 2
Task 3

I want to reorder tasks by drag drop event. for this I have used _ gantt.config.order_branch = true and

gantt.attachEvent(“onRowDragEnd”, function (id, target) {
var task = gantt.getTask(id);
var deseiredTask = gantt.getTask(target);
console.log(task);
console.log(deseiredTask);
});

Problem is when I drag task 1 to task 2, the target returns task 3. If I drag task 2 and drop it on task 3 it returns the target undefined. I’m facing the problem only Top to Bottom operation. Bottom to Top drag-drop operation is working fine. Is there any solution?

#2

Hello @Mohaimanul_Islam,

This behavior occurs in the scenario when the dragged task goes just after the target task, which occurs only with replacing the last task in a chart. In this case, the target returns in the format:
next:targetId(string).

You can read about this behavior by the following link:
https://docs.dhtmlx.com/gantt/desktop__server_side.html#storingtheorderoftasks

In this case, you can get the target id with the following code fragment:

// get id of adjacent task and check whether updated task should go before or after it
  if(typeof(target) === "string"){
    targetTaskId  = target.substr("next:".length);
    nextTask = true;
  } else {
    targetTaskId  = target;
    nextTask = false;
  }

Here is a demo:
http://snippet.dhtmlx.com/5/f41b0d47d

Also, I noticed that this behavior doesn’t mention in the onRowDragEnd topic:
https://docs.dhtmlx.com/gantt/api__gantt_onrowdragend_event.html
I sent a report to our tech writers and the documentation will be updated ASAP.

1 Like