Search results

Critical Path in React Gantt component

02 Dec 2022 / 2 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 property.

The following code example shows how to display the critical path taskbar in the Gantt control:

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar, CriticalPath } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.editOptions = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        };
        this.toolbarOptions = ['CriticalPath'];
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} enableCriticalPath={true} editSettings={this.editOptions} toolbar={this.toolbarOptions} height='450px'>
            <Inject services={[Edit, CriticalPath, Toolbar]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Toolbar, ToolbarItem, CriticalPath } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  public editOptions: EditSettingsModel = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
  };
  public toolbarOptions: ToolbarItem[] = ['CriticalPath'];
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} enableCriticalPath={true}
        editSettings={this.editOptions} toolbar={this.toolbarOptions} height = '450px'>
            <Inject services={[Edit, CriticalPath, Toolbar]} />
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

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

The following code example shows how to customize the critical path taskbar in the Gantt control:

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar, CriticalPath } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.editOptions = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        };
        this.toolbarOptions = ['CriticalPath'];
    }
    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)';
        }
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} height='450px' queryTaskbarInfo={this.queryTaskbarInfo.bind(this)} enableCriticalPath={true} editSettings={this.editOptions} toolbar={this.toolbarOptions}>
            <Inject services={[Edit, CriticalPath, Toolbar]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Toolbar, ToolbarItem, CriticalPath } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  public editOptions: EditSettingsModel = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
  };
  public queryTaskbarInfo(args: any): void {
      if ((args.data.isCritical || args.data.slack === '0 day') && !args.data.hasChildRecords) {
          args.taskbarBgColor = 'rgb(242, 210, 189)';
          args.progressBarBgColor = 'rgb(201, 169, 166)';
        }
    }
  public toolbarOptions: ToolbarItem[] = ['CriticalPath'];
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} height = '450px' queryTaskbarInfo={this.queryTaskbarInfo.bind(this)} enableCriticalPath={true}
        editSettings={this.editOptions} toolbar={this.toolbarOptions}>
            <Inject services={[Edit, CriticalPath, Toolbar]} />
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));