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.
Parent-Child Relationships
When working with parent (summary) tasks and their subtasks, it's important to maintain proper date relationships:
- The start date of the parent task must be earlier than or equal to the start date of the earliest child task.
- The end date of the parent task must be later than or equal to the end date of the latest child task.
For example, if a parent task runs from 2024-06-02T00:00:00.000Z to 2024-06-05T00:00:00.000Z, all child tasks must:
- Start after or on
2024-06-02T00:00:00.000Z. - End before or on
2024-06-05T00:00:00.000Z.
If a child subtasks's start or end date falls outside the parent task's date range, you must programmatically update the parent task's start and end dates to include the child subtasks's timeline. The Gantt does not automatically adjust parent dates, and an incorrect date hierarchy may lead to unexpected rendering or visual representation.
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.GanttTaskTooltipTemplateDirective—Defines the content of the tooltip that appears when the user hovers over a task.
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.
Task Tooltip Template
To customize the tooltip content, use the kendoGanttTaskTooltipTemplate directive. This directive allows you to define a custom template, where the template context gives you access to the task's dataItem, which contains all the relevant task information.
The following example demonstrates how to customize the tooltip content by using the dataItem context variable.