GanttTaskDragTooltipTemplateDirective

Updated on Dec 19, 2025

Customizes the content of the tooltip that appears when you drag or resize a Gantt task. Place the kendoGanttTaskDragTooltipTemplate directive on an <ng-template> tag inside the <kendo-gantt> component.

The template context provides an object with the following properties:

• start—The updated start date during the drag operation.
• end—The updated end date during the drag operation.
• completionRatio—The completion ratio of the task as a decimal value between 0 and 1.
• task—The original data item of the task being dragged. Contains the properties of the GanttTask interface.

html

<kendo-gantt 
   [kendoGanttHierarchyBinding]="data" 
   kendoGanttTaskDrag
   (taskDragEnd)="onDragEnd($event)">
   <ng-template kendoGanttTaskDragTooltipTemplate let-dragData>
       <div> {{ dragData.task.title }} </div>
       <div> Start: {{ dragData.start | date: 'h:mm a' }} </div>
       <div> End: {{ dragData.end | date: 'h:mm a' }} </div>
   </ng-template>
</kendo-gantt>

Selector

[kendoGanttTaskDragTooltipTemplate]