Critical Path feature
22 Jul 20223 minutes to read
The critical path in a project is indicated by a single task or a series of tasks. If a task in critical path is delayed, the entire project will be delayed. A task is considered to be critical if any delay to this task would affect the project end date.
The critical path can be enabled in Gantt by using the built-in toolbar button or enableCriticalPath to true.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" enableCriticalPath="true"
toolbar="@(new List<string>() { "CriticalPath" })">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true">
</e-gantt-editsettings>
</ejs-gantt>public IActionResult Index()
{
ViewBag.DataSource = GanttData.EditingData();
return View();
}
Customize taskbar in critical path
The taskbar in critical path can be customized by using queryTaskbarInfo event and isCritical property of row data in the event arugment.
The following code example shows how to customize the critical path taskbar in the Gantt control:
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" enableCriticalPath="true"
queryTaskbarInfo="queryTaskbarInfo" toolbar="@(new List<string>() { "CriticalPath" })">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true">
</e-gantt-editsettings>
</ejs-gantt>
<script>
function queryTaskbarInfo(args) {
if ((args.data.isCritical || args.data.slack === '0 day') && !args.data.hasChildRecords) {
args.taskbarBgColor = 'rgb(242, 210, 189)';
args.progressBarBgColor = 'rgb(201, 169, 166)';
}
}
</script>public IActionResult Index()
{
ViewBag.DataSource = GanttData.EditingData();
return View();
}