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 a
taskModelFieldsobject. For more information, refer to the dedicated article on binding the Gantt to data.
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 the
endvalues are equal.
regulartask—Rendered when the task has no child subtasks, and the
endvalues 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.
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.
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.
The following example demonstrates how to customize only the text content section element of the task by using the
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.