HelpBot Assistant

How can I help you?

Getting Started in EJ2 TypeScript Gantt Chart Control

4 Mar 202624 minutes to read

This section explains the steps to create a simple Gantt and demonstrates the basic usage of the gantt component using the Essential^® JS 2 quickstart seed repository. This seed repository is pre-configured with the Essential^® JS 2 package.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. It requires node v14.15.0 or higher. For more information about webpack and its features, refer to the webpack documentation.

Dependencies

A list of dependencies to use the Gantt Chart with all features.

|-- @syncfusion/ej2-gantt
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-calendars
    |-- @syncfusion/ej2-layouts
    |-- @syncfusion/ej2-richtexteditor
    |-- @syncfusion/ej2-grids
    |-- @syncfusion/ej2-treegrid
    |-- @syncfusion/ej2-excel-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-splitbuttons

Setup development environment

Open the command prompt from the required directory, and run the following command to clone the Syncfusion^® JavaScript (Essential^® JS 2) quickstart project from GitHub.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack

After cloning the application in the ej2-quickstart folder, run the following command line to navigate to the ej2-quickstart folder.

cd ej2-quickstart-webpack

Add Syncfusion^® JavaScript packages

Syncfusion^® JavaScript (Essential^® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion^® JavaScript (Essential^® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

The quickstart application is preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json file. Use the following command to install the dependent npm packages from the command prompt.

npm install

Import the Syncfusion^® CSS styles

Syncfusion^® JavaScript controls come with built-in themes, which are available in the installed packages. It’s easy to adapt the Syncfusion^® JavaScript controls to match the style of your application by referring to one of the built-in themes.

The quickstart application is preconfigured to use the Tailwind3 theme in the ~/src/styles/styles.css file, as shown below:

style.css
@import '../../node_modules/@syncfusion/ej2/tailwind3.css';

You can check out the themes section to know more about built-in themes and CSS reference for individual controls.

Adding Gantt Chart Control

You can start adding Essential^® JS 2 Gantt Chart component to the application. To get started, add the Gantt Chart component in app.ts and index.html files using the following code.

Place the following Gantt Chart code in the app.ts.

app.ts
import { Gantt } from '@syncfusion/ej2-gantt';

let gantt: Gantt = new Gantt({
    dataSource: [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2, 3, 5]  },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 50 },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4] },
                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4, 8], },
                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0,Predecessor:"6SS", Progress: 50, resources: [12, 5] }
            ]
        },
    ],
    height: '450px',
    taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                endDate: 'EndDate',
                progress: 'Progress',
                dependency: 'Predecessor',
                child: 'subtasks'
        }
    });

 gantt.appendTo('#Gantt');

Now, add an HTML div element with its ID attribute set to Gantt in your index.html using the following code.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <!--Element which will render as Gantt-->
    <div id="Gantt"></div>
</body>

</html>

Binding Gantt with data

Bind data with the Gantt control by using the dataSource property. It accepts an array of JavaScript object or the DataManager instance.

index.html
<!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 rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
      <div id='loader'>Loading....</div>
      <div id='container'>
        <div id='Gantt'></div>
      </div>
</body>

</html>

Place the following code in the app.ts.

app.ts
let data: Object[]  = [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4 , Progress: 50 },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
            ]
        },
    ];

    let gantt: Gantt = new Gantt({
         dataSource: data,
     });

gantt.appendTo('#Gantt');

Mapping task fields

The data source fields that are required to render the tasks are mapped to the Gantt control using the taskFields property.

app.ts
import { Gantt} from '@syncfusion/ej2-gantt';

let gantt: Gantt = new Gantt({
         dataSource: data,
         height:'450px',
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            dependency: 'Predecessor',
            progress: 'Progress',
            child: 'subtasks',
        },
  });

gantt.appendTo('#Gantt');

Defining columns

The Gantt Chart has an option to define columns as array. Each column in this array supports various properties that allow customization. Let’s check the properties used here:

The field property is used to map the column to a corresponding property name in the array of JavaScript objects.
The headerText property is used to specify a custom title for the column.
The textAlign property controls the horizontal alignment of content in the column. By default, columns are left-aligned. To align content to the right, set textAlign to Right.
The format property is applied to format numeric and date values. In this case, it is used to convert numeric values into a standard currency format.

app.ts
import { Gantt } from '@syncfusion/ej2-gantt';
import { data } from 'datasource.ts';

