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
GanttTask
interface, or you have to provide ataskModelFields
object. 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:
summary
task—Rendered when the task has child subtasks.milestone
task—Rendered when the task has no child subtasks, and thestart
andend
values are equal.regular
task—Rendered when the task has no child subtasks, and thestart
andend
values are not equal.
Whether a task data item has child subtasks is determined through the
hasChildren
callback, 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