Configuration

Default Value: null

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

activeStateEnabled

Specifies whether or not the widget changes its state when interacting with a user.

Type:

Default Value: false

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

allowSelection

Specifies whether users can select tasks in the Gantt.

Type:

Default Value: true

jQuery

JavaScript

$(function() {
    $("#gantt").dxGantt({
        allowSelection: false,
        // ...
    });
});

columns

An array of columns in the Gantt.

Type:

Array<TreeList Column | String>

Default Value: undefined

The columns option accepts an array of columns. To configure a column, use a dxTreeListColumn object or specify a data source field (as a string value) to which the column is bound.

NOTE

The Gantt widget does not support data sorting.

jQuery

JavaScript

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

contextMenu

Configures the context menu settings.

Type:

dependencies

Configures dependencies.

Type:

Default Value: null

Dependencies specify the relationships between tasks. The following image illustrates how the Gantt displays dependencies in the chart:

DevExtreme Gantt Chart - Dependencies

The Gantt widget supports the following dependency types:

Finish to Start (FS) - The predecessor task's endpoint specifies the successor task's start point.
Start to Start (SS) - The predecessor task's start point specifies the successor task's start point.
Finish to Finish (FF) - The predecessor task's end point specifies the successor task's end point.
Start to Finish (SF) - The predecessor task's start point specifies the successor task's end point.

In a database, you can use any of the following formats (digit or string) to store dependency types:

Dependency Type	Supported Values
Finish to Start (FS)	0, "0", "FS", "fs"
Start to Start (SS)	1, "1", "SS", "ss"
Finish to Finish (FF)	2, "2", "FF", "ff"
Start to Finish (SF)	3, "3", "SF", "sf"

Use the dataSource option to bind the widget to a data source, which contains information about dependency types. If the field names in your data source differ from the 'id', 'type', 'predecessorId' and 'successorId' default names, use the keyExpr, typeExpr options to map data fields.

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        dependencies: {
            dataSource: dependencies,
            keyExpr: "dependencyId",
            typeExpr: "dependencyType",
            predecessorIdExpr: "taskPredecessorId",
            successorIdExpr: "taskSuccessorId"
        },
        //...
    });
});

var dependencies = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0
},    
// ...
];

Angular

app.component.html

app.component.ts

app.module.ts

app.service.ts

angular.json

<dx-gantt ... >
    <dxo-dependencies
        [dataSource]="dependencies" 
        keyExpr="dependencyId"
        typeExpr="dependencyType"
        predecessorIdExpr="taskPredecessorId"
        successorIdExpr="taskSuccessorId" >
    </dxo-dependencies>
    <!-- ... -->
</dx-gantt>

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dependencies: Dependency[];
    // ...

    constructor(service: Service) {
        this.dependencies = service.getDependencies();
        // ...
    }        
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Dependency, ... } from './app.service';

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

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

export class Dependency {
    dependencyId: number;
    taskPredecessorId: number;
    taskSuccessorId: number;
    dependencyType: number;
} 

let dependencies: Dependency[] = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0 
},
// ...   
]; 
@Injectable()
export class Service {
    getDependencies(): Dependency[] {
        return dependencies;
    }
}

{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >
        <DxDependencies
            :data-source="dependencies"
            key-expr="dependencyId"
            type-expr="dependencyType"
            predecessor-id-expr="taskPredecessorId"
            successor-id-expr="taskSuccessorId" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxDependencies, 
        // ... 
    } from 'devextreme-vue/gantt';
    import { 
        dependencies, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxDependencies, 
            // ... 
        },
        data() {
            return { 
                dependencies, 
                // ... 
            };
        }
    };
</script>

export const dependencies = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0
},
// ...
];

React

App.js

data.js

import React from 'react';

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

import Gantt, { 
    Dependencies, 
    // ... 
} from 'devextreme-react/gantt';
import { 
    dependencies, 
    // ... 
} from './data.js';

