DevExtreme Vue - Getting Started with Gantt

The Gantt widget displays the task flow and dependencies between tasks.

DevExtreme Gantt Chart - Overview

NOTE

DevExtreme Gantt is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please email your comments to support@devexpress.com.

View Demo

Add the Gantt Widget to a Page

Add Gantt resources (scripts and styles) onto the page.

npm

The devexpress-gantt is a dependency package of the DevExtreme package. Therefore, install the DevExtreme npm package to include the Gantt widget in your project. Then, add the dx-gantt.min.css and dx-gantt.min.js files to your page.
HTML
```
<link rel="stylesheet" href="node_modules/devexpress-gantt/dx-gantt.min.css">
<script type="text/javascript" src="node_modules/devexpress-gantt/dx-gantt.min.js"></script>
```

CDN

Add the dx-gantt.min.css and dx-gantt.min.js files to your page.

HTML

<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.15/css/dx-gantt.min.css">
<script src="https://cdn3.devexpress.com/jslib/19.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 19.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.

NOTE

The Gantt widget is a jQuery DevExtreme widget, and thus requires common DevExtreme resources (listed below) to be included in your page.

HTML

<!-- DevExtreme themes -->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.15/css/dx.common.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.15/css/dx.light.css">
<!-- jQuery -->
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<!-- DevExtreme common scripts -->
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/19.2.15/js/dx.all.js"></script>

Initialize the Gantt widget in a DOM element.

JavaScript

$(function() {
    $("#gantt").dxGantt();
});

HTML

<div id="gantt"></div>

Bind the Gantt to Data

The Gantt widget requires separate data sources for tasks, resources, resource assignments and dependencies.

NOTE

The tasks data source is required, whereas the data sources that contain resources, dependencies, and resource assignments are optional. [/note]

The example below illustrates how to bind the Gantt widget to the data sources that contain the same field names as the widget uses in its internal binding settings.

index.js

data.js

$(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 options.

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
    tasks: {
        dataSource: tasks,
        keyExpr: "taskId",
        parentIdExpr: "parentTaskId",
        startExpr: "startDate",
        endExpr: "endDate",
        progressExpr: "taskProgress",
        titleExpr: "taskTitle",
    },
    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
},        
    // ...
];

var dependencies = [{
    'depId': 0,
    'preId': 1,
    'sucId': 2,
    'depType': 0
},         
    // ...
];

Add Columns to the Gantt

Use the columns option to specify columns that the Gantt widget should display in the task list. The widget gets columns from the tasks data source.

index.js

data.js

$(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 option to true to allow users to edit tasks in the Gantt.

index.js

$(function() {
    $("#gantt").dxGantt({
        ...
        editing: {
            enabled: true
        },
        ...
    });
});

Preselect a Task

Use the selectedRowKey option to specify a key of the task that should be selected in the Gantt.

index.js

$(function() {
    $("#gantt").dxGantt({
        selectedRowKey: 1,
        // ...
    });
});

Handle the Selection Change Event

Assign a function to the onSelectionChanged option.

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onSelectionChanged: function (e) {
            if (e.selectedRowKey === 2)
                console.log(`This task is overdue`); 
        }
    });
});