React Gantt - Gantt Elements

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

DevExtreme Gantt Chart Elements

  • 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

Task

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.

DevExtreme Gantt Chart - Tasks

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

DevExtreme Gantt Chart - Subtasks

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

DevExtreme Gantt Chart - Milestone

The Gantt UI component gets data for tasks from a data source (dataSource). Task objects from the data source are automatically bound to the UI component 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 UI component to tasks stored in the data source, which contains data fields with conventional names:

index.js
data.js
$(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.

index.js
data.js
$(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'
        });
    });

Dependency

Dependencies specify relationships between tasks.

DevExtreme Gantt Chart - Dependencies

The Gantt UI component supports the following dependency types:

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

    DevExtreme Gantt Chart - Finish-To-Start Dependency

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

    DevExtreme Gantt Chart - Start-To-Start Dependency

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

    DevExtreme Gantt Chart - Finish-To-Finish Dependency

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

    DevExtreme Gantt Chart - Finish-To-Finish Dependency

The Gantt UI component gets data for dependencies from a data source (dataSource). Dependency objects from the data source are automatically bound to the UI component 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 UI component to dependencies stored in the data source that contains data fields with conventional names:

index.js
data.js
$(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.

index.js
data.js
$(function() {
    $("#gantt").dxGantt({
        dependencies: {
            dataSource: dependencies,
            keyExpr: "key",
            type: "dependencyType"
        },
        // your code
    });
});
var dependencies = [{
    'key': 0,
    'predecessorId': 1,
    'successorId': 2,
    'dependencyType': 0
},
// your code
];

Resource

NOTE
Resources and resource assignments are optional in the Gantt UI component.

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

DevExtreme Gantt Chart - Resources

Use the showResources property to specify whether the Gantt UI component 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.

DevExtreme Gantt Chart - Resource Assignments

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

The objects from the data sources are automatically bound to the UI component 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 UI component to resources and resource assignment objects stored in the data sources that contain data fields with conventional names:

index.js
data.js
$(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.

index.js
data.js
$(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
];