class App extends React.Component {
    render() {
        return (
            <Gantt ... >
                <Dependencies 
                    dataSource={dependencies}
                    keyExpr="dependencyId"
                    typeExpr="dependencyType"
                    predecessorIdExpr="taskPredecessorId"
                    successorIdExpr="taskSuccessorId" />
                {/* ... */}
            </Gantt>
        );
    }
}
export default App;

export const dependencies = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0
},
// ...
];

disabled

Specifies whether the widget responds to user interaction.

Type:

Default Value: false

editing

Configures edit options.

Type:

The widget allows users to add, modify and delete tasks, resources and dependencies. Set the enabled option to true to enable edit functionality.

NOTE

Make sure that your data sources (tasks, resources and dependencies) support edit actions.

jQuery

index.js

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

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Default Value: {}

jQuery

$(function(){
    $("#ganttContainer").dxGantt({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-gantt ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-gantt>

import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxGanttModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxGantt ...
        :element-attr="ganttAttributes">
    </DxGantt>
</template>

<script>
import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    data() {
        return {
            ganttAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    ganttAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Gantt ...
                elementAttr={this.ganttAttributes}>
            </Gantt>
        );
    }
}
export default App;

firstDayOfWeek

Specifies the first day of a week.

Type:

Number

Default Value: undefined

Accepted Values: 0 | 1 | 2 | 3 | 4 | 5 | 6

The option's value can be from 0 to 6.

0 - Sunday
1 - Monday
2 - Tuesday
3 - Wednesday
4 - Thursday
5 - Friday
6 - Saturday

The culture settings specify the option's default value.

Use the FirstDayOfWeek enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday.

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

Type:

Default Value: false

height

Specifies the widget's height.

Type:

|

|

Return Value:

|

The widget's height.

Default Value: undefined

This option accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".
Function
A function returning either of the above. For example:
JavaScript
```
height: function() {
    return window.innerHeight / 1.5;
}
```

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

Default Value: undefined

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type:

Default Value: false

onContentReady

A function that is executed when the widget's content is ready and each time the content is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Gantt

The widget's instance.

element

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Model data. Available only when using Knockout.

Default Value: null

onContextMenuPreparing

A function that is executed before the context menu is rendered.

Type:

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel showing the context menu.
component	Gantt	The widget's instance.
data	any	Data of the right-clicked task or dependency.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or dxEvent)	The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.
items	Array<Object>	Items to be displayed in the context menu.
targetKey	any	The key of the right-clicked task or dependency.
targetType	String	The type of right-clicked task or dependency.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onContextMenuPreparing: function (e) {
            // your code
            e.cancel = true;
        }
    });
});

onCustomCommand

A function that is executed after a custom command item was clicked. Allows you to implement a custom command's functionality.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Gantt	The widget instance's name.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
name	String	The name of the clicked item.

Name

Type

Description

component

Gantt

The widget instance's name.

element

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

name

The name of the clicked item.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onCustomCommand: function (e) {
            // your code
        }
    });
});

onDependencyDeleting

