Vue 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.

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",
            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
app.component.html
app.component.ts
app.module.ts
app.service.ts
angular.json
<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
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.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
App.js
data.js
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';

const App = () => {
    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'
},
// ...
];
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Tasks(t => t
        .DataSource(ds => ds.Array().Data(SampleData.GanttTasks).Key("ID"))
        .KeyExpr("ID")
        .TitleExpr("Title")
        .ParentIdExpr("ParentId")
        .StartExpr("Start")
        .EndExpr("End")
        .ProgressExpr("Progress")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Task> GanttTasks = new[] {
        new Task {
            ID = 1,
            ParentId = 0,
            Title = "Software Development",
            Start = DateTime.Parse("2019-02-21T05:00:00.000Z"),
            End = DateTime.Parse("2019-07-04T12:00:00.000Z"),
            Progress = 31
        },        
        // ...
    }
    // ...
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Tasks(t => t
        .DataSource(ds => ds.Array().Data(SampleData.GanttTasks).Key("ID"))
        .KeyExpr("ID")
        .TitleExpr("Title")
        .ParentIdExpr("ParentId")
        .StartExpr("Start")
        .EndExpr("End")
        .ProgressExpr("Progress")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Task> GanttTasks = new[] {
        new Task {
            ID = 1,
            ParentId = 0,
            Title = "Software Development",
            Start = DateTime.Parse("2019-02-21T05:00:00.000Z"),
            End = DateTime.Parse("2019-07-04T12:00:00.000Z"),
            Progress = 31
        },        
        // ...
    }
    // ...
}

colorExpr

Specifies the data field that provides tasks' color.

Type:

String

|

Function

Default Value: 'color'

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'

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

keyExpr

Specifies the data field that provides keys for tasks.

Type:

String

|

Function

Default Value: 'id'

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

parentIdExpr

Specifies the data field that provides tasks' parent IDs.

Type:

String

|

Function

Default Value: 'parentId'

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

progressExpr

Specifies the data field that provides tasks' progress.

Type:

String

|

Function

Default Value: 'progress'

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

startExpr

Specifies the data field that provides tasks' start dates.

Type:

String

|

Function

Default Value: 'start'

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

titleExpr

Specifies the data field that provides task titles.

Type:

String

|

Function

Default Value: 'title'

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