Vue Gantt - Getting Started

The Gantt UI component displays the task flow and dependencies between tasks.

DevExtreme Gantt Chart - Overview

View Demo

Add the Gantt Component 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 UI component 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/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.css and dx-gantt.min.js files to your page.

    HTML
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.14/css/dx-gantt.min.css">
<script src="https://cdn3.devexpress.com/jslib/22.1.14/js/dx-gantt.min.js"></script>

  • Local Scripts

    You can find all the required files in the DevExtreme zip archive or DevExtreme folder (%ProgramFiles%\DevExpress 22.1\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 UI component is a jQuery DevExtreme UI component, and thus requires common DevExtreme resources (listed below) to be included in your page.

HTML
<!-- DevExtreme theme -->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.14/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/22.1.14/js/dx.all.js"></script>

Initialize the Gantt UI component in a DOM element.

JavaScript
$(function() {
    $("#gantt").dxGantt();
});
HTML
<div id="gantt"></div>

Bind the Gantt to Data

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

NOTE

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.

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 properties.

index.js
data.js
$(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.

NOTE
The Gantt UI component does not support data sorting.
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 property 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 property 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 property.

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