A function that is executed before a dependency is deleted.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the dependency's deletion.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The key of the deleted dependency.
model	Object	Model data. Available only if you use Knockout.
values	any	The values of the deleted dependency.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onDependencyDeleting: function (e) {
            if (e.key != 1) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onDependencyInserting

A function that is executed before a dependency is inserted.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the dependency's insertion.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	Model data. Available only if you use Knockout.
values	any	The values of the inserted dependency.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onDependencyInserting: function (e) {
            if (e.values.type == 3) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Gantt

The widget's instance.

element

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Gantt

The widget's instance.

element

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Gantt	The widget's instance.
fullName	String	The path to the modified option that includes all parent options.
name	String	The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into.
value	any	The modified option's new value.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	Model data. Available only if you use Knockout.

Default Value: null

onResourceAssigning

A function that is executed before a resource is assigned to a task.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the resource assignment.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	Model data. Available only if you use Knockout.
values	any	The values of the processed resource and task.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceAssigning: function (e) {
            if (e.values.taskID != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onResourceDeleting

A function that is executed before a resource is deleted.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the resource deletion.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The key of the deleted resource.
model	Object	Model data. Available only if you use Knockout.
values	any	The values of the deleted resource.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceDeleting: function (e) {
            if (e.key == 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onResourceInserting

A function that is executed before a resource is inserted.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the resource insertion.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	Model data. Available only if you use Knockout.
values	any	The values of the inserted resource.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceInserting: function (e) {
            if (e.values.text == " "){
                // your code
                e.cancel = true;
            }
        }
    });
});

onResourceUnassigning

A function that is executed before a resource is unassigned from a task.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the resource unassignment.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The key of the resource.
model	Object	Model data. Available only if you use Knockout.
values	any	The values of the processed resource and task.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceUnassigning: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onSelectionChanged

A function that is executed after users select a task or clear its selection.

Type:

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	Model data. Available only if you use Knockout.
selectedRowKey	any	The key of the row whose selection state was changed.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onSelectionChanged: function (e) {
            if (e.selectedRowKey === 2) {
                // your code
            } else {
                // your code
            }
        }
    });
});

onTaskClick

A function that is executed when a user clicks a task.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Gantt	The widget's instance.
data	any	The task data.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or dxEvent)	The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.
key	any	The task key.
model	Object	Model data. Available only if you use Knockout.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskClick: function (e) {
            if (e.key != 0) {
                // your code
            }
        }
    });
});

onTaskDblClick

A function that is executed when a user double-clicks a task.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the resource unassignment.
component	Gantt	The widget's instance.
data	any	The task data.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or dxEvent)	The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.
key	any	The task key.
model	Object	Model data. Available only if you use Knockout.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskDblClick: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onTaskDeleting

A function that is executed before a task is deleted.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the task deletion.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The key of the deleted task.
model	Object	Model data. Available only if you use Knockout.
values	any	The values of the deleted task.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskDeleting: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onTaskEditDialogShowing

A function that is executed before the edit dialog is shown.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the edit dialog showing.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
hiddenFields	Array<String>	An array of hidden fields.
key	any	The task key.
model	Object	Model data. Available only if you use Knockout.
readOnlyFields	Array<String>	An array of read-only fields.
values	any	The task values.

Default Value: null

Note that the hiddenFields and readOnlyFields parameters affect only task fields. Use the allowTaskResourceUpdating option to hide the Resource Manager in the Task Details dialog.

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskEditDialogShowing: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onTaskInserting

A function that is executed before a task is inserted.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the task insertion.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	Model data. Available only if you use Knockout.
values	any	The values of the inserted task.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskInserting: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onTaskMoving

A function that is executed before a task is moved.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the task's movement.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The task key.
model	Object	Model data. Available only if you use Knockout.
newValues	any	The task values after moving.
values	any	The task values before moving.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskMoving: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

onTaskUpdating

A function that is executed before a task is updated.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the task update.
component	Gantt	The widget's instance.
element	HTMLElement or jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The task key.
model	Object	Model data. Available only if you use Knockout.
newValues	any	The task values after update.
values	any	The task values before update.

Default Value: null

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskUpdating: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
});

resourceAssignments

Configures resource assignments.

Type:

Default Value: null

Resource assignments define relationship between tasks and resources.

Use the dataSource option to bind the widget to a data source, which contains resource assignments. If the field names in your data source differ from the 'id', 'resourceId' and 'taskId' default names, use the keyExpr, resourceIdExpr and/or taskIdExpr options to map data fields.

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        resourceAssignments: {
            dataSource: resourceAssignments,
            keyExpr: "key",
            resourceIdExpr: "resourceKey",
            taskIdExpr: "taskKey"
        },
        //...
    });
});

