GanttTaskTemplateDirective

Defines a template for the entire task component. Place an <ng-template> tag with the kendoGanttTaskTemplate directive inside the <kendo-gantt> tag to set the template.

The template context uses the current data item. The following field is also available:

• elementWidth—The calculated width in pixels of the current task wrapper element, based on its start and end date.

Use let-elementWidth="elementWidth" to access it in the template. This helps you render custom elements for task progress.

html

<kendo-gantt [kendoGanttHierarchyBinding]="data">
  <ng-template kendoGanttTaskTemplate let-dataItem let-elementWidth="elementWidth">
    {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
  </ng-template>
</kendo-gantt>

Selector

[kendoGanttTaskTemplate]