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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Edit, Selection } 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 = {
allowEditing: true,
allowAdding: true
};
}
editHandler() {
this.ganttInstance.editModule.dialogModule.openEditDialog();
}
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={data} 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/20.1.55/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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 { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
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={data} 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'));NOTE: We should select any one of the row in Gantt to open the edit dialog.