General Information

.NET Subscription

What's Included

DevExpress Installation

DevExpress Code Examples

Common Tools

Project Converter

Assembly Deployment Tool

Localization Service

Quality Assurance and Productivity

CodeRush for Visual Studio (FREE)

TestCafe Studio

Desktop

Controls

WinForms

WPF

VCL

WinUI

Tools

WinForms Skin Editor

WPF Theme Designer

WPF Theme Editor (Legacy)

Coded UI Test Extension

Frameworks and Libraries

XAF - Cross-Platform .NET App UI

XPO - .NET ORM Library (FREE)

XPO Profiler

Core Libraries

Drawing Graphics Library

.NET App Security & Web API Service (FREE)

Web

Mobile

Xamarin UI Controls (FREE)

.NET MAUI (FREE)

Enterprise and Analytic Tools

Reporting

Report and Dashboard Server

BI Dashboard

Office File API

End-User Documentation

Interface Elements for Desktop

Interface Elements for Web

Dashboard for Desktop

Dashboard for Web

JavaScript/jQuery Gantt - Getting Started

jQuery

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Angular

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Vue

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

React

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

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.

View on GitHub

Add the Gantt Component to a Page

jQuery

Add DevExtreme to your jQuery application and add Gantt resources (scripts and styles) to the page:

index.js

index.html

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

<html>
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_23_2/css/dx-gantt.min.css">
        <script src="https://cdn3.devexpress.com/jslib/minor_23_2/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/minor_23_2/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_23_2/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="gantt"></div>
    </body>
</html>

Angular

Add DevExtreme to your Angular application and add Gantt resources (scripts and styles) to the page:

app.component.html

app.module.ts

angular.json

<dx-gantt></dx-gantt>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxGanttModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

// ...
"styles": [
    // ...
    "node_modules/devexpress-gantt/dist/dx-gantt.min.css",
],

Vue

Add DevExtreme to your Vue application and add Gantt resources (scripts and styles) to the page:

App.vue

<template>
    <DxGantt>
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.min.css';
import { DxGantt } from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    }
}
</script>

React

Add DevExtreme to your React application and use the following code snippet to create a Gantt component:

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.min.css';

import { Gantt } from 'devextreme-react/gantt';

function App() {
    return (
        <Gantt>
        </Gantt>
    );
}

export default App;

Bind the Gantt to Data

The Gantt UI component 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.
'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.

jQuery

index.js

data.js

$(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,
}];

Angular

app.component.html

app.service.ts

app.component.ts

<dx-gantt [rootValue]="-1">
    <dxo-tasks [dataSource]="tasks"></dxo-tasks>
    <dxo-dependencies [dataSource]="dependencies"></dxo-dependencies>
    <dxo-resources [dataSource]="resources"></dxo-resources>
    <dxo-resource-assignments
        [dataSource]="resourceAssignments"
    ></dxo-resource-assignments>
</dx-gantt>

import { Injectable } from '@angular/core';

export interface Task {
    id: number;

    parentId: number;

    title: string;

    start: Date;

    end: Date;

    progress: number;
}

export interface Dependency {
    id: number;

    predecessorId: number;

    successorId: number;

    type: number;
}

export interface Resource {
    id: number;

    text: string;
}

export interface ResourceAssignment {
    id: number;

    taskId: number;

    resourceId: number;
}

const tasks: Task[] = [{
    id: 1,
    parentId: -1,
    title: 'Software Development',
    start: new Date('2019-02-21T05:00:00.000Z'),
    end: new Date('2019-05-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: Dependency[] = [{
    id: 1,
    predecessorId: 1,
    successorId: 2,
    type: 0,
}, {
    id: 2,
    predecessorId: 2,
    successorId: 3,
    type: 0,
}];

const resources: Resource[] = [{
    id: 1,
    text: 'Management',
}];

const resourceAssignments: ResourceAssignment[] = [{
    id: 0,
    taskId: 3,
    resourceId: 1,
}];

@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }

    getDependencies(): Dependency[] {
        return dependencies;
    }

    getResources(): Resource[] {
        return resources;
    }

    getResourceAssignments(): ResourceAssignment[] {
        return resourceAssignments;
    }
}

