Drag function for split task entire row

Gantt
#1

Hi,

I am trying to integrate task level dragging with split tasks in single row. for reference: http://snippet.dhtmlx.com/71ed92722

In this example Task#2 have splits
i want to drag all sub task together.

#2

Hello Janani,
First, you can enable dragging project tasks with the following option:

gantt.config.drag_project = true;

Then you change the style rule to see the project tasks and be able to drag them:

.gantt_split_parent{
  opacity: 0.7;
  pointer-events :all;
}

To drag it from the left side, you can add the leftside_text template:

gantt.templates.leftside_text = function(start, end, task){
  if (task.render == 'split') return 'drag_here';
};

Here is the updated snippet:
http://snippet.dhtmlx.com/73e86c31e

#3

Thanks for your support . I solved it

#4

One more query ,
In groupby function i want to display split task in single row . Like tree view.
Check the below example .

http://snippet.dhtmlx.com/9e95908b5

  • Task #2 having subtask
    • Stage #1
    • Stage #2
    • Stage #3
    • Stage #4
      In tree view It shows in single row by using render “split”
      After clicking GroupBy owner button all sub task showing this separate rows i want to display in single row like tree view. Any possibility there?
#5

Hello Janani,
When you group tasks, all tasks are displayed without parent tasks and appear under virtual tasks (Anna, Mike, and John in your example).
You can modify those virtual tasks by adding the render: 'split' property to them:

gantt.eachTask(function(task){
  if (task.type == 'project' && task.$virtual && task.$level > 0 ) {
    task.render = ['split']
  }
});
gantt.render();

Here is an example of how it works:
https://snippet.dhtmlx.com/39d560e21