Premium support for our pure JavaScript UI components


Post by jit@flowit.dk »

Hi,

Can we prevent users from dragging and dropping tasks to the root of the hierarchy in React Gantt while still allowing them to drag and drop tasks to other tasks in the hierarchy?

In the old ExtJS Gantt we could drop a task on top of another task to make it a child, but that's not how it works in React Gantt. If we want to drag and drop Task C to become a child of Task A (a root node) then all we can do is to drop Task C below Task A which makes Task C a root node. We can then indent Task C to make it a child of Task A, but the user might not do so. This potentially leaves us with Task C in the root which is invalid in our case.

Preferably we would like the old drag-and-drop behaviour back - where a task could be dropped ON TOP of other tasks to have it moved to the bottom of the task on which it was dropped. We don't support moving a task up/down within a parent (parentIndex) - in our use case tasks are always ordered by start date.

  • Thanks

Best regards
Jimmy Thomsen


Post by marcio »

Hey Jimmy,

Yes, you can validate the drag/drop actions following this guide https://www.bryntum.com/docs/gantt/api/Gantt/feature/TaskDrag#validating-a-drag-drop-operation

To avoid the child being dropped at the root level, you need to check if the parentIndex of the task is null (which means that the task is at root level).

Also, to make it a task a child as you mentioned there, now you need to set that up programmatically, probably after the task is dropped using this event https://www.bryntum.com/docs/gantt/api/Gantt/feature/TaskDrag#event-taskDrop

Best regards,
Márcio


Post by jit@flowit.dk »

Note to myself and anyone else who might come across this post:
https://bryntum.com/products/gantt/docs/#Grid/feature/RowReorder was what I was looking for. The links in the comment above relates to tasks being moved horizontally on the time line.

Best regards
Jimmy Thomsen


Post Reply