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

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 a taskModelFields 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 taskRendered when the task has child subtasks.
  • milestone taskRendered when the task has no child subtasks, and the start and end values are equal.
  • regular taskRendered when the task has no child subtasks, and the start and end 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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

Templates

You can customize the content of the task and the summary task components by using the following Gantt templates:

Task Content Template

The following example demonstrates how to customize only the text content section element of the task by using the kendoGanttTaskContentTemplate directive.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme: