DevExtreme React - Gantt Elements

This section describes the Gantt widget's UI elements and lists the main members that affect their appearance and functionality.

• Task

  A task is a scheduled event. On the Gantt chart, a task is a bar that shows the task duration.

• Dependency

  Dependencies define the task sequence and display how tasks relate to each other.

• Resource

  Resources indicate people, equipment, or materials required to complete a project on time.

View Demo

A task is a unit of work. On the Gantt chart, it displays the following information:

• Task title.

• Duration (start and end dates).

• Task progress.

• Associated dependencies that specify relationships between tasks.

• Associated resources.

A large task can be divided into subtasks that allow you to track the progress.

A milestone is a task with the same start and endpoint. Milestones can be used as checkpoints for important points in a project.

The Gantt widget gets data for tasks from a data source (dataSource). Task objects from the data source are automatically bound to the widget if these objects have the default 'title', 'start', 'end', etc., data fields in their structure. For example:

{
    'id': 1,
    'parentId': 0,
    'title': 'Software Development',
    'start': new Date('2019-02-21T05:00:00.000Z'),
    'end': new Date('2019-07-04T12:00:00.000Z'),
    'progress': 31       
}

The following example illustrates how to bind the widget to tasks stored in the data source, which contains data fields with conventional names:

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks
        },
        // your code
    });
});

var tasks = [{
    'id': 1,
    'parentId': 0,
    'title': 'Software Development',
    'start': new Date('2019-02-21T05:00:00.000Z'),
    'end': new Date('2019-07-04T12:00:00.000Z'),
    'progress': 31
},
// your code
];

If the data source's field names differ from the standard field names mentioned above, use the [fieldName]Expr properties to map task title, progress, start/end points, etc.

$(function() {
    $("#gantt").dxGantt({
        tasks: {
            dataSource: tasks,
            startExpr: "startDate",
            endExpr: "endDate"
        },
        // your code
    });
});

var tasks = [{
    'id': 1,
    'parentId': 0,
    'title': 'Software Development',
    'startDate': new Date('2019-02-21T05:00:00.000Z'),
    'endDate': new Date('2019-07-04T12:00:00.000Z'),
    'progress': 31
},
// your code
];

The list below provides the main members that affect task appearance and functionality.

• allowSelection - Specifies whether users can select tasks.

  $(function() {
      $("#gantt").dxGantt({
          allowSelection: false
      });
  });

• scaleType - Specifies the zoom level of tasks in the Gantt chart.

  $(function() {
      $("#gantt").dxGantt({
          scaleType: 'hours'
      });
  });  

• showResources - Specifies whether to display task resources.

  $(function() {
      $("#gantt").dxGantt({
          showResources: false
      });
  });  

• taskTitlePosition - Specifies a task's title position.

  $(function() {
      $("#gantt").dxGantt({
          taskTitlePosition: 'none'
      });
  });

Dependencies specify relationships between tasks.

The Gantt widget supports the following dependency types:

• Finish to Start (FS) - The predecessor task's endpoint specifies the successor task's start point.

  

• Start to Start (SS) - The predecessor task's start point specifies the successor task's start point.

  

• Finish to Finish (FF) - The predecessor task's end point specifies the successor task's end point.

  

• Start to Finish (SF) - The predecessor task's start point specifies the successor task's end point.

  

The Gantt widget gets data for dependencies from a data source (dataSource). Dependency objects from the data source are automatically bound to the widget if these objects have the default 'id', 'type', etc., data fields in their structure. For example:

{
    'id': 0,
    'predecessorId': 1,
    'successorId': 2,
    'type': 0
}

The following example illustrates how to bind the widget to dependencies stored in the data source that contains data fields with conventional names:

$(function() {
    $("#gantt").dxGantt({
        dependencies: {
            dataSource: dependencies
        },
        // your code
    });
});

var dependencies = [{
    'id': 0,
    'predecessorId': 1,
    'successorId': 2,
    'type': 0
},
// your code
];

If the data source's field names differ from the standard field names mentioned above, use the [fieldName]Expr properties to map dependency's id, type, etc.

$(function() {
    $("#gantt").dxGantt({
        dependencies: {
            dataSource: dependencies,
            keyExpr: "key",
            type: "dependencyType"
        },
        // your code
    });
});

var dependencies = [{
    'key': 0,
    'predecessorId': 1,
    'successorId': 2,
    'dependencyType': 0
},
// your code
];

Resources specify people responsible for tasks, equipment, materials, etc.

Use the showResources option to specify whether the Gantt widget hides resources or displays them as task labels.

$(function() {
    $("#gantt").dxGantt({
        showResources: false
    });
}); 

Resource assignments specify which resources are assigned to tasks. You can assign multiple resources to a task.

The Gantt widget gets data for resources and resource assignments from the following data sources:

• Resources: dataSource

• Resource Assignments: dataSource

The objects from the data sources are automatically bound to the widget if these objects have the default data fields in its structure. For example:

// Resource
{        
    'id': 1,
    'text': 'Management'       
}
// Resource Assignment
{        
    'id': 0,
    'taskId': 3,
    'resourceId': 1
}

The following example illustrates how to bind the widget to resources and resource assignment objects stored in the data sources that contain data fields with conventional names:

$(function() {
    $("#gantt").dxGantt({
        resources: {
            dataSource: resources
        },
        resourceAssignments: {
            dataSource: resourceAssignments
        },
        // your code
    });
});

var resources = [{
    'id': 1,
    'text': 'Management'
},
// your code
];
var resourceAssignments = [{
    'id': 0,
    'taskId': 3,
    'resourceId': 1
},
// your code
];

If the data source's field names differ from the standard field names mentioned above, use the [fieldName]Expr properties to map resources and resource assignments fields.

$(function() {
    $("#gantt").dxGantt({
        resources: {
            dataSource: resources,
            textExpr: "title"
        },
        resourceAssignments: {
            dataSource: resourceAssignments,
            taskIdExpr: "taskKey"
        },
        // your code
    });
});

var resources = [{
    'key': 1,
    'title': 'Management'
},
// your code
];
var resourceAssignments = [{
    'id': 0,
    'taskKey': 3,
    'resourceId': 1
},
// your code
];