Angular Gantt - tasks
Type:
Default Value: null
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 }, // ... } // ... }
dataSource
Default Value: null
Refer to the tasks property to see how to specify the dataSource property.
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.