All docs
V20.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
Box
Map
Vue
A newer version of this page is available. Switch to the current version.

validation

Configures validation properties.

Type:

Object

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 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.