var resourceAssignments = [{
    'key': 0,
    'taskKey': 3,
    'resourceKey': 1
},
// ...
];

Angular

app.component.html

app.component.ts

app.module.ts

app.service.ts

angular.json

<dx-gantt ... >
    <dxo-resource-assignments 
        [dataSource]="resourceAssignments" 
        keyExpr="key"
        resourceIdExpr="resourceKey" 
        taskIdExpr="taskKey">
    </dxo-resource-assignments>
    <!-- ... -->
</dx-gantt>

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})    

export class AppComponent {
    resourceAssignments: ResourceAssignment[];
    // ...

    constructor(service: Service) {
        this.resourceAssignments = service.getResourceAssignments();
        // ...
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, ResourceAssignment, ... } from './app.service';

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

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

export class ResourceAssignment {
    id: number;
    taskId: number;
    resourceId: number;
}

const resourceAssignments: ResourceAssignment[] = [{
    'key': 0,
    'taskKey': 3,
    'resourceKey': 1
},
// ...   
]; 
@Injectable()
export class Service {
    getResourceAssignments(): ResourceAssignment[] {
        return resourceAssignments;
    }
}

{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >
        <DxResourceAssignments 
            :data-source="resourceAssignments"
            key-expr="key"
            resource-id-expr="resourceKey"
            task-id-expr="taskKey" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css';  

    import { 
        DxGantt, 
        DxResourceAssignments, 
        //... 
    } from 'devextreme-vue/gantt';
    import { 
        resourceAssignments, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxResourceAssignments, 
            //... 
        },
        data() {
            return { 
                resourceAssignments, 
                //... 
            };
        }
    };
</script>

export const resourceAssignments = [{
    'key': 0,
    'taskKey': 3,
    'resourceKey': 1
},
// ...
];

React

App.js

data.js

import React from 'react';

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

import Gantt, { 
    ResourceAssignments, 
    //... 
} from 'devextreme-react/gantt';
import { 
    resourceAssignments, 
    //... 
} from './data.js';

class App extends React.Component {
    render() {
        return (
            <Gantt ... >  
                <ResourceAssignments 
                    dataSource={resourceAssignments} 
                    keyExpr="key"
                    resourceIdExpr="resourceKey" 
                    taskIdExpr="taskKey" />
            </Gantt>
        );
    }
}
export default App;

export const resourceAssignments = [{
    'key': 0,
    'taskKey': 3,
    'resourceKey': 1
},
// ...
];

resources

Configures task resources.

Type:

Default Value: null

You can add resources to a project and assign them to tasks. Resources can be people responsible for tasks, equipment, materials, etc. The Gantt displays resources as labels on the right of the tasks.

DevExtreme Gantt Chart - Resources

Use the dataSource option to bind the widget to a data source, which contains resources. If the field names in your data source differ from the 'id', 'text' and 'color' default names, use the keyExpr, textExpr and/or colorExpr options to map data fields.

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        resources: {
            dataSource: resources,
            keyExpr: "resourceId",
            textExpr: "title",
            colorExpr: "resourceColor"
        },
        //...
    });
});

var resources = [{
    'resourceId': 1,
    'title': 'Management',
    'resourceColor': 'red'
}, 
// ...
];

Angular

app.component.html

app.component.ts

app.module.ts

app.service.ts

angular.json

<dx-gantt ... >
    <dxo-resources 
        [dataSource]="resources" 
        keyExpr="resourceId"
        textExpr="title"
        colorExpr="resourceColor" >
    </dxo-resources>
    <!-- ... -->
</dx-gantt>

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    resources: Resource[];
    // ...
    constructor(service: Service) {
        this.resources = service.getResources();
        // ...
    }        
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Resource, ... } from './app.service';

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

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

export class Resource {
    resourceId: number;
    title: string;
    resourceColor: string;

}

