Tasks
The right side of the Gantt renders a task element for each expanded data item row in a horizontal timeline view.
To render the task content and HTML elements in the correct timeline position of the Gantt, the task data items have to either conform to the
GanttTaskinterface, or you have to provide ataskModelFieldsobject. For more information, refer to the dedicated article on binding the Gantt to data.
Types
According to the content of the task data item, the Gantt will render the corresponding task element in one of the three following ways:
summarytask—Rendered when the task has child subtasks.milestonetask—Rendered when the task has no child subtasks, and thestartandendvalues are equal.regulartask—Rendered when the task has no child subtasks, and thestartandendvalues are not equal.
Whether a task data item has child subtasks is determined through the
hasChildrencallback, which is executed with the specified item as its parameter. When you use one of the two data binding directives, this callback gets internally implemented.
The following example demonstrates how the provided content of the task data items is interpreted and rendered.
Custom Styling
You can style each task element according to the content of its data item by using the taskClass callback. The callback is executed for every data item and the returned object is supplied to the ngClass attribute of the task HTML element.
Templates
You can customize the content of the task and the summary task components by using the following Gantt templates:
GanttTaskContentTemplateDirective—Defines the text content section of the task component.TaskTemplateDirective—Defines the whole content for the wrapper element of the task component.SummaryTaskTemplateDirective—Defines the whole content of the summary task component.
Task Content Template
The following example demonstrates how to customize only the text content section element of the task by using the kendoGanttTaskContentTemplate directive.
Task and Summary Task Templates
To customize the entire HTML content of the Gantt tasks and summary tasks, use the kendoGanttTaskTemplate and kendoGanttSummaryTaskTemplate directives.
In the following example, the entire content of the task wrapper element is replaced and the completion ratio overlay element is not rendered. The elementWidth context variable retrieves the entire task element width and can be used for a custom completion ratio overlay element composition.