Angular Gantt - validation

Configures validation properties.

Selector: dxo-validation

Type:

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        validation: {
            autoUpdateParentTasks: true,
            validateDependencies: true
        },
        // ...
    });
});

Angular

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 { }

Vue

App.vue

<template>
    <DxGantt ... >
        <DxValidation
            :auto-update-parent-tasks="true"
            :validate-dependencies="true" 
         />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxValidation, 
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, 
            DxValidation, 
            // ... 
        }
    };
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Validation, 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <Validation
                autoUpdateParentTasks={true}
                validateDependencies={true} />
            {/* ... */}
        </Gantt>
    );
};

export default App;

ASP.NET Core Controls

Razor C#

@(Html.DevExtreme().Gantt()
    .Validation(e => {
        e.AutoUpdateParentTasks(true)
        e.ValidateDependencies(true)
    })
    // ...
)

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Gantt()
    .Validation(e => {
        e.AutoUpdateParentTasks(true)
        e.ValidateDependencies(true)
    })
    // ...
)

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.

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        validation: {
            validateDependencies: true,
            enablePredecessorGap: true
        },
        // ...
    });
});

Angular

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 { }

Vue

App.vue

<template>
    <DxGantt ... >
        <DxValidation
            :enable-predecessor-gap="true"
            :validate-dependencies="true" 
         />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxValidation, 
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, 
            DxValidation, 
            // ... 
        }
    };
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Validation, 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <Validation
                enablePredecessorGap={true}
                validateDependencies={true} />
            {/* ... */}
        </Gantt>
    );
};

export default App;

ASP.NET Core Controls

Razor C#

@(Html.DevExtreme().Gantt()
    .Validation(e => {
        e.EnablePredecessorGap(true)
        e.ValidateDependencies(true)
    })
    // ...
)

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Gantt()
    .Validation(e => {
        e.EnablePredecessorGap(true)
        e.ValidateDependencies(true)
    })
    // ...
)

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): 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: Cancel the operation. Delete the dependency.
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: 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.