JavaScript/jQuery Gantt - tasks

Configures tasks.

Type:

Object

Default Value: null

View Demo

DevExtreme Gantt Chart - 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.

The 'color' field accepts the following values:

NOTE
The 'id' and 'parentId' fields should not have the same value.
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'
  • },
  • // ...
  • ];
See Also

colorExpr

Specifies the data field that provides tasks' color.

Type:

String

|

Function

Default Value: 'color'

If the field name in your data source differs from default 'color', use this property to map data fields:

index.js
data.js
  • $(function() {
  • $("#gantt").dxGantt({
  • tasks: {
  • dataSource: tasks,
  • // ...
  • 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'
  • },
  • // ...
  • ];

dataSource

Binds the UI component to the data source which contains tasks.

Default Value: null

Refer to the tasks property to see how to specify the dataSource property.

endExpr

Specifies the data field that provides tasks' end dates.

Type:

String

|

Function

Default Value: 'end'

If the field name in your data source differs from default 'end', use this property to map data fields:

index.js
data.js
  • $(function() {
  • $("#gantt").dxGantt({
  • tasks: {
  • dataSource: tasks,
  • // ...
  • endExpr: "endDate"
  • },
  • //...
  • });
  • });
  • 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'
  • },
  • // ...
  • ];

keyExpr

Specifies the data field that provides keys for tasks.

Type:

String

|

Function

Default Value: 'id'

If the field name in your data source differs from default 'id', use this property to map data fields:

index.js
data.js
  • $(function() {
  • $("#gantt").dxGantt({
  • tasks: {
  • dataSource: tasks,
  • // ...
  • keyExpr: "taskId"
  • },
  • //...
  • });
  • });
  • 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'
  • },
  • // ...
  • ];

parentIdExpr

Specifies the data field that provides tasks' parent IDs.

Type:

String

|

Function

Default Value: 'parentId'

If the field name in your data source differs from default 'parentId', use this property to map data fields:

index.js
data.js
  • $(function() {
  • $("#gantt").dxGantt({
  • tasks: {
  • dataSource: tasks,
  • // ...
  • parentIdExpr: "parentTaskId"
  • },
  • //...
  • });
  • });
  • 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'
  • },
  • // ...
  • ];

progressExpr

Specifies the data field that provides tasks' progress.

Type:

String

|

Function

Default Value: 'progress'

If the field name in your data source differs from default 'progress', use this property to map data fields:

index.js
data.js
  • $(function() {
  • $("#gantt").dxGantt({
  • tasks: {
  • dataSource: tasks,
  • // ...
  • progressExpr: "taskProgress"
  • },
  • //...
  • });
  • });
  • 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'
  • },
  • // ...
  • ];

startExpr

Specifies the data field that provides tasks' start dates.

Type:

String

|

Function

Default Value: 'start'

If the field name in your data source differs from default 'start', use this property to map data fields:

index.js
data.js
  • $(function() {
  • $("#gantt").dxGantt({
  • tasks: {
  • dataSource: tasks,
  • // ...
  • startExpr: "startDate"
  • },
  • //...
  • });
  • });
  • 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'
  • },
  • // ...
  • ];

titleExpr

Specifies the data field that provides task titles.

Type:

String

|

Function

Default Value: 'title'

If the field name in your data source differs from default 'title', use this property to map data fields:

index.js
data.js
  • $(function() {
  • $("#gantt").dxGantt({
  • tasks: {
  • dataSource: tasks,
  • // ...
  • titleExpr: "taskTitle"
  • },
  • //...
  • });
  • });
  • 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'
  • },
  • // ...
  • ];