React 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
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'
- },
- // ...
- ];
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.