Angular Gantt - validation
- <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.
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.
enablePredecessorGap
Specifies whether users can move or resize a predecessor to change a gap before a successor according to the dependency rules.
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:
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.
- <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.
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): Start to Start (SS): Start to Finish (SF): Finish to Finish (FF): |
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): Start to Start (SS): Start to Finish (SF): Finish to Finish (FF): |
This change is denied as it violates dependency rules. The control displays a popup window and suggests the following actions:
|
Move a successor task (Task 2) to the right. |
Finish to Start (FS): Start to Start (SS): Start to Finish (SF): Finish to Finish (FF): |
The control displays a popup window and suggests the following actions:
|
If you have technical questions, please create a support ticket in the DevExpress Support Center.