let gantt: Gantt = new Gantt({
    dataSource: data,
    columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: '250' },
            { field: 'TaskName', headerText: 'Task Name', width: '250' },
            { field: 'StartDate', headerText: 'Start Date', width: '250' },
            { field: 'Duration', headerText: 'Duration', width: '250' },
            { field: 'Progress', headerText: 'Progress', width: '250', format: 'C' },
        ],
});
gantt.appendTo('#Gantt');

Module injection

To create a Gantt with additional features, inject the required modules. The following modules are used to extend the Gantt’s basic functionality:

Edit: Inject this module to use the editing feature.
Filter: Inject this module to use the filtering feature.
Sort: Inject this module to use the sorting feature.

These modules should be injected into the Gantt using the Gantt.Inject method.

Additional feature modules are available here.

Enable editing

The editing feature enables you to edit the tasks in the Gantt control. It can be enabled by using the editSettings.allowEditing and editSettings.allowTaskbarEditing properties.

The following editing options are available to update the tasks in Gantt:

Cell
Dialog
Taskbar
Connector line

Cell editing

Modify the task details through cell editing by setting the edit mode to Auto. Inject the Edit module as follows. If the Edit module is not injected, you cannot edit the cell when a grid cell is clicked.

index.ts
index.html
import { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';

Gantt.Inject(Edit);

let gantt: Gantt = new Gantt({
        dataSource: GanttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
        },
        editSettings: {
           allowEditing: true,
           mode:'Auto'
    }
});

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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
</body>

</html>

Note: When the edit mode is set to Auto, you can change the cells to editable mode by double-clicking anywhere at the TreeGrid and edit the task details in the edit dialog by double-clicking anywhere at the chart.

Dialog editing

Modify the task details through dialog by setting the edit mode to Dialog. Inject the Edit module as follows. If the Edit module is not injected, you cannot edit the task details through the edit dialog.

index.ts
index.html
import { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';

Gantt.Inject(Edit);

let gantt: Gantt = new Gantt({
     dataSource: GanttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
        },
        editSettings: {
           allowEditing: true,
           mode:'Dialog'
    }
});

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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
</body>

</html>

Note: In dialog editing mode, the edit dialog will appear while performing double-click action in both TreeGrid and chart sides.

Taskbar editing

Modify the task details through user interaction such as resizing and dragging the taskbar by enabling the allowTaskbarEditing property. Inject the Edit module as follows. If the Edit module is not injected, you cannot edit the task details while dragging the taskbar.

index.ts
index.html
import { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';

Gantt.Inject(Edit);

let gantt: Gantt = new Gantt({
         dataSource: GanttData,
         height:'450px',
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
        },
        editSettings: {
           allowTaskbarEditing:true
        }
});
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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
</body>

</html>

Dependency editing

Modify the task dependencies using mouse interactions by enabling the allowTaskbarEditing property along with mapping the task dependency data source field to the dependency property.

index.ts
index.html
import { Gantt, Edit } from '@syncfusion/ej2-gantt';

Gantt.Inject(Edit);

let gantt: Gantt = new Gantt({
        dataSource: [
            {
                TaskID: 1,
                TaskName: 'Project Initiation',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
                    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 50 },
                ]
            },
            {
                TaskID: 5,
                TaskName: 'Project Estimation',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0,Predecessor:"6SS", Progress: 50 }
                ]
            },
        ],
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        },
        editSettings: {
           allowTaskbarEditing:true
         }
});

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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
</body>

</html>

Enable filtering

The filtering feature enables you to view the reduced amount of records based on filter criteria. Gantt provides the menu filtering support for each column. It can be enabled by setting the allowFiltering property to true along with injecting the Filter module as shown in the following code example. Filtering feature can also be customized using the filterSettings property.

index.ts
index.html
import { Gantt, Filter } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';

Gantt.Inject(Filter);

let gantt: Gantt = new Gantt({
        dataSource: GanttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
        },
        allowFiltering:true
});

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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
</body>

</html>

Enable sorting

The sorting feature enables you to order the records. It can be enabled by setting the allowSorting property to true. Inject the Sort module as follows. If the Sort module is not injected, you cannot sort the records when a header is clicked. The sorting feature can be customized using the sortSettings property.

index.ts
index.html
import { Gantt, Sort } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';

Gantt.Inject(Sort);

let gantt: Gantt = new Gantt({
        dataSource: GanttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
        },
        allowSorting:true
});

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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
</body>

</html>

Enabling predecessors or task relationships

