Work Breakdown Structure (WBS) in Gantt Control

30 Jun 202510 minutes to read

The Work Breakdown Structure (WBS) is a hierarchical numbering system that assigns unique and structured codes to each task, reflecting their positions within the overall project. This feature ensures data consistency and a clear, organized project view during operations such as sorting, filtering, editing, and drag-and-drop.

Configuration and implementation

To enable and configure WBS in your Gantt component:

  • Enable WBS Codes: Set the EnableWBS property to true to automatically generate unique task codes and their predecessors.
  • Auto-Update Codes: Set the EnableAutoWbsUpdate property to true to maintain WBS code accuracy during operations like sorting, filtering, editing, or drag-and-drop.
<ejs-gantt id="GanttChart" dataSource="@GanttData.WBSData()" allowSorting="true" enableContextMenu="true" enableWBS="true" enableAutoWbsUpdate="true" allowPdfExport="true" allowSelection="true" allowFiltering="true" allowUnscheduledTasks="true" highlightWeekends="true" gridLines="Both" height="550px" treeColumnIndex="2" projectStartDate="03/31/2024" projectEndDate="05/30/2024" rowHeight="40" taskbarHeight="20" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })">
                <e-gantt-selectionsettings mode="Row" type="Single" enableToggle="false"></e-gantt-selectionsettings>
                <e-gantt-splittersettings columnIndex="4"></e-gantt-splittersettings>
                <e-gantt-timelinesettings>
                    <e-timelinesettings-toptier unit="Week" format="dd/MM/yyyy"></e-timelinesettings-toptier>
                    <e-timelinesettings-bottomtier unit="Day" count="1"></e-timelinesettings-bottomtier>
                </e-gantt-timelinesettings>
                <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
                <e-gantt-filtersettings type="Menu"></e-gantt-filtersettings>
                <e-gantt-tooltipsettings showTooltip="true"></e-gantt-tooltipsettings>
                <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" dependency="Predecessor" parentID="ParentID"></e-gantt-taskfields>
                <e-gantt-labelsettings taskLabel="${Progress}%"></e-gantt-labelsettings>
                <e-gantt-columns>
                    <e-gantt-column field="TaskId" headerText="Task ID" visible="false"></e-gantt-column>
                    <e-gantt-column field="WBSCode" headerText="WBS Code" width="150px"></e-gantt-column>
                    <e-gantt-column field="TaskName" headerText="Task Name" width="260px"></e-gantt-column>
                    <e-gantt-column field="StartDate" headerText="Start Date" width="140px"></e-gantt-column>
                    <e-gantt-column field="WBSPredecessor" headerText="WBS Predecessor" width="190px"></e-gantt-column>
                    <e-gantt-column field="Duration" headerText="Duration" allowEditing="false"></e-gantt-column>
                    <e-gantt-column field="Progress" headerText="Progress"></e-gantt-column>
                </e-gantt-columns>
                <e-gantt-eventmarkers>
                    <e-gantt-eventmarker day="04/2/2024" label="Project Initiation"></e-gantt-eventmarker>
                </e-gantt-eventmarkers>
            </ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.WBSData();
    return View();
}

Managing WBS code updates

For better performance, you can control when WBS codes are updated by using the ActionBegin and DataBound events. This is particularly useful during actions like dragging and dropping rows.

In the following example, WBS auto-update is enabled only during the row drag and drop action using these events.

<ejs-gantt id="GanttChart" dataSource="@GanttData.WBSData()" allowSorting="true" enableContextMenu="true" enableWBS="true" enableAutoWbsUpdate="false" allowPdfExport="true" allowSelection="true" allowFiltering="true" allowUnscheduledTasks="true" highlightWeekends="true" gridLines="Both" height="550px" treeColumnIndex="2" dataBound="dataBound" actionBegin="actionBegin"  projectStartDate="03/31/2024" projectEndDate="05/30/2024" rowHeight="40" taskbarHeight="20" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })">
                <e-gantt-selectionsettings mode="Row" type="Single" enableToggle="false"></e-gantt-selectionsettings>
                <e-gantt-splittersettings columnIndex="4"></e-gantt-splittersettings>
                <e-gantt-timelinesettings>
                    <e-timelinesettings-toptier unit="Week" format="dd/MM/yyyy"></e-timelinesettings-toptier>
                    <e-timelinesettings-bottomtier unit="Day" count="1"></e-timelinesettings-bottomtier>
                </e-gantt-timelinesettings>
                <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
                <e-gantt-filtersettings type="Menu"></e-gantt-filtersettings>
                <e-gantt-tooltipsettings showTooltip="true"></e-gantt-tooltipsettings>
                <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" dependency="Predecessor" parentID="ParentID"></e-gantt-taskfields>
                <e-gantt-labelsettings taskLabel="${Progress}%"></e-gantt-labelsettings>
                <e-gantt-columns>
                    <e-gantt-column field="TaskId" headerText="Task ID" visible="false"></e-gantt-column>
                    <e-gantt-column field="WBSCode" headerText="WBS Code" width="150px"></e-gantt-column>
                    <e-gantt-column field="TaskName" headerText="Task Name" width="260px"></e-gantt-column>
                    <e-gantt-column field="StartDate" headerText="Start Date" width="140px"></e-gantt-column>
                    <e-gantt-column field="WBSPredecessor" headerText="WBS Predecessor" width="190px"></e-gantt-column>
                    <e-gantt-column field="Duration" headerText="Duration" allowEditing="false"></e-gantt-column>
                    <e-gantt-column field="Progress" headerText="Progress"></e-gantt-column>
                </e-gantt-columns>
                <e-gantt-eventmarkers>
                    <e-gantt-eventmarker day="04/2/2024" label="Project Initiation"></e-gantt-eventmarker>
                </e-gantt-eventmarkers>
            </ejs-gantt>


            <script>
                var isRowDropped = false;
		        function actionBegin(args) {
		        	if (args.requestType === "beforeDrop") {
                        var ganttObj = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
                        isRowDropped = true;
                        ganttObj.enableAutoWbsUpdate = true;
                    }            
		        }
        
		        function dataBound() {
		        	if (this.isRowDropped) {
                        var ganttObj = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
                        ganttObj.enableAutoWbsUpdate = false;
                        isRowDropped = false;
                    }
		        }
	        </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.WBSData();
    return View();
}

Limitations

The WBS feature has a few limitations in the Gantt component:

  • 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.