const resources: Resource[] = [{
    'resourceId': 1,
    'title': 'Management',
    'resourceColor': 'red'
},
// ...   
]; 
@Injectable()
export class Service {
    getResources(): Resource[] {
        return resources;
    }
}

{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >
        <DxResources 
            :data-source="resources"
            key-expr="resourceId"
            text-expr="title"
            color-expr="resourceColor" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css'; 
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxResources, 
        // ... 
    } from 'devextreme-vue/gantt';
    import { 
        resources, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxResources, 
            // ... 
        },
        data() {
            return { 
                resources, 
                // ... 
            };
        }
    };
</script>

export const resources = [{
    'resourceId': 1,
    'title': 'Management',
    'resourceColor': 'red'
},
// ...
];

React

App.js

data.js

import React from 'react';

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

import Gantt, { 
    Resources, 
    // ... 
} from 'devextreme-react/gantt';
import { 
    resources, 
    // ... 
} from './data.js';

class App extends React.Component {
    render() {
        return (
            <Gantt ... >
                <Resources 
                    dataSource={resources}
                    keyExpr="resourceId"
                    textExpr="title" 
                    colorExpr="resourceColor" />
                {/* ... */}
            </Gantt>
        );
    }
}
export default App;

export const resources = [{
    'resourceId': 1,
    'title': 'Management',
    'resourceColor': 'red'
},
// ...
];

rootValue

Specifies the root task's identifier.

Type: any

Default Value: 0

scaleType

Specifies the zoom level of tasks in the Gantt chart.

Type:

Default Value: 'auto'

The scaleType option specifies the zoom level for tasks when the Gantt widget is initialized or when you call the option() method.

jQuery

JavaScript

$(function() {
    $("#gantt").dxGantt({
        scaleType: 'hours',
        // ...
    });
});

If the scaleType option is set to "auto", the widget is scaled to fit all tasks in the Gantt chart's visible area.

To browse tasks across various levels of detail in real time, hold the CTRL key and scroll the mouse wheel to zoom (in or out).

selectedRowKey

Allows you to select a row or determine which row is selected.

Type: any

Default Value: undefined

jQuery

JavaScript

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

showResources

Specifies whether to display task resources.

Type:

Default Value: true

jQuery

JavaScript

$(function() {
    $("#gantt").dxGantt({
        showResources: false,
        // ...
    });
});

showRowLines

Specifies whether to show/hide horizontal faint lines that separate tasks.

Type:

Default Value: true

jQuery

JavaScript

$(function() {
    $("#gantt").dxGantt({
        showRowLines: false,
        // ...
    });
});

stripLines[]

Configures strip lines.

Type:

Array<dxGanttStripLine>

Default Value: undefined

Strip lines allows you to highlight certain time or time intervals in the chart. Use the start option to specify an individual line or combine it with the end option setting to specify a time interval.

DevExtreme Gantt - Strip Lines

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        stripLines: [{
            title: "Start",
            start: tasks[0].start
        }, {
            title: "Final Phase",
            start: tasks[tasks.length - 3].start,
            end: tasks[tasks.length - 1].end,
        }, {
            title: "Current Time",
            start: new Date(),
            cssClass: "current-time"
        }],
        //...
    });
});

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

taskListWidth

Specifies the width of the task list in pixels.

Type:

Number

Default Value: 300

DevExtreme Gantt Chart - Task List

jQuery

JavaScript

$(function() {
    $("#gantt").dxGantt({
        taskListWidth: 200,
        // ...
    });
});

tasks

Configures tasks.

Type:

Default Value: null

DevExtreme Gantt Chart - Tasks

Use the dataSource option to bind the widget to a data source, which contains tasks. If the field names in your data source differ from default names ('id', 'parentId', 'title', 'start', 'end', 'progress', 'color'), use appropriate options (keyExpr, parentIdExpr, etc.) to map data fields.

jQuery

index.js

