Open Add Edit Dialog Dynamically in JavaScript Gantt control

06 Jun 2023 / 1 minute to read

Gantt add and edit dialogs can be opened dynamically by using openAddDialog and openEditDialog methods. The following code example shows how to open add and dialog on separate button click actions.

Source

Preview

index.ts

index.html

import { Gantt, Edit, Selection } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from 'datasource.ts';
import { getValue } from  '@syncfusion/ej2-base';

Gantt.Inject(Edit, Selection);

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,
        allowEditing: true,
        allowTaskbarEditing: true
    }
});

gantt.appendTo('#Gantt');

let editBtn: Button = new Button();
editBtn.appendTo('#editDialog');

let addBtn: Button = new Button();
addBtn.appendTo('#addDialog');

document.getElementById('editDialog').addEventListener('click', () => {
    gantt.editModule.dialogModule.openEditDialog(getValue('TaskID', gantt.selectionModule.getSelectedRecords()[0]));
});

document.getElementById('addDialog').addEventListener('click', () => {
    gantt.editModule.dialogModule.openAddDialog();
});

<!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/21.2.3/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>
    <button id="editDialog">Open EditDialog</button> <button id="addDialog">Open AddDialog</button>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>

NOTE: We should select any one of the row in Gantt to open the edit dialog.