Work in EJ2 JavaScript Gantt control
24 Jan 202410 minutes to read
Work
The work is the total hours required to complete a task. Work can be mapped from the data source field using the property taskFields.work
. Work can be measured in Hour
, Day
, Minute
. By default, work is measured in Hour
and it can be changed, by using the property workUnit
.
Note: When the work field is mapped from the data source, the default task type will be
FixedWork
.
ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar,ej.gantt.Selection);
var gantt = new ej.gantt.Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
resourceInfo: 'resources',
work: 'work',
child: 'subtasks'
},
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
resources: resourceResources,
resourceFields: {
id: 'resourceId',
name: 'resourceName',
unit: 'unit'
},
workUnit: 'Hour',
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
allowSelection: true,
height: '450px',
treeColumnIndex: 1,
columns: [
{ field: 'TaskID', visible: false },
{ field: 'TaskName', headerText: 'Task Name', width: '180' },
{ field: 'resources', headerText: 'Resources', width: '160' },
{ field: 'work', width: '110' },
{ field: 'Duration', width: '100' },
],
});
gantt.appendTo('#Gantt');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Task type
The work, duration and resource unit fields of a task depends upon each other and will change automatically on editing any one of these fields. But we can also set these field’s values as constant using the taskType
property. FixedUnit
is the default taskType
. The following values can be set to the taskType
property,
-
FixedDuration
- Duration task field will remain constant while updating resource unit or work field. -
FixedWork
- Work field will remain constant while updating resource unit or duration fields. -
FixedUnit
- Resource units will remain constant while updating duration or work field.
ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar,ej.gantt.Selection);
var gantt = new ej.gantt.Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
resourceInfo: 'resources',
work: 'Work',
child: 'subtasks'
},
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
taskType: 'FixedWork',
resources: resourceResources,
resourceFields: {
id: 'resourceId',
name: 'resourceName',
unit: 'Unit'
},
workUnit: 'Hour',
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
allowSelection: true,
height: '450px',
treeColumnIndex: 1,
columns: [
{ field: 'TaskID', visible: false },
{ field: 'TaskName', headerText: 'Task Name', width: '180' },
{ field: 'resources', headerText: 'Resources', width: '160' },
{ field: 'work', width: '110' },
{ field: 'Duration', width: '100' },
{ field: 'taskType', headerText: 'Task Type', width: '110' }
],
});
gantt.appendTo('#Gantt');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Following table explains how the work, duration and resource unit fields will gets updated on changing any of the fields
Task Type | Changes in Duration | Changes in work | Changes in Resource Units |
---|---|---|---|
Fixed Duration | Work field updates | Resource unit updates | Work field updates |
Fixed Work | Resource unit updates.Note: For manually scheduled task work will update. | Duration field updates. Note: For manually scheduled task resource unit updates. | Duration will update. Note: For manually scheduled task work field updates. |
Fixed Unit | Work field updates | Duration field updates. Note: For manually scheduled task resource unit updates. | Duration will update. Note: For manually scheduled task work field updates. |
Note: 1. Fixed Unit is the default taskType in Gantt. 2. The above calculations are not applicable for Milestones.