TaskDrag

Allows user to drag and drop tasks within Gantt, to change their start date.

Constraining the drag drop area

You can constrain how the dragged task is allowed to move by using getDateConstraints. This method is configured on the Gantt instance and lets you define the date range for the dragged task programmatically.

Drag drop tasks from outside

Dragging unplanned tasks from an external grid is a very popular use case. Please refer to the Drag from grid demo and study the Drag from grid guide to learn more.

Validating a drag drop operation

It is easy to programmatically decide what is a valid drag drop operation. Use the validatorFn and return either true / false (optionally a message to show to the user).

features : {
    taskDrag : {
       validatorFn(draggedTaskRecords, newStartDate) {
           const valid = Date.now() >= newStartDate;

           return {
               valid,
               message : valid ? '' : 'Not allow to drag a task into the past'
           };
       }
    }
}

If you instead want to do a single validation upon drop, you can listen to beforeTaskDropFinalize and set the valid flag on the context object provided.

const gantt = new Gantt({
    listeners : {
        beforeTaskDropFinalize({ context }) {
            const { taskRecords } = context;
            // Don't allow dropping a task in the past
            context.valid = Date.now() <= eventRecords[0].startDate;
        }
    }
});

Preventing drag of certain tasks

To prevent certain tasks from being dragged, you have two options. You can set draggable to false in your data, or you can listen for the beforeTaskDrag event and return false to block the drag.

new Gantt({
    listeners : {
        beforeTaskDrag({ taskRecord }) {
            // Only allow dragging tasks that has not started
            return taskRecord.percentDone === 0;
        }
    }
})

Customizing the drag drop tooltip

To show custom HTML in the tooltip, please see the tooltipTemplate config. Example:

features: {
    taskDrag: {
        // A minimal start date tooltip
        tooltipTemplate : ({ taskRecord, startDate }) => {
            return DateHelper.format(startDate, 'HH:mm');
        }
    }
}

This feature is enabled by default