JavaScript/jQuery Gantt - tasks

View Demo

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

• Gantt Elements - Tasks

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

Refer to the tasks property to see how to specify the dataSource property.

Refer to the tasks property to see how to specify the endExpr property.

Refer to the tasks property to see how to specify the keyExpr property.

Refer to the tasks property to see how to specify the parentIdExpr property.

Refer to the tasks property to see how to specify the progressExpr property.

Refer to the tasks property to see how to specify the startExpr property.

Refer to the tasks property to see how to specify the titleExpr property.