JavaScript/jQuery 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.
The 'color' field accepts the following values:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
- $(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'
- },
- // ...
- ];
See Also
colorExpr
If the field name in your data source differs from default 'color', use this property to map data fields:
- $(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'
- },
- // ...
- ];
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:
- $(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'
- },
- // ...
- ];
keyExpr
If the field name in your data source differs from default 'id', use this property to map data fields:
- $(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'
- },
- // ...
- ];
parentIdExpr
If the field name in your data source differs from default 'parentId', use this property to map data fields:
- $(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'
- },
- // ...
- ];
progressExpr
If the field name in your data source differs from default 'progress', use this property to map data fields:
- $(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'
- },
- // ...
- ];
startExpr
If the field name in your data source differs from default 'start', use this property to map data fields:
- $(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'
- },
- // ...
- ];
titleExpr
If the field name in your data source differs from default 'title', use this property to map data fields:
- $(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'
- },
- // ...
- ];
If you have technical questions, please create a support ticket in the DevExpress Support Center.