Predecessor or task dependency in the Gantt control is used to depict the relationship between the tasks.

Finish-to-Start (FS): The successor task starts after the predecessor finishes.
Start-to-Start (SS): The successor task starts when the predecessor starts.
Finish-to-Finish (FF): The successor task finishes when the predecessor finishes.
Start-to-Finish (SF): The successor task finishes when the predecessor starts.
You can show the relationship in tasks by using the dependency property as shown in the following code example.

index.ts
index.html
import { Gantt } from '@syncfusion/ej2-gantt';

let gantt: Gantt = new Gantt({
        dataSource: [
            {
                TaskID: 1,
                TaskName: 'Project Initiation',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
                    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 50 },
                ]
            },
            {
                TaskID: 5,
                TaskName: 'Project Estimation',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0,Predecessor:"6SS", Progress: 50 }
                ]
            },
        ],
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        }
});

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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>

Assigning resources

You can display and assign the resource for each task in the Gantt control. Create a collection of JSON object, which contains id, name, unit and group of the resources and assign it to the resources property. Map these fields to the Gantt control using the resourceFields property.

index.ts
index.html
import { Gantt } from '@syncfusion/ej2-gantt';

let projectResources: Object[] = [
    { resourceId: 1, resourceName: 'Martin Tamer' },
    { resourceId: 2, resourceName: 'Rose Fuller' },
    { resourceId: 3, resourceName: 'Margaret Buchanan' },
    { resourceId: 4, resourceName: 'Fuller King' },
    { resourceId: 5, resourceName: 'Davolio Fuller' },
    { resourceId: 6, resourceName: 'Van Jack' },
    { resourceId: 7, resourceName: 'Fuller Buchanan' },
    { resourceId: 8, resourceName: 'Jack Davolio' },
    { resourceId: 9, resourceName: 'Tamer Vinet' },
    { resourceId: 10, resourceName: 'Vinet Fuller' },
    { resourceId: 11, resourceName: 'Bergs Anton' },
    { resourceId: 12, resourceName: 'Construction Supervisor' }
];

let ganttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 4,Progress: 50, resources: [1]},
            {TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4,Progress: 50, resources: [2, 3, 5]},
            {TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),Duration: 3, Progress: 50, resources: [4]},
            {TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),Duration: 3, resources: [4, 8],Progress: 50},
            {TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),Duration: 3, resources: [12, 5]
            }
        ]
    }];

let gantt: Gantt = new Gantt({
        dataSource: ganttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            resourceInfo: 'resources',
            child: 'subtasks'
        },
        columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
        { field: 'resources', headerText: 'Resources', width: '250' },
        { field: 'TaskName', headerText: 'Task Name', width: '250' },
        { field: 'StartDate', headerText: 'Start Date', width: '150' },
        { field: 'Duration', headerText: 'Duration', width: '150' },
        { field: 'Progress', headerText: 'Progress', width: '150' }
       ],
        resourceFields: {
            id: 'resourceId',
            name: 'resourceName',
        },
        resources: projectResources
});

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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>

Run the application

The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.

npm start

Output will be displayed as follows.

index.ts
index.html
import { Gantt, Edit, Filter, Sort } from '@syncfusion/ej2-gantt';

Gantt.Inject(Edit, Filter, Sort);
let projectResources: Object[] = [
    { resourceId: 1, resourceName: 'Martin Tamer' },
    { resourceId: 2, resourceName: 'Rose Fuller' },
    { resourceId: 3, resourceName: 'Margaret Buchanan' },
    { resourceId: 4, resourceName: 'Fuller King' },
    { resourceId: 5, resourceName: 'Davolio Fuller' },
    { resourceId: 6, resourceName: 'Van Jack' },
    { resourceId: 7, resourceName: 'Fuller Buchanan' },
    { resourceId: 8, resourceName: 'Jack Davolio' },
    { resourceId: 9, resourceName: 'Tamer Vinet' },
    { resourceId: 10, resourceName: 'Vinet Fuller' },
    { resourceId: 11, resourceName: 'Bergs Anton' },
    { resourceId: 12, resourceName: 'Construction Supervisor' }
];

let ganttData: Object[] = [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2, 3, 5]  },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 50 },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4] },
                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4, 8], },
                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0,Predecessor:"6SS", Progress: 50, resources: [12, 5] }
            ]
        },
    ];

