$(function() {
var gantt = $("#gantt").dxGantt({
validation: {
autoUpdateParentTasks: true,
validateDependencies: 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: function (e) {
gantt.option("validation.autoUpdateParentTasks", e.value);
}
});
$("#validateDependencies").dxCheckBox({
text: "Enable Dependency Validation",
value: true,
onValueChanged: function (e) {
gantt.option("validation.validateDependencies", e.value);
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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=1.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/20.2.5/js/dx-gantt.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx-gantt.min.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/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>
<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;
}
var currentDate = new Date(Date.now()),
month = currentDate.getMonth(),
year = currentDate.getFullYear();
var 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, 29),
'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, 29),
'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, 30),
'progress': 0
}];
var 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
}];