New to Kendo UI for Angular? Start a free 30-day trial
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]