let gantt: Gantt = new Gantt({
        dataSource: ganttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            resourceInfo: 'resources',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '250' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'resources', headerText: 'Resources', width: '200' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
            { field: 'Predecessor', headerText: 'Predecessor', width: '150' },
        ],
        resourceFields: {
            id: 'resourceId',
            name: 'resourceName',
        },
        resources: projectResources,
        allowSorting:true,
        allowFiltering:true,
        editSettings: {
           allowEditing:true,
           allowTaskbarEditing:true
         }
});

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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>

Error handling

Error handling is used to identify errors, display them and develop recovery strategies to handle errors from gantt. In Gantt, error handling is done by using the actionFailure event. Some of the scenarios that this event handles are:

Invalid duration : The duration field accepts only numerical values with an optional decimal point. Entering non-numerical values triggers the actionFailure event and displays issue information in the event argument.
Invalid dependency: The dependency field accepts only a number followed by a predecessor type (FS, FF, SS, SF). Entering invalid values, such as special characters or incorrect predecessor types, triggers the actionFailure event and displays issue information in the event argument.
Invalid offset : The offset accepts only numerical values or their word equivalents followed by a unit. Entering invalid values, such as special characters triggers actionFailure event and displays issue information in the event argument.
Failure to map task fields : The data source fields necessary for rendering tasks should be mapped to the Gantt control using the taskFields property. Failure to map taskFields in the sample triggers actionFailure event and displays issue information in the event argument.
Failure to map resource fields : To assign resources to a task, resource fields should be mapped to the Gantt control using the resourceFields. Failure to map resourceFields in the sample triggers actionFailure event and displays issue information in the event argument.
Failure to map isPrimaryKey : isPrimaryKey field is crucial for CRUD operations. Failure to map id column in gantt column collection or isPrimaryKey field in one of the columns will trigger actionFailure event and display issue information in the event argument.
Invalid date format : format property under topTier and bottomTier determines how the timelines are displayed in the top tier and bottom tier of the Gantt chart timeline. If the format does not contain a valid standard date format, it triggers the actionFailure event, displaying issue information in the event argument.
Failure to map hasChildMapping : hasChildMapping property should configured for load-on-demand. Ensure it properly configured in the taskFields. Failure to map hasChildMapping in the load-on-demand sample triggers actionFailure event and displays issue information in the event argument.
Invalid day in event markers : day should configured in eventMarkers to render striplines in a particular day. Failure to configure the day in eventMarkers triggers actionFailure event and displays issue information in the event argument.

Additionally, TreeGrid side error handling information is also displayed from the Gantt actionFailure event. For more details on TreeGrid side error handling, refer here.

The following code example shows how to use the actionFailure event in the Gantt control to display an exception when isPrimaryKey is not configured properly in the Gantt Chart column.

index.ts
index.html
import { Gantt} from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';


let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks',
    },
    columns: [
        { field: 'TaskName', width: '150' },
        { field: 'StartDate', width: '150'},
        { field: 'Duration', width: '150' },
        { field: 'Progress', width: '150' }
    ],
    height: '450px',
    splitterSettings: {
        position: '50%'
    },
    actionFailure(args: any){
        let span = document.createElement('span');
        ((gantt.element).parentNode).insertBefore(span,(gantt).element);
        span.style.color = '#FF0000'
        span.innerHTML = args.error[0];
    }
});
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/32.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>


<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="Gantt"></div>        
    </div>
</body></html>

The following screenshot represents the Gantt Exception handling in actionFailure event.

Error Handling

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting Started in EJ2 TypeScript Gantt Chart Control

Dependencies

Setup development environment

Add Syncfusion^® JavaScript packages

Import the Syncfusion^® CSS styles

Adding Gantt Chart Control

Binding Gantt with data

Mapping task fields

Defining columns

Module injection

Enable editing

Cell editing

Dialog editing

Taskbar editing

Dependency editing

Enable filtering

Enable sorting

Enabling predecessors or task relationships

Assigning resources

Run the application

Error handling

How can I help you?

Getting Started in EJ2 TypeScript Gantt Chart Control

Dependencies

Setup development environment

Add Syncfusion® JavaScript packages

Import the Syncfusion® CSS styles

Adding Gantt Chart Control

Binding Gantt with data

Mapping task fields

Defining columns

Module injection

Enable editing

Cell editing

Dialog editing

Taskbar editing

Dependency editing

Enable filtering

Enable sorting

Enabling predecessors or task relationships

Assigning resources

Run the application

Error handling

Add Syncfusion^® JavaScript packages

Import the Syncfusion^® CSS styles