GanttSummaryTaskTemplateDirective

Defines a template for the entire summary task component. Place an <ng-template> tag with the kendoGanttSummaryTaskTemplate 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 summary 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 summary task progress.

html

<kendo-gantt [kendoGanttHierarchyBinding]="data">
   <ng-template kendoGanttSummaryTaskTemplate let-dataItem let-elementWidth="elementWidth">
     <div [style]="'color: white; font-size: 8px;'">
         {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete; width: {{ elementWidth }}
     </div>
   </ng-template>
</kendo-gantt>

Selector

[kendoGanttSummaryTaskTemplate]