WBS Column for Hierarchical Tasks in JavaScript Gantt Chart
The Work Breakdown Structure (WBS) organizes project tasks hierarchically by assigning unique codes to each task. This improves task visibility and management, especially in large-scale construction or enterprise-level software projects.
Configuration and implementation
To enable WBS in the Gantt Chart control:
- Enable WBS Codes: Set enableWBS to true to automatically generate unique task codes and define their predecessors.
- Auto-Update Codes: Set enableAutoWbsUpdate to true to maintain accurate WBS codes during operations such as sorting, editing, or drag-and-drop.
ej.gantt.Gantt.Inject(ej.gantt.Selection,
ej.gantt.Toolbar,
ej.gantt.DayMarkers,
ej.gantt.Edit,
ej.gantt.Filter,
ej.gantt.Sort,
ej.gantt.ContextMenu);
var ganttChart = new ej.gantt.Gantt({
dataSource: WBSData,
allowSorting: true,
enableContextMenu: true,
enableWBS: true,
enableAutoWbsUpdate: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentId'
},
treeColumnIndex: 2,
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', visible: false },
{ field: 'WBSCode', headerText: 'WBS Code', width: '150px' },
{ field: 'TaskName', headerText: 'Task Name', allowReordering: false, width: '260px' },
{ field: 'StartDate', headerText: 'Start Date', width: '140px' },
{ field: 'WBSPredecessor', headerText: 'WBS Predecessor', width: '190px' },
{ field: 'Duration', headerText: 'Duration', allowEditing: false, width: '130px' },
{ field: 'Progress', headerText: 'Progress' },
],
eventMarkers: [
{
day: new Date('04/2/2024'),
label: 'Project Initiation'
}
],
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
allowPdfExport: true,
allowSelection: true,
splitterSettings: {
columnIndex: 4,
},
selectionSettings: {
mode: 'Row',
type: 'Single',
enableToggle: false
},
tooltipSettings: {
showTooltip: true
},
filterSettings: {
type: 'Menu'
},
allowFiltering: true,
gridLines: "Both",
highlightWeekends: true,
timelineSettings: {
showTooltip: true,
topTier: {
unit: 'Week',
format: 'dd/MM/yyyy'
},
bottomTier: {
unit: 'Day',
count: 1
}
},
labelSettings: {
taskLabel: '${Progress}%'
},
taskbarHeight: 20,
rowHeight: 40,
height: '550px',
allowUnscheduledTasks: true,
projectStartDate: new Date('03/31/2024'),
projectEndDate: new Date('05/30/2024'),
});
ganttChart.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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>When the WBS column is enabled in the Gantt Chart using the enableWBS property along with the WBS Code and WBS Predecessor fields, the default ID and Predecessor columns are automatically disabled, as the WBS and WBS Predecessor columns already display the ID and predecessor values based on the task hierarchy.
Managing WBS code updates
To optimize performance, WBS code updates can be controlled using the actionBegin and dataBound events. This is especially useful during operations like row drag-and-drop, where auto-update is triggered only during that specific action to ensure efficient and accurate code handling.
In the following example, WBS auto-update is enabled only during the row drag and drop action using these events.
ej.gantt.Gantt.Inject(ej.gantt.Selection,
ej.gantt.Toolbar,
ej.gantt.DayMarkers,
ej.gantt.Edit,
ej.gantt.Filter,
ej.gantt.Sort,
ej.gantt.ContextMenu);
var isRowDropped = false;
var ganttChart = new ej.gantt.Gantt({
dataSource: WBSData,
allowSorting: true,
enableContextMenu: true,
enableWBS: true,
dataBound: function () {
if (isRowDropped) {
ganttChart.enableAutoWbsUpdate = false;
isRowDropped = false;
}
},
actionBegin: function (args) {
if (args.requestType === "beforeDrop") {
isRowDropped = true;
ganttChart.enableAutoWbsUpdate = false;
}
},
enableAutoWbsUpdate: false,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentId'
},
treeColumnIndex: 2,
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', visible: false },
{ field: 'WBSCode', headerText: 'WBS Code', width: '150px' },
{ field: 'TaskName', headerText: 'Task Name', allowReordering: false, width: '260px' },
{ field: 'StartDate', headerText: 'Start Date', width: '140px' },
{ field: 'WBSPredecessor', headerText: 'WBS Predecessor', width: '190px' },
{ field: 'Duration', headerText: 'Duration', allowEditing: false, width: '130px' },
{ field: 'Progress', headerText: 'Progress' },
],
eventMarkers: [
{
day: new Date('04/2/2024'),
label: 'Project Initiation'
}
],
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
allowPdfExport: true,
allowSelection: true,
splitterSettings: {
columnIndex: 4,
},
selectionSettings: {
mode: 'Row',
type: 'Single',
enableToggle: false
},
tooltipSettings: {
showTooltip: true
},
filterSettings: {
type: 'Menu'
},
allowFiltering: true,
gridLines: "Both",
highlightWeekends: true,
timelineSettings: {
showTooltip: true,
topTier: {
unit: 'Week',
format: 'dd/MM/yyyy'
},
bottomTier: {
unit: 'Day',
count: 1
}
},
labelSettings: {
taskLabel: '${Progress}%'
},
taskbarHeight: 20,
rowHeight: 40,
height: '550px',
allowUnscheduledTasks: true,
projectStartDate: new Date('03/31/2024'),
projectEndDate: new Date('05/30/2024'),
});
ganttChart.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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>Limitations
The WBS feature has a few limitations in the Gantt Chart control:
- Editing of the WBS code and WBS predecessor columns is not supported.
- Load on demand is not supported with the WBS feature.
- WBS Code and WBS Predecessor fields cannot be mapped directly from the data source.