Angular Gantt - tasks

Configures tasks.

Selector: dxo-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.
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.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'
  • },
  • // ...
  • ];
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:

App.vue
data.js
  • <template>
  • <DxGantt ... >
  • <DxTasks ...
  • :data-source="tasks"
  • color-expr="taskColor" />
  • <!-- ... -->
  • </DxGantt>
  • </template>
  • <script>
  • // ...
  • </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'
  • },
  • // ...
  • ];

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:

App.vue
data.js
  • <template>
  • <DxGantt ... >
  • <DxTasks ...
  • :data-source="tasks"
  • end-expr="endDate" />
  • <!-- ... -->
  • </DxGantt>
  • </template>
  • <script>
  • // ...
  • </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'
  • },
  • // ...
  • ];

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:

App.vue
data.js
  • <template>
  • <DxGantt ... >
  • <DxTasks ...
  • :data-source="tasks"
  • key-expr="taskId" />
  • <!-- ... -->
  • </DxGantt>
  • </template>
  • <script>
  • // ...
  • </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'
  • },
  • // ...
  • ];

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:

App.vue
data.js
  • <template>
  • <DxGantt ... >
  • <DxTasks ...
  • :data-source="tasks"
  • parent-id-expr="parentTaskId" />
  • <!-- ... -->
  • </DxGantt>
  • </template>
  • <script>
  • // ...
  • </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'
  • },
  • // ...
  • ];

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:

App.vue
data.js
  • <template>
  • <DxGantt ... >
  • <DxTasks ...
  • :data-source="tasks"
  • progress-expr="taskProgress" />
  • <!-- ... -->
  • </DxGantt>
  • </template>
  • <script>
  • // ...
  • </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'
  • },
  • // ...
  • ];

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:

App.vue
data.js
  • <template>
  • <DxGantt ... >
  • <DxTasks ...
  • :data-source="tasks"
  • start-expr="startDate" />
  • <!-- ... -->
  • </DxGantt>
  • </template>
  • <script>
  • // ...
  • </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'
  • },
  • // ...
  • ];

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:

App.vue
data.js
  • <template>
  • <DxGantt ... >
  • <DxTasks ...
  • :data-source="tasks"
  • title-expr="taskTitle" />
  • <!-- ... -->
  • </DxGantt>
  • </template>
  • <script>
  • // ...
  • </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'
  • },
  • // ...
  • ];