Configuration
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
accessKey
The value of this option will be passed to the accesskey
attribute of the HTML element that underlies the widget.
allowSelection
jQuery
$(function() { $("#gantt").dxGantt({ allowSelection: false, // ... }); });
See Also
columns
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.
jQuery
$(function() { $("#gantt").dxGantt({ columns: [{ dataField: "title", caption: "Subject", width: 300 }, { dataField: "start", caption: "Start Date" }, "end" ], // ... }); });
dependencies
Dependencies specify the relationships between tasks. The following image illustrates how the Gantt displays dependencies in the chart:
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.
See Also
jQuery
$(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
<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
<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
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 }, // ... ];
editing
The widget allows users to add, modify and delete tasks, resources and dependencies. Set the enabled option to true to enable edit functionality.
jQuery
$(function() { $("#gantt").dxGantt({ editing: { //... } }); });
elementAttr
Specifies the attributes to be attached to the widget's root element.
jQuery
$(function(){ $("#ganttContainer").dxGantt({ // ... elementAttr: { id: "elementId", class: "class-name" } }); });
Angular
<dx-gantt ... [elementAttr]="{ id: 'elementId', class: 'class-name' }"> </dx-gantt>
import { DxGanttModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxGanttModule ], // ... })
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
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
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
.
height
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:JavaScriptheight: function() { return window.innerHeight / 1.5; }
onContentReady
A function that is executed when the widget's content is ready and each time the content is changed.
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. |
onContextMenuPreparing
Name | Type | Description |
---|---|---|
cancel |
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 |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
|
items |
Items to be displayed in the context menu. |
|
targetKey | any |
The key of the right-clicked task or dependency. |
targetType |
The type of right-clicked task or dependency. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onContextMenuPreparing: function (e) { // your code e.cancel = true; } }); });
See Also
onCustomCommand
A function that is executed after a custom command item was clicked. Allows you to implement a custom command's functionality.
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. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onCustomCommand: function (e) { // your code } }); });
See Also
onDependencyDeleting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the dependency's deletion. |
|
component | Gantt |
The widget's instance. |
element |
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 |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted dependency. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onDependencyDeleting: function (e) { if (e.key != 1) { // your code e.cancel = true; } } }); });
See Also
onDependencyInserting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the dependency's insertion. |
|
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. |
|
values | any |
The values of the inserted dependency. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onDependencyInserting: function (e) { if (e.values.type == 3) { // your code e.cancel = true; } } }); });
See Also
onDisposing
A function that is executed before the widget is disposed of.
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. |
onInitialized
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. |
onOptionChanged
Name | Type | Description |
---|---|---|
component | Gantt |
The widget's instance. |
fullName |
The path to the modified option that includes all parent options. |
|
name |
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 |
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. |
onResourceAssigning
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource assignment. |
|
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. |
|
values | any |
The values of the processed resource and task. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onResourceAssigning: function (e) { if (e.values.taskID != 0) { // your code e.cancel = true; } } }); });
See Also
onResourceDeleting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource deletion. |
|
component | Gantt |
The widget's instance. |
element |
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 |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted resource. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onResourceDeleting: function (e) { if (e.key == 0) { // your code e.cancel = true; } } }); });
See Also
onResourceInserting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource insertion. |
|
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. |
|
values | any |
The values of the inserted resource. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onResourceInserting: function (e) { if (e.values.text == " "){ // your code e.cancel = true; } } }); });
See Also
onResourceUnassigning
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource unassignment. |
|
component | Gantt |
The widget's instance. |
element |
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 |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the processed resource and task. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onResourceUnassigning: function (e) { if (e.key != 0) { // your code e.cancel = true; } } }); });
See Also
onSelectionChanged
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. |
|
selectedRowKey | any |
The key of the row whose selection state was changed. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onSelectionChanged: function (e) { if (e.selectedRowKey === 2) { // your code } else { // your code } } }); });
See Also
onTaskClick
Name | Type | Description |
---|---|---|
component | Gantt |
The widget's instance. |
data | any |
The task data. |
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event |
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 |
Model data. Available only if you use Knockout. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onTaskClick: function (e) { if (e.key != 0) { // your code } } }); });
See Also
onTaskDblClick
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the resource unassignment. |
|
component | Gantt |
The widget's instance. |
data | any |
The task data. |
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event |
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 |
Model data. Available only if you use Knockout. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onTaskDblClick: function (e) { if (e.key != 0) { // your code e.cancel = true; } } }); });
See Also
onTaskDeleting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the task deletion. |
|
component | Gantt |
The widget's instance. |
element |
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 |
Model data. Available only if you use Knockout. |
|
values | any |
The values of the deleted task. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onTaskDeleting: function (e) { if (e.key != 0) { // your code e.cancel = true; } } }); });
See Also
onTaskEditDialogShowing
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the edit dialog showing. |
|
component | Gantt |
The widget's instance. |
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
hiddenFields |
An array of hidden fields. |
|
key | any |
The task key. |
model |
Model data. Available only if you use Knockout. |
|
readOnlyFields |
An array of read-only fields. |
|
values | any |
The task values. |
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
$(function() { $("#gantt").dxGantt({ // ... onTaskEditDialogShowing: function (e) { if (e.key != 0) { // your code e.cancel = true; } } }); });
See Also
onTaskInserting
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the task insertion. |
|
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. |
|
values | any |
The values of the inserted task. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onTaskInserting: function (e) { if (e.key != 0) { // your code e.cancel = true; } } }); });
See Also
onTaskMoving
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the task's movement. |
|
component | Gantt |
The widget's instance. |
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The task key. |
model |
Model data. Available only if you use Knockout. |
|
newValues | any |
The task values after moving. |
values | any |
The task values before moving. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onTaskMoving: function (e) { if (e.key != 0) { // your code e.cancel = true; } } }); });
See Also
onTaskUpdating
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the task update. |
|
component | Gantt |
The widget's instance. |
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
key | any |
The task key. |
model |
Model data. Available only if you use Knockout. |
|
newValues | any |
The task values after update. |
values | any |
The task values before update. |
jQuery
$(function() { $("#gantt").dxGantt({ // ... onTaskUpdating: function (e) { if (e.key != 0) { // your code e.cancel = true; } } }); });
See Also
resourceAssignments
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.
See Also
jQuery
$(function() { $("#gantt").dxGantt({ resourceAssignments: { dataSource: resourceAssignments, keyExpr: "key", resourceIdExpr: "resourceKey", taskIdExpr: "taskKey" }, //... }); });
var resourceAssignments = [{ 'key': 0, 'taskKey': 3, 'resourceKey': 1 }, // ... ];
Angular
<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
<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
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
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.
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.
See Also
jQuery
$(function() { $("#gantt").dxGantt({ resources: { dataSource: resources, keyExpr: "resourceId", textExpr: "title", colorExpr: "resourceColor" }, //... }); });
var resources = [{ 'resourceId': 1, 'title': 'Management', 'resourceColor': 'red' }, // ... ];
Angular
<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
<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
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' }, // ... ];
scaleType
The scaleType option specifies the zoom level for tasks when the Gantt widget is initialized or when you call the option() method.
jQuery
$(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
jQuery
$(function() { $("#gantt").dxGantt({ selectedRowKey: 1, // ... }); });
See Also
showResources
Specifies whether to display task resources.
jQuery
$(function() { $("#gantt").dxGantt({ showResources: false, // ... }); });
stripLines[]
Array<dxGanttStripLine>
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.
jQuery
$(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
The value of this option will be passed to the tabindex
attribute of the HTML element that underlies the widget.
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.
See Also
jQuery
$(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
<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
<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
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' }, // ... ];
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
The editor's container. It is an HTML Element or a jQuery Element when you use jQuery.
jQuery
$(function() { $("#gantt").dxGantt({ taskTooltipContentTemplate: getTaskTooltipContentTemplate, // ... }); }); function getTaskTooltipContentTemplate(task, container) { container[0].innerHTML = ""; return "<div class='custom-tooltip-title'>" + task.title + "</div>"; }
width
This option accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptwidth: function() { return window.innerWidth / 1.5; }