Add the Gantt Component to a Page
Add Gantt resources (scripts and styles) onto the page.
npm
The
devexpress-ganttis a dependency package of theDevExtremepackage. Therefore, install the DevExtreme npm package to include the Gantt UI component in your project. Then, add thedx-gantt.min.cssanddx-gantt.min.jsfiles to your page.HTML<link rel="stylesheet" href="node_modules/devexpress-gantt/dist/dx-gantt.min.css"> <script type="text/javascript" src="node_modules/devexpress-gantt/dist/dx-gantt.min.js"></script>
CDN
Add the
dx-gantt.min.cssanddx-gantt.min.jsfiles to your page.HTML<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.15/css/dx-gantt.min.css"> <script src="https://cdn3.devexpress.com/jslib/21.2.15/js/dx-gantt.min.js"></script>
Local Scripts
You can find all the required files in the DevExtreme zip archive or DevExtreme folder (%ProgramFiles(x86)%\DevExpress 21.2\DevExtreme\Sources). Copy the dx-gantt.min.js and dx-gantt.min.css files into your application folder. Then, link the required files.
HTML<script type="text/javascript" src="js/dx-gantt.min.js"></script> <link rel="stylesheet" href="css/dx-gantt.min.css">
Use the dx-gantt.css and dx-gantt.js files to add an unminified version of the resource files to your page.
The Gantt UI component is a jQuery DevExtreme UI component, and thus requires common DevExtreme resources (listed below) to be included in your page.
<!-- DevExtreme theme --> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.15/css/dx.light.css"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- DevExtreme common scripts --> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.2.15/js/dx.all.js"></script>
Initialize the Gantt UI component in a DOM element.
$(function() {
$("#gantt").dxGantt();
});<div id="gantt"></div>
Bind the Gantt to Data
The Gantt UI component requires separate data sources for tasks, resources, resource assignments and dependencies.
The tasks data source is required, whereas the data sources that contain resources, dependencies, and resource assignments are optional.
The 'id' and 'parentId' fields should not have the same value.
The example below illustrates how to bind the Gantt UI component to the data sources that contain the same field names as the UI component uses in its internal binding settings.
$(function() {
$("#gantt").dxGantt({
tasks: {
dataSource: tasks
},
dependencies: {
dataSource: dependencies
},
resources: {
dataSource: resources
},
resourceAssignments: {
dataSource: resourceAssignments
}
...
});
});
var tasks = [{
'id': 1,
'parentId': 0,
'title': 'Software Development',
'start': new Date('2019-02-21T05:00:00.000Z'),
'end': new Date('2019-07-04T12:00:00.000Z'),
'progress': 31
}, {
'id': 2,
'parentId': 1,
'title': 'Scope',
'start': new Date('2019-02-21T05:00:00.000Z'),
'end': new Date('2019-02-26T09:00:00.000Z'),
'progress': 60
}, {
'id': 3,
'parentId': 2,
'title': 'Determine project scope',
'start': new Date('2019-02-21T05:00:00.000Z'),
'end': new Date('2019-02-21T09:00:00.000Z'),
'progress': 100
},
// ...
];
var dependencies = [{
'id': 0,
'predecessorId': 1,
'successorId': 2,
'type': 0
}, {
'id': 1,
'predecessorId': 2,
'successorId': 3,
'type': 0
}, {
'id': 2,
'predecessorId': 3,
'successorId': 4,
'type': 0
},
// ...
];
var resources = [{
'id': 1,
'text': 'Management'
}, {
'id': 2,
'text': 'Project Manager'
}, {
'id': 3,
'text': 'Analyst'
},
// ...
];
var resourceAssignments = [{
'id': 0,
'taskId': 3,
'resourceId': 1
}, {
'id': 1,
'taskId': 4,
'resourceId': 1
}, {
'id': 2,
'taskId': 5,
'resourceId': 2
},
// ...
];If your data sources' field names differ from the standard field names mentioned above, use the [fieldName]Expr properties when you specify the tasks, resources, dependencies, and resource assignments configuration properties.
$(function() {
$("#gantt").dxGantt({
tasks: {
dataSource: tasks,
keyExpr: "taskId",
parentIdExpr: "parentTaskId",
startExpr: "startDate",
endExpr: "endDate",
progressExpr: "taskProgress",
titleExpr: "taskTitle",
colorExpr: "taskColor"
},
dependencies: {
dataSource: dependencies,
keyExpr: "depId",
predecessorIdExpr: "preId",
successorIdExpr: "sucId",
typeExpr: "depType"
},
...
});
});
var tasks = [{
'taskId': 1,
'parentTaskId': 0,
'taskTitle': 'Software Development',
'startDate': new Date('2019-02-21T05:00:00.000Z'),
'endDate': new Date('2019-07-04T12:00:00.000Z'),
'taskProgress': 31,
'taskColor': 'red'
},
// ...
];
var dependencies = [{
'depId': 0,
'preId': 1,
'sucId': 2,
'depType': 0
},
// ...
];Add Columns to the Gantt
Use the columns property to specify columns that the Gantt UI component should display in the task list. The UI component gets columns from the tasks data source.
$(function() {
$("#gantt").dxGantt({
// ...
columns: [{
dataField: "title",
caption: "Subject",
width: 300
}, {
dataField: "start",
caption: "Start Date"
}, {
dataField: "end",
caption: "End Date"
}],
...
});
});
var tasks = [{
'id': 1,
'parentId': 0,
'title': 'Software Development',
'start': new Date('2019-02-21T05:00:00.000Z'),
'end': new Date('2019-07-04T12:00:00.000Z'),
'progress': 31
},
// ...
];Enable Editing
Set the enabled property to true to allow users to edit tasks in the Gantt.
$(function() {
$("#gantt").dxGantt({
...
editing: {
enabled: true
},
...
});
});Preselect a Task
Use the selectedRowKey property to specify a key of the task that should be selected in the Gantt.
$(function() {
$("#gantt").dxGantt({
selectedRowKey: 1,
// ...
});
});Handle the Selection Change Event
Assign a function to the onSelectionChanged property.
$(function() {
$("#gantt").dxGantt({
// ...
onSelectionChanged: function (e) {
if (e.selectedRowKey === 2)
console.log(`This task is overdue`);
}
});
});