GanttSummaryTaskTemplateDirective

Represents a template that defines the whole content of the summary task component. To define the template, nest an <ng-template> tag with the kendoGanttSummaryTaskTemplate directive inside the <kendo-gantt> tag.

The template context is set to the current data item. The following additional field is passed:

• elementWidth—The current summary task wrapper element's calculated width in pixels based on its start and end date.

Use it as an alias for a template variable by utilizing the let-elementWidth="elementWidth" syntax. Useful for calculations related to rendering custom elements representing the task progress.

Copy Code@Component({
     selector: 'my-app',
     template: `
         <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>
     `
})
class AppComponent {
    public data: any[] = sampleTasks;
}

Selector

[kendoGanttSummaryTaskTemplate]