Vue Gantt - tasks
Configures 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
$(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
<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
<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
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.
Refer to the tasks option to see how to specify the dataSource option.
endExpr
Specifies the data field that provides tasks' end dates.
Refer to the tasks option to see how to specify the endExpr option.
keyExpr
Specifies the data field that provides keys for tasks.
Refer to the tasks option to see how to specify the keyExpr option.
parentIdExpr
Specifies the data field that provides tasks' parent IDs.
Refer to the tasks option to see how to specify the parentIdExpr option.
progressExpr
Specifies the data field that provides tasks' progress.
Refer to the tasks option to see how to specify the progressExpr option.
startExpr
Specifies the data field that provides tasks' start dates.
Refer to the tasks option to see how to specify the startExpr option.
titleExpr
Specifies the data field that provides task titles.
Refer to the tasks option to see how to specify the titleExpr option.
If you have technical questions, please create a support ticket in the DevExpress Support Center.