JavaScript/jQuery Gantt - Validation

The DevExtreme JavaScript JavaScript Gantt component allows you to validate relationships between tasks and handle errors. Set the enableDependencyValidation property to true to enable task validation.

Backend API

$(() => { const gantt = $('#gantt').dxGantt({ validation: { autoUpdateParentTasks: true, validateDependencies: true, enablePredecessorGap: true, }, tasks: { dataSource: tasks, }, dependencies: { dataSource: dependencies, }, editing: { enabled: true, }, columns: [{ dataField: 'title', caption: 'Task', width: 300, }, { dataField: 'start', caption: 'Start Date', }, { dataField: 'end', caption: 'End Date', }], taskListWidth: 500, taskTitlePosition: 'none', }).dxGantt('instance'); $('#autoUpdateParentTasks').dxCheckBox({ text: 'Auto Update Parent Tasks', value: true, onValueChanged(e) { gantt.option('validation.autoUpdateParentTasks', e.value); }, }); $('#validateDependencies').dxCheckBox({ text: 'Enable Dependency Validation', value: true, onValueChanged(e) { gantt.option('validation.validateDependencies', e.value); }, }); $('#enablePredecessorGap').dxCheckBox({ text: 'Enable Predecessor Gap', value: true, onValueChanged(e) { gantt.option('validation.enablePredecessorGap', e.value); }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/25.1.6/js/dx-gantt.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx-gantt.min.css" /> <script src="js/dx.all.js?v=25.1.6"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="options"> <div class="caption">Options</div> <div class="option"> <div id="autoUpdateParentTasks"></div> </div> <div class="option"> <div id="validateDependencies"></div> </div> <div class="option"> <div id="enablePredecessorGap"></div> </div> </div> <div id="gantt"> </div> </div> </body> </html>

#gantt { height: 700px; } .options { margin-bottom: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: relative; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; margin-right: 40px; display: inline-block; } .option:last-child { margin-right: 0; }

The JavaScript 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 JavaScript Gantt also has the autoUpdateParentTasks property that enables validation for parent-child relationship:

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.

The JavaScript Gantt processes changes in task values before they are saved to a database. The component displays a popup window with a list of available actions if an error can be handled in several ways.