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


Represents a template that defines the whole content of the task component. To define the template, nest an <ng-template> tag with the kendoGanttTaskTemplate 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 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.

   selector: 'my-app',
   template: `
       <kendo-gantt [kendoGanttHierarchyBinding]="data">
           <ng-template kendoGanttTaskTemplate let-dataItem let-elementWidth="elementWidth">
               {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
class AppComponent {
   public data: any[] = sampleTasks;



In this article

Not finding the help you need?