New to Kendo UI for Angular? Start a free 30-day trial
GanttTaskTooltipTemplateDirective
Represents a template that defines the whole content of the Task tooltip.
To define the template, nest an <ng-template>
tag
with the kendoGanttTaskTooltipTemplate
directive inside the <kendo-gantt>
tag.
The template context is set to the respective data item.
ts
@Component({
selector: 'my-app',
template: `
<kendo-gantt [kendoGanttHierarchyBinding]="data">
<ng-template kendoGanttTaskTooltipTemplate let-dataItem>
<div [style]="'color: white; font-size: 8px;'">
{{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete;
</div>
</ng-template>
</kendo-gantt>
`
})
class AppComponent {
public data: any[] = sampleTasks;
}
Selector
[kendoGanttTaskTooltipTemplate]