Vertical drag and drop from the gantt chart area

Gantt
#1

Hi,

I have a requirement to use Gantt chart for an application I’m working on. Before purchasing a commercial license (because we need PDF support without watermarks) I have one User Story that it seems not be possible to implement with the current version.

US: The product owner wants to drag vertically the tasks from the gantt chart area instead of the grid area.

Apparently (from the samples), vertical drag and drop is enabled only for a grid area whereas horizontal drag and drop is possible on the gantt chart area.

Is it possible to have vertical drag and drop on the gantt chart area? Or do I need to implement this on top of dhtmlxGantt?

Thanks

Error following the steps in the tutorial on Vertical drag and drop task
#2

Hello,
We don’t plan to add this feature in the near future.
However, it is possible to implement it using current API.
Here are the examples.
In the first example you can drag rows vertically if you click on a row, not on a task. This is the easiest way to implement and to use it:
snippet.dhtmlx.com/8372de20a
files.dhtmlx.com/30d/35640ce696 … -20-53.mkv

If you want to drag rows clicking on tasks, here is another example, although it is more complicated to use. You can always drag tasks that are not selected. If you click on a task first time, the task will be selected, but you still can drag it. But if you click on it second time, you won’t be able to drag it anymore until you select another task:
snippet.dhtmlx.com/c8efa62b5
files.dhtmlx.com/30d/9416bd142f … -30-32.mkv

In both examples we just add a grid column with an invisible row. You can always change the opacity to see how it really works.
Of course, these are just examples, you can add or use something else and implement the feature the way you think it should work.

Update:
There is a better way to implement that:
https://snippet.dhtmlx.com/fla78m0y?text=gantt.%2Bvertical%2Breorder

#3

Great. I will try to adapt the snippets to allow both vertical and horizontal drag on the gantt area without a grid area.

Thanks

#4

Hello.

I have the first example working - reordering the tasks by dragging the rows up and down.

However, I want to hide all the columns, and when I use gantt.config.grid_width = 0; this method stops working.

Is there another place to attach the invisible element to get the same effect?

Thanks,

Jeremy

#5

Hello Jeremy,
There is no built-in feature to vertically reorder tasks. You need to implement a custom solution by using Gantt API and Javascript.
Both examples activate the event to reorder tasks via the grid. That’s why they don’t work when you disable the grid.

However, I have other examples.
It is not necessary to show an invisible element to reorder tasks in the timeline. You can use the additional task layer feature and display an element to show new task position:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html

As the original task will be moved at the same time, it will create confusion. So you can hide the taskbar by using styles:
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html

After moving the element that represents the task, you move the task to a new position. Here is an example of how it might be implemented:
https://snippet.dhtmlx.com/fla78m0y?text=gantt.%2Bvertical%2Breorder

Actually, the snippet above is based on the snippet below, where you can reorder split tasks, maybe it will also help you:
https://snippet.dhtmlx.com/usfulweq?text=gantt.%2Bvertical%2Breorder

#6

Thanks very much for getting back to me and for the new options - the thing the new options lack is the visual reordering of the rows as you drag, which is a requirement for us.

To try and keep this behaviour I have changed my grid to just have one column which is a reorder icon.

There seems to be a minimum width on the grid though that I can’t remove, so I have my icon column which is 40 px wide but my grid is always setting at 140px wide leaving me with a big 100px gap.

Is there any way to remove this min width? gantt.config.grid_width = 40; doesn’t seem to have any impact.

Thanks again for your help on this.

Jeremy

#7

Hello Jeremy,
Thank you for the clarification.
Unfortunately, I don’t have a better solution for the new way of implementation.

If you want to modify the old way of implementation, you can change the min_grid_column_width parameter to 1, and if some column is still not resized, you can set min_width in the column configuration:
https://docs.dhtmlx.com/gantt/api__gantt_min_grid_column_width_config.html
https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html
Here is the updated snippet:
http://snippet.dhtmlx.com/17967eaef

#8

Ok. Thanks Ramil. Much appreciated.

#9

hi, i have seen demo
https://snippet.dhtmlx.com/50e77fce5?_ga=2.173009120.2102315213.1572836838-1358818021.1572252743

Is this function only available in the pro editor ?

#10

Hi @linhtv97,
There is no built-in feature to vertically reorder tasks in gantt. It is a custom solution by using Gantt API and Javascript. So, you can one of the solutions above, like this one: http://snippet.dhtmlx.com/7c6fcda72
it in the Standard version.
The snippet you posted: https://snippet.dhtmlx.com/50e77fce5?_ga=2.173009120.2102315213.1572836838-1358818021.1572252743 uses addTaskLayer, which is available only in the PRO.