DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Gantt - Validation

The DevExtreme 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/24.1.6/js/dx-gantt.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx-gantt.min.css" /> <script src="js/dx.all.js"></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; }
const currentDate = new Date(Date.now()); const month = currentDate.getMonth(); const year = currentDate.getFullYear(); const tasks = [{ id: 1, parentId: 0, title: 'Johnson Residence Construction Project', start: new Date(year, month - 1, 1), end: new Date(year, month - 1, 1), progress: 0, }, { id: 2, parentId: 1, title: 'Planning and Pre-Construction Phase', start: new Date(year, month - 1, 1), end: new Date(year, month - 1, 1), progress: 0, }, { id: 3, parentId: 2, title: 'Architectural Design and Site Planning', start: new Date(year, month - 1, 1), end: new Date(year, month - 1, 15), progress: 0, }, { id: 4, parentId: 2, title: 'Engineering and Final Blueprint', start: new Date(year, month - 1, 8), end: new Date(year, month - 1, 15), progress: 0, }, { id: 5, parentId: 2, title: 'City Permits and Contracts', start: new Date(year, month - 1, 15), end: new Date(year, month - 1, 18), progress: 0, }, { id: 6, parentId: 1, title: 'Construction Phase', start: new Date(year, month - 1, 18), end: new Date(year, month - 1, 18), progress: 0, }, { id: 7, parentId: 6, title: 'Grading and Excavation', start: new Date(year, month - 1, 18), end: new Date(year, month - 1, 22), progress: 0, }, { id: 8, parentId: 6, title: 'Demolition and Removal', start: new Date(year, month - 1, 19), end: new Date(year, month - 1, 23), progress: 0, }, { id: 9, parentId: 6, title: 'Foundation and Concrete ', start: new Date(year, month - 1, 22), end: new Date(year, month - 1, 28), progress: 0, }, { id: 10, parentId: 6, title: 'Rough Framing and Carpentery', start: new Date(year, month - 1, 25), end: new Date(year, month, 5), progress: 0, }, { id: 11, parentId: 6, title: 'Inspection (Structure)', start: new Date(year, month, 5), end: new Date(year, month, 5), progress: 0, }, { id: 12, parentId: 6, title: 'Electrical Rough-in', start: new Date(year, month, 6), end: new Date(year, month, 19), progress: 0, }, { id: 13, parentId: 6, title: 'Plumbing Rough-in', start: new Date(year, month, 19), end: new Date(year, month, 19), progress: 0, }, { id: 14, parentId: 6, title: 'Heating and A/C', start: new Date(year, month, 19), end: new Date(year, month, 26), progress: 0, }, { id: 15, parentId: 6, title: 'Drywall', start: new Date(year, month, 25), end: new Date(year, month + 1, 10), progress: 0, }, { id: 16, parentId: 6, title: 'Painting (Exterior)', start: new Date(year, month + 1, 7), end: new Date(year, month + 1, 21), progress: 0, }, { id: 17, parentId: 6, title: 'Interior Carpentery (Interior)', start: new Date(year, month + 1, 17), end: new Date(year, month + 1, 28), progress: 0, }, { id: 18, parentId: 6, title: 'Flooring and Interior Paint', start: new Date(year, month + 1, 26), end: new Date(year, month + 2, 9), progress: 0, }, { id: 19, parentId: 1, title: 'Final Phase', start: new Date(year, month + 2, 9), end: new Date(year, month + 2, 9), progress: 0, }, { id: 20, parentId: 19, title: 'Review-Punch List', start: new Date(year, month + 2, 9), end: new Date(year, month + 2, 23), progress: 0, }, { id: 21, parentId: 19, title: 'Final Inspection', start: new Date(year, month + 2, 24), end: new Date(year, month + 2, 24), progress: 0, }, { id: 22, parentId: 19, title: 'Final Paperwork and Documents', start: new Date(year, month + 2, 24), end: new Date(year, month + 2, 28), progress: 0, }]; const dependencies = [{ id: 1, predecessorId: 4, successorId: 5, type: 0, }, { id: 2, predecessorId: 5, successorId: 7, type: 0, }, { id: 3, predecessorId: 12, successorId: 13, type: 0, }, { id: 4, predecessorId: 13, successorId: 14, type: 0, }, { id: 5, predecessorId: 18, successorId: 20, type: 0, }, { id: 6, predecessorId: 21, successorId: 22, type: 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.