Adding new tasks in React Gantt component
2 Feb 202318 minutes to read
Tasks can be dynamically added to the Gantt project by enabling the editSettings.allowAdding property.
Toolbar
A row can be added to the Gantt component from the toolbar while the editSettings.allowAdding property is set to true. After clicking the toolbar add icon, you should provide the task information in the add dialog.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowAdding: true
};
const toolbarOptions = ['Add'];
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} toolbar={toolbarOptions} height = '450px'>
<Inject services={[Edit, Selection, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection, Toolbar, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions: EditSettingsModel = {
allowAdding: true
};
const toolbarOptions: ToolbarItem[] = ['Add'];
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} toolbar={toolbarOptions} height = '450px'>
<Inject services={[Edit, Selection, Toolbar]} />
</GanttComponent>
};
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/26.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>By default, a new row will be added to the top-most row in the Gantt component.
Context menu
A row can also be added above, below or child of the selected row by using context menu support. For this, we need to enable the propertyenableContextMenu and inject the ContextMenu module into the Gantt control.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, ContextMenu, Selection, Sort, Resize, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const toolbarOptions = ['Add'];
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} enableContextMenu={true} toolbar={toolbarOptions} height='450px'>
<Inject services={[Edit, ContextMenu, Selection, Sort, Resize, Toolbar]}/>
</GanttComponent>;
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, ContextMenu, Selection, Sort, Resize, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const toolbarOptions = ['Add'];
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} enableContextMenu={true} toolbar={toolbarOptions} height='450px'>
<Inject services={[Edit, ContextMenu, Selection, Sort, Resize, Toolbar]}/>
</GanttComponent>;
};
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/26.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>Using method
You can add rows to the Gantt component dynamically using the addRecord method and you can define the add position of the default new record by using the rowPosition property. You can also pass the rowIndex as an additional parameter.
- Top of all the rows.
- Bottom to all the existing rows.
- Above the selected row.
- Below the selected row.
- As child to the selected row.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowAdding: true,
allowEditing: true
};
let ganttInstance;
function clickHandler(){
let data = {
TaskID: 10,
TaskName: 'New Added Task',
StartDate: new Date('04/02/2019'),
Duration: 4,
Progress: 50
};
ganttInstance.editModule.addRecord(data, 'Below', 2);
}
return(<div>
<ButtonComponent onClick= { clickHandler}>Add Row</ButtonComponent>
<GanttComponent dataSource={data} ref={gantt => ganttInstance = gantt} 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, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions: EditSettingsModel = {
allowAdding: true,
allowEditing: true
};
let ganttInstance:any;
function clickHandler(){
let data: any= {
TaskID: 10,
TaskName: 'New Added Task',
StartDate: new Date('04/02/2019'),
Duration: 4,
Progress: 50
};
ganttInstance.editModule.addRecord(data, 'Below', 2);
}
return(<div>
<ButtonComponent onClick= { clickHandler}>Add Row</ButtonComponent>
<GanttComponent dataSource={data} ref={gantt => ganttInstance = gantt} taskFields={taskFields} allowSelection={true}
editSettings={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/26.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>