Managing Tasks in JavaScript Gantt control

17 Mar 2023 / 3 minutes to read

The Gantt component has options to dynamically insert, delete, and update tasks in the project. The primary key column is necessary to manage the tasks and perform CRUD operations in Gantt. To define the primary key, set the columns.isPrimaryKey property to true in the particular column.

To use CRUD, inject the Edit module into the Gantt control.

Source

Preview

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,
        allowAdding: 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/20.4.48/material.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>
</head>

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

</html>

Read-only Gantt

In Gantt, all create, update, delete operations can be disabled by set readOnly property as true. The following sample demonstrates, render Gantt chart as read only.

Source

Preview

index.ts

index.html

import { Gantt, Edit, Toolbar, ContextMenu, Resize, Sort, Selection} from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';

Gantt.Inject(Edit, Toolbar, ContextMenu, Resize, Sort, Selection);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks',
    },
    toolbar: ['Add', 'Cancel', 'CollapseAll', 'Delete', 'Edit', 'ExpandAll', 'NextTimeSpan', 'PrevTimeSpan', 'Search', 'Update', 'Indent', 'Outdent'],
    enableContextMenu: true,
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        allowTaskbarEditing: true
    },
    allowSorting: true,
    allowResizing: true,
    readOnly: 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/20.4.48/material.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>

    <style> 
        .e-gantt-chart .e-preventEdit .e-right-resize-gripper, 
        .e-gantt-chart .e-preventEdit .e-left-resize-gripper, 
        .e-gantt-chart .e-preventEdit .e-progress-resize-gripper, 
        .e-gantt-chart .e-preventEdit .e-left-connectorpoint-outer-div, 
        .e-gantt-chart .e-preventEdit .e-right-connectorpoint-outer-div { 
                         display: none; 
        } 
    </style>
</head>

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

</html>

Troubleshoot: Editing works only when primary key column is defined

Editing feature requires a primary key column for CRUD operations. While defining columns in Gantt using the columns property, it is mandatory that any one of the columns, must be a primary column. By default, the id column will be the primary key column. If id column is not defined, we need to enable isPrimaryKey for any one of the columns defined in the columns property.

Open new task dialog with default values

You can set default values when new task dialog opens using actionBegin event when requestType is beforeOpenAddDialog.

Source

Preview

index.ts

index.html

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

Gantt.Inject(Toolbar, Edit);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    },
    editSettings: {
        allowAdding: true
    },
    actionBegin : (args: ActionBeginArgs) => {
        if (args.requestType == 'beforeOpenAddDialog') {
            args.rowData.TaskName = 'Gantt';
            args.rowData.Progress = 70;
            args.rowData.ganttProperties.taskName = 'Gantt';
            args.rowData.ganttProperties.progress = 70;
        }
    },
    toolbar: ['Add']
});
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/20.4.48/material.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>
</head>

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

</html>

Contents

Read-only Gantt
Troubleshoot Editing works only when primary key column is defined
Open new task dialog with default values

Contents

Read-only Gantt
Troubleshoot Editing works only when primary key column is defined
Open new task dialog with default values