import { Component } from '@angular/core';
import {
    Service, Task, Dependency, Resource, ResourceAssignment,
} from './app.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [Service],
})
export class AppComponent {
    tasks: Task[];

    dependencies: Dependency[];

    resources: Resource[];

    resourceAssignments: ResourceAssignment[];

    constructor(service: Service) {
        this.tasks = service.getTasks();
        this.dependencies = service.getDependencies();
        this.resources = service.getResources();
        this.resourceAssignments = service.getResourceAssignments();
    }
}

Vue

App.vue

data.js

template>
<DxGantt
    :root-value="-1"
>
    <DxTasks :data-source="tasks"/>
    <DxDependencies :data-source="dependencies"/>
    <DxResources :data-source="resources"/>
    <DxResourceAssignments :data-source="resourceAssignments"/>
</DxGantt>
</template>

<script>
// ..
import {
    DxGantt,
    DxTasks,
    DxDependencies,
    DxResources,
    DxResourceAssignments,
} from 'devextreme-vue/gantt';

import {
    tasks,
    dependencies,
    resources,
    resourceAssignments,
} from './data.js';

export default {
    components: {
        DxGantt,
        DxTasks,
        DxDependencies,
        DxResources,
        DxResourceAssignments,
    },
    data() {
        return {
            tasks,
            dependencies,
            resources,
            resourceAssignments,
        };
    },
};
</script>

export 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,
}];

export const dependencies = [{
    id: 1,
    predecessorId: 1,
    successorId: 2,
    type: 0,
}, {
    id: 2,
    predecessorId: 2,
    successorId: 3,
    type: 0,
}];

export const resources = [{
    id: 1,
    text: 'Management',
}];

export const resourceAssignments = [{
    id: 0,
    taskId: 3,
    resourceId: 1,
}];

React

App.js

data.js

import Gantt, {
    Tasks, Dependencies, Resources, ResourceAssignments,
} from 'devextreme-react/gantt';

import {
    tasks, dependencies, resources, resourceAssignments,
} from './data.js';

function App() {
    return (
        <Gantt rootValue={-1}>
            <Tasks dataSource={tasks} />
            <Dependencies dataSource={dependencies} />
            <Resources dataSource={resources} />
            <ResourceAssignments dataSource={resourceAssignments} />
        </Gantt>
    );
}

export default App;

export 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,
}];

export const dependencies = [{
    id: 1,
    predecessorId: 1,
    successorId: 2,
    type: 0,
}, {
    id: 2,
    predecessorId: 2,
    successorId: 3,
    type: 0,
}];

export const resources = [{
    id: 1,
    text: 'Management',
}];

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

NOTE

The Gantt UI component does not support data sorting.

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        columns: [{
            dataField: "title",
            caption: "Subject",
            width: 300
        }, {
            dataField: "start",
            caption: "Start Date"
        }, {
            dataField: "end",
            caption: "End Date"
        }],        
        ...
    });
});

Angular

app.component.html

<dx-gantt ... >
    <dxi-column dataField="title" caption="Subject" [width]="300"></dxi-column>
    <dxi-column dataField="start" caption="Start Date" dataType="date"></dxi-column>
    <dxi-column dataField="end" caption="End Date" dataType="date"></dxi-column>
</dx-gantt>

Vue

App.vue

<template>
<DxGantt ... >
    <DxColumn
        :width="300"
        data-field="title"
        caption="Subject"
    />
    <DxColumn
        data-field="start"
        caption="Start Date"
    />
    <DxColumn
        data-field="end"
        caption="End Date"
    />
</DxGantt>
</template>
<script>
// ...
import {
    DxGantt,
    // ...
    DxColumn,
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt,
        // ...
        DxColumn,
    },
    // ...
};
</script>

React

App.js

import Gantt, {
    // ... 
    Column,
} from 'devextreme-react/gantt';

function App() {
    return (
        <Gantt ... >
            <Column dataField="title" caption="Subject" width={300} />
            <Column dataField="start" caption="Start Date" />
            <Column dataField="end" caption="End Date" />
        </Gantt>
    );
}

export default App;

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery Gantt - Getting Started

jQuery

Angular

Vue

React

Add the Gantt Component to a Page

jQuery

Angular

Vue

React

Bind the Gantt to Data

jQuery

Angular

Vue

React

Add Columns to the Gantt

jQuery

Angular

Vue

React