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

Creating Dependencies through Dragging

The Gantt provides the option for creating new dependencies by dragging from the drag clue of a given task to the drag clue of another.

Basic Concepts

To enable creating dependencies through dragging, apply the kendoGanttDependencyDragCreate directive to the <kendo-gantt> element. Once applied, it will render drag clues before and after the task when hovered. Dragging from one clue to another will result in the Gantt emitting the dependencyAdd event with data for the new dependency.

Note that the Gantt ships with a built-in mechanism for evaluating whether an attempted dependency is valid. The default validator can be replaced with a custom one if needed. For more information about the default validation rules, or how to plug in your own validation logic, refer to the article on validation.

The following example demonstrates how to handle the dependencyAdd event and create the new dependencies.

Example
View Source
Change Theme:

Validation

By default, when trying to create new dependencies with dragging, the Gantt will evaluate each attempt and mark it as invalid in the following cases:

  • When the two tasks are in a parent-child relationship.
  • When the two tasks are already dependent on one another. Only one dependency is allowed per pair.
  • When the start or end times of the two tasks are incompatible with the attempted dependency type.

To replace the built-in validation logic with a custom one, provide a validateNewDependency callback.

The following example showcases how to provide a custom validation callback.

Example
View Source
Change Theme:

Validation Tooltip

During each drag-create operation, a tooltip will provide information about the predecessor and successor tasks, and the validity of the attempted dependency.

The following example demonstrates the validation tooltip.

Example
View Source
Change Theme:

Auto-Scrolling

When the content of the timeline overflows, it will be scrolled when dragging outside the boundaries of the container.

By default the scroll speed is 1 pixel per millisecond, and auto-scrolling is triggered when dragging within 10 pixels threshold from the visible boundaries of the timeline.

To customize this behavior, bind the dragScrollSettings option to a DragScrollSettings object with the preferred step, interval and threshold values.

The following example demonstrates how to modify the scroll settings.

Example
View Source
Change Theme: