Angular Gantt - validation

Configures validation properties.

Selector: dxo-validation
Type:

Object

View Demo

app.component.html
app.component.ts
app.module.ts
  • <dx-gantt ... >
  • <dxo-validation
  • [autoUpdateParentTasks]="true"
  • [validateDependencies]="true">
  • </dxo-validation>
  • <!-- ... -->
  • </dx-gantt>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  •  
  • export class AppComponent {
  • // ...
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  • import { DxGanttModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • imports: [
  • BrowserModule,
  • DxGanttModule
  • ],
  • declarations: [AppComponent],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

autoUpdateParentTasks

Specifies whether to recalculate the parent task's duration and progress when its child tasks are modified.

Type:

Boolean

Default Value: false

The Gantt uses the following rules to determine whether to update a parent task when its subtask is modified.

  • A parent task's duration equals a summary duration of its child tasks.
  • A parent task and its first child starts at the same time.
  • A parent task and its last child ends at the same time.
  • A parent task's progress is a summary progress of its child tasks.

DevExtreme Gantt - Parent and Child Tasks Validation

enablePredecessorGap

Specifies whether users can move or resize a predecessor to change a gap before a successor according to the dependency rules.

Type:

Boolean

Default Value: false

The Gantt component allows users to change the gap between tasks only if they move/resize a successor task. Note that users can use only a successor to create the gap between tasks.

The following image illustrates that the Gantt does not resize the gap between tasks when users move the predecessor:

DevExtreme Gantt - Move Successor to Change Gap

The enablePredecessorGap option allows users to increase/decrease the gap between the tasks with a predecessor. The Gantt component validates these changes and shifts the successor task to comply with the dependency rules if they are violated.

DevExtreme Gantt - Move Successor to Change Gap

NOTE
The enablePredecessorGap option is in effect if the validateDependencies option is set to true.
app.component.html
app.component.ts
app.module.ts
  • <dx-gantt ... >
  • <dxo-validation
  • [enablePredecessorGap]="true"
  • [validateDependencies]="true">
  • </dxo-validation>
  • <!-- ... -->
  • </dx-gantt>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  •  
  • export class AppComponent {
  • // ...
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  • import { DxGanttModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • imports: [
  • BrowserModule,
  • DxGanttModule
  • ],
  • declarations: [AppComponent],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

validateDependencies

Enables task dependencies validation.

Type:

Boolean

Default Value: false

The Gantt supports the following dependency validation rules:

  • Finish to Start (FS) - A successor task's start point should be equal or later than the preceding task's end point.
  • Start to Start (SS) - A successor task's start point should be equal or later than the preceding task's start point.
  • Finish to Finish (FF) - A successor task's end point should be equal or later than the preceding task's end point.
  • Start to Finish (SF) - A successor task's end point should be equal or later than a preceding task's start point.

The Gantt allows you to validate relationships between tasks when they are edited.

User Action Dependency Type Gantt's Reaction
Move a predecessor task (Task 1) to the left or right. Finish to Start (FS):
DevExtreme Gantt - Dependency validation - Finish To Start
Start to Start (SS):
DevExtreme Gantt - Dependency validation - Start To Start
Start to Finish (SF):
DevExtreme Gantt - Dependency validation - Start To Finish
Finish to Finish (FF):
DevExtreme Gantt - Dependency validation - Finish To Finish
The UI component moves a successor task (Task 2) forward or backward to the same time interval.
Move a successor task (Task 2) to the left. Finish to Start (FS):
DevExtreme Gantt - Dependency validation - Finish To Start
Start to Start (SS):
DevExtreme Gantt - Dependency validation - Start To Start
Start to Finish (SF):
DevExtreme Gantt - Dependency validation - Start To Finish
Finish to Finish (FF):
DevExtreme Gantt - Dependency validation - Finish To Finish
This change is denied as it violates dependency rules.

The control displays a popup window and suggests the following actions:
  • Cancel the operation.
  • Delete the dependency.
Move a successor task (Task 2) to the right. Finish to Start (FS):
DevExtreme Gantt - Dependency validation - Finish To Start
Start to Start (SS):
DevExtreme Gantt - Dependency validation - Start To Start
Start to Finish (SF):
DevExtreme Gantt - Dependency validation - Start To Finish
Finish to Finish (FF):
DevExtreme Gantt - Dependency validation - Finish To Finish
The control displays a popup window and suggests the following actions:
  • Cancel the operation.
  • Delete the dependency.
  • Move the task and keep the dependency. It creates a gap between tasks. Note that you can move tasks forward and backward within this gap while it meets the dependency rules.