Open add edit dialog in React Gantt component

2 Feb 20238 minutes 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.

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Edit, Selection } from '@syncfusion/ej2-react-gantt';
import { taskData } from './datasource';

const App = () => {
    const ganttRef = useRef(null);

    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentId'
    };

    const editOptions = {
        allowEditing: true,
        allowAdding: true,
    };

    const openAddDialog = () => {
        ganttRef.current.editModule.dialogModule.openAddDialog();
    };

    const openEditDialog = () => {
        ganttRef.current.editModule.dialogModule.openEditDialog();
    };

    return (
        <div>
            <ButtonComponent onClick={openAddDialog}>Open Add Dialog</ButtonComponent>
            <ButtonComponent onClick={openEditDialog}>Open Edit Dialog</ButtonComponent>
            <GanttComponent
                dataSource={taskData}
                ref={ganttRef}
                taskFields={taskFields}
                allowSelection={true}
                editSettings={editOptions}
                height="450px"
            >
                <Inject services={[Edit, Selection]} />
            </GanttComponent>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection } from '@syncfusion/ej2-react-gantt';
import { taskData } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentId'
    };
    public ganttInstance:any;
    public editOptions: EditSettingsModel = {
        allowEditing: true,
        allowAdding:true
    };
    public editHandler(){
        this.ganttInstance.editModule.dialogModule.openEditDialog();
    }
    public addHandler(){
        this.ganttInstance.editModule.dialogModule.openAddDialog();
    }
    render() {
        return (<div>
        <ButtonComponent  onClick= { this.addHandler.bind(this)}>Open Add Dialog</ButtonComponent>
        <ButtonComponent  onClick= { this.editHandler.bind(this)}>Open Edit Dialog</ButtonComponent>
        <GanttComponent 
            dataSource={taskData} 
            ref={gantt => this.ganttInstance = gantt} 
            taskFields={this.taskFields} 
            allowSelection={true}
            editSettings={this.editOptions} 
            height = '450px'
        >
            <Inject services={[Edit, Selection]} />
        </GanttComponent></div>)
    }
};
ReactDOM.render(<App />, document.getElementById('root'));
<!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/29.2.4/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%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

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