New to Kendo UI for Angular? Start a free 30-day trial

Drag-and-Drop Editing

The Gantt provides a kendoGanttTaskDrag directive that enables you to edit tasks through drag-and-drop operations. This feature allows you to move tasks to different positions on the timeline, resize tasks from the corners, and update their completion percentage.

Enable Drag Editing

Add the kendoGanttTaskDrag directive to <kendo-gantt>.
Handle the taskDragEnd event.
Validate and persist the changes, then refresh the view (for example call updateView when using a data binding directive).

Events

The kendoGanttTaskDrag directive provides two events:

Name	Type	Description
`taskDrag`	`EventEmitter<TaskDragEvent>`	Emits while the user resizes or moves a task by dragging.
`taskDragEnd`	`EventEmitter<TaskDragEvent>`	Fires when the user finishes dragging to resize or move a task.

Both events provide the same event payload with the following information:

item—The internal tree item. Use item.dataItem for the underlying task object.
start / end—New Date values after a move or resize.
completionRatio—Updated progress as a decimal value between 0 and 1 (where 0 = 0%, 0.5 = 50%, and 1 = 100%) if the progress bar was dragged.
dragEvent—The original drag event, useful for additional context or custom logic.

Apply these values to your data item and update any parent (summary) tasks if required by your logic.

Hierarchical Data

With kendoGanttHierarchyBinding each parent item exposes its children via a childrenField (for example subtasks). After updating the dragged task:

Recalculate parent start (earliest child start).
Recalculate parent end (latest child end).
Aggregate completion (average or custom formula).

The following example demonstrates drag-and-drop editing with hierarchical data binding.

Change Theme

Theme

Loading ...

Flat Data

With kendoGanttFlatBinding relationships are defined by idField and parentIdField (for example id and parentTaskId). Drag behavior is the same. Ancestor updates are resolved through lookups instead of nested child arrays. After updating the dragged task:

Ensure idField="id" and parentIdField="parentTaskId" are set.
Find siblings (other children sharing the same parentTaskId).
Recalculate parent start (earliest sibling start).
Recalculate parent end (latest sibling end).
Aggregate completion (for example average of sibling completionRatio values).
Move up using the parent's own parentTaskId and repeat until there is no parent.

The following example demonstrates drag-and-drop editing with flat data binding.