React Gantt - 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.
jQuery
$(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
<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.light.css", "node_modules/devexpress-gantt/dist/dx-gantt.css", "src/styles.css" ], ... }, ... }, ... } }, ... }, ... }
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" 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' }, // ... ];
React
import React from 'react'; 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
@(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
@(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 }, // ... } // ... }
See Also
colorExpr
If the field name in your data source differs from default 'color', use this property to map data fields:
jQuery
$(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' }, // ... ];
Angular
<dx-gantt ... > <dxo-tasks ... [dataSource]="tasks" colorExpr="taskColor" > </dxo-tasks> <!-- ... --> </dx-gantt>
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; } }
Vue
<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' }, // ... ];
React
// ... const App = () => { return ( <Gantt ... > <Tasks ... dataSource={tasks} 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' }, // ... ];
dataSource
Refer to the tasks property to see how to specify the dataSource property.
endExpr
If the field name in your data source differs from default 'end', use this property to map data fields:
jQuery
$(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' }, // ... ];
Angular
<dx-gantt ... > <dxo-tasks ... [dataSource]="tasks" endExpr="endDate" > </dxo-tasks> <!-- ... --> </dx-gantt>
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; } }
Vue
<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' }, // ... ];
React
// ... const App = () => { return ( <Gantt ... > <Tasks ... dataSource={tasks} 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, 'taskColor': 'red' }, // ... ];
keyExpr
If the field name in your data source differs from default 'id', use this property to map data fields:
jQuery
$(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' }, // ... ];
Angular
<dx-gantt ... > <dxo-tasks ... [dataSource]="tasks" keyExpr="taskId" > </dxo-tasks> <!-- ... --> </dx-gantt>
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; } }
Vue
<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' }, // ... ];
React
// ... const App = () => { return ( <Gantt ... > <Tasks ... dataSource={tasks} keyExpr="taskId" /> {/* ... */} </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' }, // ... ];
parentIdExpr
If the field name in your data source differs from default 'parentId', use this property to map data fields:
jQuery
$(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' }, // ... ];
Angular
<dx-gantt ... > <dxo-tasks ... [dataSource]="tasks" parentIdExpr="parentTaskId" > </dxo-tasks> <!-- ... --> </dx-gantt>
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; } }
Vue
<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' }, // ... ];
React
// ... const App = () => { return ( <Gantt ... > <Tasks ... dataSource={tasks} parentIdExpr="parentTaskId" /> {/* ... */} </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' }, // ... ];
progressExpr
If the field name in your data source differs from default 'progress', use this property to map data fields:
jQuery
$(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' }, // ... ];
Angular
<dx-gantt ... > <dxo-tasks ... [dataSource]="tasks" progressExpr="taskProgress" > </dxo-tasks> <!-- ... --> </dx-gantt>
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; } }
Vue
<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' }, // ... ];
React
// ... const App = () => { return ( <Gantt ... > <Tasks ... dataSource={tasks} progressExpr="taskProgress" /> {/* ... */} </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' }, // ... ];
startExpr
If the field name in your data source differs from default 'start', use this property to map data fields:
jQuery
$(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' }, // ... ];
Angular
<dx-gantt ... > <dxo-tasks ... [dataSource]="tasks" startExpr="startDate" > </dxo-tasks> <!-- ... --> </dx-gantt>
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; } }
Vue
<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' }, // ... ];
React
// ... const App = () => { return ( <Gantt ... > <Tasks ... dataSource={tasks} startExpr="startDate" /> {/* ... */} </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' }, // ... ];
titleExpr
If the field name in your data source differs from default 'title', use this property to map data fields:
jQuery
$(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' }, // ... ];
Angular
<dx-gantt ... > <dxo-tasks ... [dataSource]="tasks" titleExpr="taskTitle" > </dxo-tasks> <!-- ... --> </dx-gantt>
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; } }
Vue
<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' }, // ... ];
React
// ... const App = () => { return ( <Gantt ... > <Tasks ... dataSource={tasks} titleExpr="taskTitle" /> {/* ... */} </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' }, // ... ];
If you have technical questions, please create a support ticket in the DevExpress Support Center.