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

GanttTaskTemplateDirective

Directive

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.

Definition

Package:@progress/kendo-angular-gantt

Selector:[kendoGanttTaskTemplate]

Syntax:

html

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