JavaScript/jQuery Gantt Options
An object that defines the Gantt UI component's configuration properties.
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
accessKey
Specifies the shortcut key that sets focus on the UI component.
The value of this property will be passed to the accesskey
attribute of the HTML element that underlies the UI component.
activeStateEnabled
Specifies whether or not the UI component changes its state when interacting with a user.
This property is used when the UI component is displayed on a platform whose guidelines include the active state change for UI components.
allowSelection
Specifies whether users can select tasks in the Gantt.
jQuery
$(function() { $("#gantt").dxGantt({ allowSelection: false, // ... }); });
See Also
columns
An array of columns in the Gantt.
The columns property 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
Configures dependencies.
Dependencies specify the relationships between tasks. The following image illustrates how the Gantt displays dependencies in the chart:
The Gantt UI component 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 property to bind the UI component 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 properties 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 }, // ... ];
disabled
Specifies whether the UI component responds to user interaction.
editing
Configures edit properties.
The UI component allows users to add, modify and delete tasks, resources and dependencies. Set the enabled property to true to enable edit functionality.
jQuery
$(function() { $("#gantt").dxGantt({ editing: { //... } }); });
elementAttr
Specifies the global attributes to be attached to the UI component's container 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
Specifies the first day of a week.
The property'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 property's default value.
Use the FirstDayOfWeek
enum to specify this property when the UI component 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 UI component can be focused using keyboard navigation.
height
Specifies the UI component's height.
This property 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; }
hint
Specifies text for a hint that appears when a user pauses on the UI component.
hoverStateEnabled
Specifies whether the UI component changes its state when a user pauses on it.
onContentReady
A function that is executed when the UI component's content is ready and each time the content is changed.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only when using Knockout. |
onDisposing
A function that is executed before the UI component is disposed of.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component'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
A function used in JavaScript frameworks to save the UI component instance.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
A function that is executed after a UI component property is changed.
Information about the event.
Name | Type | Description |
---|---|---|
model |
Model data. Available only if you use Knockout. |
|
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
|
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
value | any |
The modified property's new value. |
The following example shows how to subscribe to component property changes:
jQuery
$(function() { $("#ganttContainer").dxGantt({ // ... onOptionChanged: function(e) { if(e.name === "changedProperty") { // handle the property change here } } }); });
Angular
<dx-gantt ... (onOptionChanged)="handlePropertyChange($event)"> </dx-gantt>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... handlePropertyChange(e) { if(e.name === "changedProperty") { // handle the property change here } } }
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 { }
Vue
<template> <DxGantt ... @option-changed="handlePropertyChange" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxGantt from 'devextreme-vue/gantt'; export default { components: { DxGantt }, // ... methods: { handlePropertyChange: function(e) { if(e.name === "changedProperty") { // handle the property change here } } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Gantt from 'devextreme-react/gantt'; const handlePropertyChange = (e) => { if(e.name === "changedProperty") { // handle the property change here } } export default function App() { return ( <Gantt ... onOptionChanged={handlePropertyChange} /> ); }
onSelectionChanged
A function that is executed after users select a task or clear its selection.
Information about the event that caused the function's execution.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component'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
resourceAssignments
Configures resource assignments.
Resource assignments define relationship between tasks and resources.
Use the dataSource property to bind the UI component 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 properties 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
Configures task 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 property to bind the UI component 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 properties 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
Specifies the zoom level of tasks in the Gantt chart.
The scaleType property specifies the zoom level for tasks when the Gantt UI component is initialized or when you call the option() method.
jQuery
$(function() { $("#gantt").dxGantt({ scaleType: 'hours', // ... }); });
If the scaleType property is set to "auto", the UI component 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.
jQuery
$(function() { $("#gantt").dxGantt({ selectedRowKey: 1, // ... }); });
See Also
showResources
Specifies whether to display task resources.
jQuery
$(function() { $("#gantt").dxGantt({ showResources: false, // ... }); });
showRowLines
Specifies whether to show/hide horizontal faint lines that separate tasks.
jQuery
$(function() { $("#gantt").dxGantt({ showRowLines: false, // ... }); });
stripLines[]
Configures strip lines.
Strip lines allows you to highlight certain time or time intervals in the chart. Use the start property to specify an individual line or combine it with the end property 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
Specifies the number of the element when the Tab key is used for navigating.
The value of this property will be passed to the tabindex
attribute of the HTML element that underlies the UI component.
tasks
Configures tasks.
Use the dataSource property to bind the UI component 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 properties (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' }, // ... ];
taskTitlePosition
Specifies a task's title position.
Titles can be displayed "inside" or "outside" the the task. Set the position to "none" to hide the title.
jQuery
$(function() { $("#gantt").dxGantt({ taskTitlePosition: 'none', // ... }); });
validation
Configures validation properties.
jQuery
$(function() { $("#gantt").dxGantt({ validation: { autoUpdateParentTasks: true, validateDependencies: true }, // ... }); });
width
Specifies the UI component's width.
This property 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; }
If you have technical questions, please create a support ticket in the DevExpress Support Center.