data.js

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            keyExpr: "taskId", 
            parentIdExpr: "parentTaskId",
            titleExpr: "taskTitle",
            progressExpr: "taskProgress",
            startExpr: "startDate",
            endExpr: "endDate",
            colorExpr: "taskColor"
        },
        //...
    });
});

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'
},
// ...
];

Angular

app.component.html

app.component.ts

app.module.ts

app.service.ts

angular.json

<dx-gantt ... >
    <dxo-tasks 
        [dataSource]="tasks" 
        keyExpr="taskId"
        parentIdExpr="parentTaskId"
        titleExpr="taskTitle"
        progressExpr="taskProgress"
        startExpr="startDate"
        endExpr="endDate"
        colorExpr="taskColor" >
    </dxo-tasks>
    <!-- ... -->
</dx-gantt>

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    tasks: Task[];
    // ...
    constructor(service: Service) {
        this.tasks = service.getTasks();
        // ...
    }        
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Task, ... } from './app.service';

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

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

export class Task {
    taskId: number;
    parentTaskId: number;
    taskTitle: string;
    startDate: Date;
    endDate: Date;
    taskProgress: number;
    taskColor: string;
}

const tasks: Task[] = [{
    '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'
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}

{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >        
        <DxTasks
            :data-source="tasks"
            key-expr="taskId"
            parent-id-expr="parentTaskId"
            title-expr="taskTitle"
            progress-expr="taskProgress"
            start-expr="startDate"
            end-expr="endDate"
            color-expr="taskColor" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxTasks, 
        // ... 
    } from 'devextreme-vue/gantt';

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

    export default {
        components: { 
            DxGantt, 
            DxTasks, 
            // ... 
        },
        data() {
            return { 
                tasks, 
                // ... 
            };
        }
    };
</script>

export const 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'
},
// ...
];

React

App.js

data.js

import React from 'react';

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

import Gantt, { 
    Tasks, 
    // ... 
} from 'devextreme-react/gantt';
import { 
    tasks, 
    // ... 
} from './data.js';

class App extends React.Component {
    render() {
        return (
            <Gantt ... >
                <Tasks 
                    dataSource={tasks}
                    keyExpr="taskId"
                    parentIdExpr="parentTaskId"
                    titleExpr="taskTitle"
                    progressExpr="taskProgress"
                    startExpr="startDate"
                    endExpr="endDate"
                    colorExpr="taskColor" />
                {/* ... */}
            </Gantt>
        );
    }
}
export default App;

export const 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'
},
// ...
];

taskTitlePosition

Specifies a task's title position.

Type:

Default Value: 'inside'

Accepted Values: 'inside' | 'outside' | 'none'

Titles can be displayed "inside" or "outside" the the task. Set the position to "none" to hide the title.

DevExtreme Gantt Chart - Task titles

jQuery

JavaScript

$(function() {
    $("#gantt").dxGantt({
        taskTitlePosition: 'none',
        // ...
    });
});

taskTooltipContentComponent

An alias for the taskTooltipContentTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

taskTooltipContentRender

An alias for the taskTooltipContentTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

taskTooltipContentTemplate

Specifies custom content for the task tooltip.

Type:

template

Template Data:

The editor's container. It is an HTML Element or a jQuery Element when you use jQuery.

jQuery

JavaScript

$(function() {
    $("#gantt").dxGantt({
        taskTooltipContentTemplate: getTaskTooltipContentTemplate,
        // ...
    });
}); 

function getTaskTooltipContentTemplate(task, container) {
    container[0].innerHTML = "";
    return "<div class='custom-tooltip-title'>" + task.title + "</div>";
}

toolbar

Configures toolbar settings.

Type:

Default Value: null

DevExtreme Gantt - Toolbar

validation

Configures validation options.

Type:

jQuery

index.js

$(function() {
    $("#gantt").dxGantt({
        validation: {
            autoUpdateParentTasks: true,
            validateDependencies: true
        },
        // ...
    });
});

visible

Specifies whether the widget is visible.

Type: