React Gantt - tasks

Configures tasks.

Type:

Object

Default Value: null

View Demo

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'), use appropriate options (keyExpr, parentIdExpr, etc.) to map data fields.

See Also
jQuery
index.js
data.js
$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            keyExpr: "taskId", 
            parentIdExpr: "parentTaskId",
            titleExpr: "taskTitle",
            progressExpr: "taskProgress",
            startExpr: "startDate",
            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
},
// ...
];
Angular
app.component.html
app.component.ts
app.module.ts
app.service.ts
<dx-gantt ... >
    <dxo-tasks 
        [dataSource]="tasks" 
        keyExpr="taskId"
        parentIdExpr="parentTaskId"
        titleExpr="taskTitle"
        progressExpr="taskProgress"
        startExpr="startDate"
        endExpr="endDate" >
    </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;
}

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
},
// ...   
]; 
@Injectable()
export class Service {
    getTasks(): Task[] {
        return tasks;
    }
}    
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" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.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
},
// ...
];  
React
App.js
data.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.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" />
                {/* ... */}
            </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
},
// ...
];

dataSource

Binds the widget to the data source which contains tasks.

Default Value: null

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

endExpr

Specifies the data field that provides tasks' end dates.

Type:

String

|

Function

Default Value: 'end'

Refer to the tasks option to see how to specify the endExpr option.

keyExpr

Specifies the data field that provides keys for tasks.

Type:

String

|

Function

Default Value: 'id'

Refer to the tasks option to see how to specify the keyExpr option.

parentIdExpr

Specifies the data field that provides tasks' parent IDs.

Type:

String

|

Function

Default Value: 'parentId'

Refer to the tasks option to see how to specify the parentIdExpr option.

progressExpr

Specifies the data field that provides tasks' progress.

Type:

String

|

Function

Default Value: 'progress'

Refer to the tasks option to see how to specify the progressExpr option.

startExpr

Specifies the data field that provides tasks' start dates.

Type:

String

|

Function

Default Value: 'start'

Refer to the tasks option to see how to specify the startExpr option.

titleExpr

Specifies the data field that provides task titles.

Type:

String

|

Function

Default Value: 'title'

Refer to the tasks option to see how to specify the titleExpr option.