JavaScript/jQuery Gantt - Getting Started
The Gantt UI component displays the task flow and dependencies between tasks.
This tutorial shows how to add a Gantt component to your application and configure the component.
Each section in this tutorial describes one configuration step. You can also find full source code in the GitHub repository.
Add the Gantt Component to a Page
Add DevExtreme to your jQuery application and add Gantt resources (scripts and styles) to the page:
- $(function() {
- $("#gantt").dxGantt({ });
- });
- <html>
- <head>
- <!-- ... -->
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx-gantt.min.css">
- <script src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx-gantt.min.js"></script>
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css">
- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
- <script type="text/javascript" src="index.js"></script>
- </head>
- <body>
- <div id="gantt"></div>
- </body>
- </html>
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.
'id' and 'parentId' fields should not have the same value.
If your first (root) task 'parentId' value is not 0, specify a rootValue. For example, if the root task 'parentId' is -1, set the rootValue property to -1.
The example below illustrates how to bind the Gantt UI component to data sources that contain the same field names as those the UI component uses in its internal binding settings. If field names of your data sources differ from the standard field names, use the [dataField]Expr expressions listed in the API section of tasks, resources, resource assignments, and dependencies.
- $(function() {
- $("#gantt").dxGantt({
- rootValue: -1,
- tasks: {
- dataSource: tasks
- },
- dependencies: {
- dataSource: dependencies
- },
- resources: {
- dataSource: resources
- },
- resourceAssignments: {
- dataSource: resourceAssignments
- }
- ...
- });
- });
- const tasks = [{
- id: 1,
- parentId: -1,
- 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,
- }];
- const dependencies = [{
- id: 1,
- predecessorId: 1,
- successorId: 2,
- type: 0,
- }, {
- id: 2,
- predecessorId: 2,
- successorId: 3,
- type: 0,
- }];
- const resources = [{
- id: 1,
- text: 'Management',
- }];
- const resourceAssignments = [{
- id: 0,
- taskId: 3,
- resourceId: 1,
- }];
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"
- }],
- ...
- });
- });