How can I help you?
Editing Tasks in React Gantt Chart Component
3 Feb 202624 minutes to read
Editing tasks in the React Gantt Chart component enables dynamic project updates, such as modifying task durations, names, or dependencies, using cell editing, dialog, taskbar interactions, or programmatic methods. Enable editing by setting editSettings.allowEditing and editSettings.allowTaskbarEditing to true with Edit injected, ensuring task data aligns with taskFields mappings (e.g., id, name, startDate). Cell editing allows direct updates in the TreeGrid pane, dialog editing provides a comprehensive interface, taskbar dragging adjusts durations or dates, and connector lines manage dependencies via drag-and-drop. Use the editSettings.mode property to control editing behavior (Auto or Dialog). Customize dialog fields with addDialogFields and editDialogFields for tailored forms. The updateRecordById method enables programmatic updates, except for task IDs. Ensure valid data to prevent issues and maintain dependency integrity.
To get start quickly with CRUD functionalities, you can check on this video:
Edit tasks via cell editing
Enable cell editing by setting editSettings.allowEditing to true, editSettings.mode to Auto, and injecting Edit. Double-click a TreeGrid cell to edit fields like task name or duration directly, ideal for quick updates. Ensure taskFields mappings are valid for seamless editing.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions = {
allowEditing: true,
mode: 'Auto'
};
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} height='450px'>
<Inject services={[Edit, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, TaskFieldsModel, EditSettingsModel, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions: EditSettingsModel = {
allowEditing: true,
mode: 'Auto'
};
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} height='450px'>
<Inject services={[Edit, Selection]} />
</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/32.2.3/tailwind3.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>Edit tasks via dialog
Enable dialog editing by setting editSettings.allowEditing to true, editSettings.mode to Dialog, and injecting Edit. Double-click a row on the TreeGrid or chart side to open a dialog for editing task details, such as start date or dependencies, suitable for comprehensive updates. In Auto mode, double-clicking the chart side opens the dialog, while the TreeGrid side enables cell editing.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions = {
allowEditing: true,
mode: 'Dialog'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
editSettings={editOptions} height='450px'>
<Inject services={[Edit]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions: EditSettingsModel = {
allowEditing: true,
mode: 'Dialog'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
editSettings={editOptions} height='450px'>
<Inject services={[Edit]} />
</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/32.2.3/tailwind3.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>Customize dialog tabs
Customize the edit dialog by defining tabs with addDialogFields and editDialogFields, using the type property (e.g., General, Dependency). This organizes fields into tabs for focused editing, such as task details or dependencies, with Edit required.
The following sample demonstrates customization using properties and the actionComplete event.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data, editingResources } from './datasource';
function App() {
let taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID',
notes: 'info',
resourceInfo: 'resources'
};
let editDialogFields = [
{ type: 'General', headerText: 'General' },
{ type: 'Dependency' },
{ type: 'Resources' },
{ type: 'Notes' }
];
let addDialogFields = [
{ type: 'General', headerText: 'General' },
{ type: 'Dependency' }
];
let resourceFields = { id: 'resourceId', name: 'resourceName' };
let resources = editingResources;
let editSettings = {
allowAdding: true,
allowEditing: true,
mode: 'Dialog',
allowTaskbarEditing: true
};
let labelSettings = { leftLabel: 'TaskName', rightLabel: 'resources' };
let toolbar = ['Add'];
let projectStartDate = new Date('03/28/2019');
let projectEndDate = new Date('04/14/2019');
function actionComplete(args) {
if (args.requestType === 'openEditDialog') {
(args).element.ej2_instances[0].height = 500;
const tab = document.getElementById('ganttGeneralTabContainer');
if (tab) {
tab.style.height = '300px';
}
}
}
return (
<GanttComponent id="gantt" height="430px" dataSource={data} taskFields={taskSettings} editSettings={editSettings} editDialogFields={editDialogFields} addDialogFields={addDialogFields} resourceFields={resourceFields} resources={resources} toolbar={toolbar} labelSettings={labelSettings} projectStartDate={projectStartDate} projectEndDate={projectEndDate} actionComplete={actionComplete}>
<Inject services={[Edit, Toolbar]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, TaskFieldsModel, EditSettingsModel, LabelSettingsModel, ActionBeginEventArgs, Edit, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data, editingResources } from './datasource';
function App() {
let taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID',
notes: 'info',
resourceInfo: 'resources'
};
let editDialogFields: object[] = [
{ type: 'General', headerText: 'General' },
{ type: 'Dependency' },
{ type: 'Resources' },
{ type: 'Notes' }
];
let addDialogFields: object[] = [
{ type: 'General', headerText: 'General' },
{ type: 'Dependency' }
];
let resourceFields: object = { id: 'resourceId', name: 'resourceName' };
let resources: object[] = editingResources;
let editSettings: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
mode: 'Dialog',
allowTaskbarEditing: true
};
let labelSettings: LabelSettingsModel = { leftLabel: 'TaskName', rightLabel: 'resources' };
let toolbar: string[] = ['Add'];
let projectStartDate: Date = new Date('03/28/2019');
let projectEndDate: Date = new Date('04/14/2019');
function actionComplete(args: ActionBeginEventArgs): void {
if (args.requestType === 'openEditDialog') {
(args as any).element.ej2_instances[0].height = 500;
const tab = document.getElementById('ganttGeneralTabContainer');
if (tab) {
tab.style.height = '300px';
}
}
}
return (
<GanttComponent id="gantt" height="430px" dataSource={data} taskFields={taskSettings} editSettings={editSettings} editDialogFields={editDialogFields} addDialogFields={addDialogFields} resourceFields={resourceFields} resources={resources} toolbar={toolbar} labelSettings={labelSettings} projectStartDate={projectStartDate} projectEndDate={projectEndDate} actionComplete={actionComplete}>
<Inject services={[Edit, 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/32.2.3/tailwind3.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>Limit fields in general tab
Restrict fields in the dialog’s General tab using addDialogFields and editDialogFields with type set to General and fields specifying visible fields (e.g., TaskName, Duration). This streamlines editing by showing only relevant fields, requiring Edit.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data, ProjectResources } from './datasource';
function App() {
let taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID',
notes: 'info',
resourceInfo: 'resources'
};
let editDialogFields = [
{ type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName', 'isParent'] },
{ type: 'Dependency' },
{ type: 'Resources' }
];
let resourceFields = { id: 'resourceId', name: 'resourceName' };
let editSettings = { allowAdding: true, allowEditing: true, mode: 'Dialog', allowTaskbarEditing: true };
let labelSettings = { leftLabel: 'TaskName', rightLabel: 'resources' };
let toolbar = ['Add'];
let projectStartDate = new Date('03/28/2019');
let projectEndDate = new Date('04/14/2019');
return (
<GanttComponent height="430px" dataSource={data} taskFields={taskSettings} editDialogFields={editDialogFields} editSettings={editSettings} resourceFields={resourceFields} resources={ProjectResources} labelSettings={labelSettings} toolbar={toolbar} projectStartDate={projectStartDate} projectEndDate={projectEndDate}>
<Inject services={[Edit, Toolbar]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, TaskFieldsModel, EditSettingsModel, LabelSettingsModel, Edit, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data, ProjectResources } from './datasource';
function App() {
let taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID',
notes: 'info',
resourceInfo: 'resources'
};
let editDialogFields: object[] = [
{ type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName', 'isParent'] },
{ type: 'Dependency' },
{ type: 'Resources' }
];
let resourceFields: object = { id: 'resourceId', name: 'resourceName' };
let editSettings: EditSettingsModel = { allowAdding: true, allowEditing: true, mode: 'Dialog', allowTaskbarEditing: true };
let labelSettings: LabelSettingsModel = { leftLabel: 'TaskName', rightLabel: 'resources' };
let toolbar: string[] = ['Add'];
let projectStartDate: Date = new Date('03/28/2019');
let projectEndDate: Date = new Date('04/14/2019');
return (
<GanttComponent height="430px"
dataSource={data}
taskFields={taskSettings} editDialogFields={editDialogFields} editSettings={editSettings}
resourceFields={resourceFields} resources={ProjectResources}
labelSettings={labelSettings} toolbar={toolbar}
projectStartDate={projectStartDate} projectEndDate={projectEndDate}>
<Inject services={[Edit, 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/32.2.3/tailwind3.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>Edit task dependencies
Enable dependency editing by mapping the dependency property in taskFields, setting editSettings.allowEditing and editSettings.allowTaskbarEditing to true, and injecting Edit. Update dependencies via:
-
Mouse interactions: Drag connector points on taskbars to create or modify links.
-
Dialog: Edit the Dependency tab in the edit dialog.
-
Cell editing: Update the dependency field in the TreeGrid. Ensure valid dependency strings to avoid circular references.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit } from '@syncfusion/ej2-react-gantt';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID'
};
const editOptions = {
allowTaskbarEditing: true,
allowEditing: true,
mode: 'Dialog'
};
return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px'>
<Inject services={[Edit]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID'
};
const editOptions: EditSettingsModel = {
allowTaskbarEditing: true,
allowEditing: true,
mode: 'Dialog'
};
return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px'>
<Inject services={[Edit]} />
</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/32.2.3/tailwind3.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>Edit tasks programmatically
You can update tasks programmatically using the updateRecordById method by specifying the task ID and updated data. This requires Edit to be injected and supports automation, such as updating durations through a button. The task ID cannot be changed using this method. Ensure taskFields mappings are valid for successful updates.
To update an existing task ID with a new unique ID, use the updateTaskId method.
You can also update custom column values using the
updateRecordByIdmethod. ThetaskIDmust be specified for the update to apply.
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';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions = {
allowEditing: true
};
let ganttInstance;
function clickHandler() {
let data = {
TaskID: 3,
TaskName: 'Updated by index value',
StartDate: new Date('04/02/2019'),
Duration: 4,
Progress: 50
};
ganttInstance.updateRecordByID(data);
}
return (<div>
<ButtonComponent onClick={clickHandler}>Update Record</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, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions: EditSettingsModel = {
allowEditing: true
};
let ganttInstance: GanttComponent;
function clickHandler() {
let data: any = {
TaskID: 3,
TaskName: 'Updated by index value',
StartDate: new Date('04/02/2019'),
Duration: 4,
Progress: 50
};
ganttInstance.updateRecordByID(data);
}
return (<div>
<ButtonComponent onClick={clickHandler}>Update Record</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/32.2.3/tailwind3.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>Render custom edit component
You can render a custom edit component for a column using the column.edit property. This property supports the following methods to manage the component lifecycle:
-
create: Initializes the custom component. -
write: Renders the component inside the cell. -
read: Retrieves the edited value. -
destroy: Cleans up the component instance.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
GanttComponent,
ColumnsDirective,
ColumnDirective,
Inject,
Edit,
Toolbar
} from '@syncfusion/ej2-react-gantt';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ganttData } from './datasource';
function App() {
let ganttObj = null;
let elem = null;
let dropdownlistObj;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID',
notes: 'info'
};
const editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const toolbar = [
'Add', 'Edit', 'Update', 'Delete',
'Cancel', 'ExpandAll', 'CollapseAll',
'Indent', 'Outdent'
];
const projectStartDate = new Date('03/25/2024');
const projectEndDate = new Date('07/28/2024');
const editParams = {
create: () => {
elem = document.createElement('input');
return elem;
},
read: () => {
return dropdownlistObj.value;
},
destroy: () => {
dropdownlistObj.destroy();
},
write: (args) => {
dropdownlistObj = new DropDownList({
dataSource: ganttObj.treeGrid.grid.dataSource,
fields: { value: 'TaskName' },
value: args.rowData[args.column.field],
floatLabelType: 'Auto'
});
dropdownlistObj.appendTo(elem);
}
};
return (
<GanttComponent
ref={(gantt) => (ganttObj = gantt)}
height="430px"
dataSource={ganttData}
taskFields={taskSettings}
editSettings={editSettings}
toolbar={toolbar}
projectStartDate={projectStartDate}
projectEndDate={projectEndDate}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width={80} />
<ColumnDirective field="TaskName" headerText="TaskName" width={250} edit={editParams} />
<ColumnDirective field="StartDate" headerText="Start Date" width={150} textAlign="Right" format="yMd" type="date" />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
GanttComponent,
ColumnsDirective,
ColumnDirective,
Inject,
TaskFieldsModel,
EditSettingsModel,
Edit,
Toolbar
} from '@syncfusion/ej2-react-gantt';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ganttData } from './datasource';
function App() {
let ganttObj: GanttComponent | null = null;
let elem: HTMLElement | null = null;
let dropdownlistObj: DropDownList;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID',
notes: 'info'
};
const editSettings: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const toolbar: string[] = [
'Add', 'Edit', 'Update', 'Delete',
'Cancel', 'ExpandAll', 'CollapseAll',
'Indent', 'Outdent'
];
const projectStartDate: Date = new Date('03/25/2024');
const projectEndDate: Date = new Date('07/28/2024');
const editParams: any = {
create: () => {
elem = document.createElement('input');
return elem;
},
read: () => {
return dropdownlistObj.value;
},
destroy: () => {
dropdownlistObj.destroy();
},
write: (args: any) => {
dropdownlistObj = new DropDownList({
dataSource: (ganttObj as GanttComponent).treeGrid.grid.dataSource,
fields: { value: 'TaskName' },
value: args.rowData[args.column.field],
floatLabelType: 'Auto'
});
dropdownlistObj.appendTo(elem as HTMLElement);
}
};
return (
<GanttComponent
ref={(gantt: GanttComponent) => (ganttObj = gantt)}
height="430px"
dataSource={ganttData}
taskFields={taskSettings}
editSettings={editSettings}
toolbar={toolbar}
projectStartDate={projectStartDate}
projectEndDate={projectEndDate}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width={80} />
<ColumnDirective field="TaskName" headerText="TaskName" width={250} edit={editParams} />
<ColumnDirective field="StartDate" headerText="Start Date" width={150} textAlign="Right" format="yMd" type="date" />
</ColumnsDirective>
<Inject services={[Edit, 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/32.2.3/tailwind3.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>