Task bar editing in React Gantt component
2 Feb 202324 minutes to read
Modify the task details through user interaction, such as resizing and dragging the taskbar, by enabling the allowTaskbarEditing property.
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',
child: 'subtasks'
};
const editOptions = {
allowTaskbarEditing: true
};
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 } 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 = {
allowTaskbarEditing: true
};
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/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>Prevent editing for specific tasks
On taskbar edit action, the taskbarEditing event will be triggered. You can prevent the taskbar from editing using the taskbarEditing event. This can be done by setting cancel property of taskbarEditing event argument to true. And we can hide the taskbar editing indicators like taskbar resizer, progress resizer and connector points by using queryTaskbarInfo event. The following code example shows how to achieve this.
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',
child: 'subtasks'
};
const editOptions = {
allowTaskbarEditing: true
};
function taskbarEditing(args){
if (args.data.TaskID == 4) // We can't edit Task Id 4
args.cancel = true;
};
function queryTaskbarInfo(args) {
if (args.data.TaskID == 6) {
args.taskbarElement.className += ' e-preventEdit' // Taskbar editing indicators are disabled
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
editSettings={editOptions} taskbarEditing={taskbarEditing} height = '450px' queryTaskbarInfo={queryTaskbarInfo}>
<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 } 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 = {
allowTaskbarEditing: true
};
function taskbarEditing(args: any){
if (args.data.TaskID == 4) // We can't edit Task Id 4
args.cancel = true;
};
function queryTaskbarInfo(args: any) {
if (args.data.TaskID == 6) {
args.taskbarElement.className += ' e-preventEdit' // Taskbar editing indicators are disabled
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
editSettings={editOptions} taskbarEditing={taskbarEditing} height = '450px' queryTaskbarInfo={queryTaskbarInfo}>
<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/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%;
}
.e-gantt-chart .e-preventEdit .e-right-resize-gripper,
.e-gantt-chart .e-preventEdit .e-left-resize-gripper,
.e-gantt-chart .e-preventEdit .e-progress-resize-gripper,
.e-gantt-chart .e-preventEdit .e-left-connectorpoint-outer-div,
.e-gantt-chart .e-preventEdit .e-right-connectorpoint-outer-div {
display: none;
}
</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>Task dependencies
In the Gantt component, you can update the dependencies between tasks and link the tasks interactively. The task dependencies can be mapped from the data source using the dependency property.
You can update the task dependencies using the following ways:
- Mouse interactions: Using connector points in the taskbar, you can perform drag and drop action to create task dependency links.
- Edit dialog: Create or remove the task dependencies using the
Dependencytab in the edit dialog. - Cell editing: Create or remove the task links using cell editing.
The following code example demonstrates how to enable task dependency editing in the Gantt chart using the editSettings property.
let data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "6SS", Progress: 50 }
]
},
];
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',
child: 'subtasks'
};
const editOptions = {
allowEditing: true,
allowTaskbarEditing: true
};
return <GanttComponent dataSource={data} taskFields={taskFields}
editSettings={editOptions} height = '450px'>
<Inject services={[Edit]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));let data: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "6SS", Progress: 50 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
const editOptions: EditSettingsModel = {
allowEditing: true,
allowTaskbarEditing: true
};
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/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>
Updating with mouse interaction action
Updating with cell Edit
Updating with Dialog
Note: When the edit mode is set to Auto, on performing double-click action on TreeGrid side, the cells will be changed to editable mode and on performing double-click action on chart side, the edit dialog will appear for editing the task details.
Update task values using method
Tasks’ value can be dynamically updated by using the updateRecordById method. You can call this method on any custom action. The following code example shows how to use this method to update a task.
NOTE: Using the
updateRecordByIdmethod, you cannot update the task ID value.
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',
child: 'subtasks'
};
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 } 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 = {
allowEditing: true
};
let ganttInstance:any;
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/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>Cell edit type and its params
The columns.editType is used to define the edit type for any particular column.
You can set the columns.editType based on data type of the column.
-
numericedit-NumericTextBoxcomponent for integers, double, and decimal data types. -
defaultedit-TextBoxcomponent for string data type. -
dropdownedit-DropDownListcomponent to show all unique values related to that field. -
booleanedit-CheckBoxcomponent for boolean data type. -
datepickeredit-DatePickercomponent for date data type. -
datetimepickeredit-DateTimePickercomponent for date time data type.
Also, you can customize the behavior of the editor component through the columns.edit.params.
The following table describes cell edit type component and their corresponding edit params of the column.
| Edit Type | Component | Example |
|---|---|---|
numericedit |
NumericTextBox |
params: { decimals: 2, value: 5 } |
dropdownedit |
DropDownList |
params: { value: ‘Germany’ } |
booleanedit |
Checkbox |
params: { checked: true} |
datepickeredit |
DatePicker |
params: { format:’dd.MM.yyyy’ } |
datetimepickeredit |
DateTimePicker |
params: { value: new Date() } |
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Edit, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const numericParams = { params: { min: 1 } };
const progressParams = { params: { showSpinButton: false} };
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowEditing: true
};
function durationFormat(field, data, column) {
return data[field];
}
return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration' editType='numericedit' edit={ numericParams } valueAccessor={durationFormat}></ColumnDirective>
<ColumnDirective field='Progress' editType='numericedit' edit={ progressParams }></ColumnDirective>
</ColumnsDirective>
<Inject services={[Edit]}/>
</GanttComponent>;
}
;
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Edit, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const numericParams = { params: { min: 1 } };
const progressParams = { params: { showSpinButton: false} };
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowEditing: true
};
function durationFormat(field, data, column) {
return data[field];
}
return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration' editType='numericedit' edit={ numericParams } valueAccessor={durationFormat}></ColumnDirective>
<ColumnDirective field='Progress' editType='numericedit' edit={ progressParams }></ColumnDirective>
</ColumnsDirective>
<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/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>Cell Edit Template
The cell edit template is used to create a custom component for a particular column by invoking the following functions:
-
create- It is used to create the element at the time of initialization. -
write- It is used to create the custom component or assign default value at the time of editing. -
read- It is used to read the value from the component at the time of save. -
destroy- It is used to destroy the component.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, Edit } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
import { IEditCell } from '@syncfusion/ej2-grids';
function App () {
let elem;
let ganttInstance;
let dropdownlistObj;
let dropdownlist = {
create: () => {
elem = document.createElement('input');
return elem;
},
read: () => {
return dropdownlistObj.value;
},
destroy: () => {
dropdownlistObj.destroy();
},
write: (args) => {
dropdownlistObj = new DropDownListComponent({
dataSource: ganttInstance.treeGrid.grid.dataSource,
fields: { value: 'TaskName' },
value: args.rowData[args.column.field],
floatLabelType: 'Auto',
});
dropdownlistObj.appendTo(elem);
}
};
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowEditing: true
};
return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px' ref={gantt => ganttInstance = gantt}>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName' edit={this.dropdownlist}></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration'></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Edit]}/>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, Edit } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
import { IEditCell } from '@syncfusion/ej2-grids';
function App () {
let elem : HTMLElement;
let ganttInstance:any;
let dropdownlistObj: DropDownListComponent;
let dropdownlist: IEditCell = {
create: () => {
elem = document.createElement('input');
return elem;
},
read: () => {
return dropdownlistObj.value;
},
destroy: () => {
dropdownlistObj.destroy();
},
write: (args: Object) => {
dropdownlistObj = new DropDownListComponent({
dataSource: ganttInstance.treeGrid.grid.dataSource,
fields: { value: 'TaskName' },
value: args.rowData[args.column.field],
floatLabelType: 'Auto',
});
dropdownlistObj.appendTo(elem);
}
};
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowEditing: true
};
return <GanttComponent dataSource={data} taskFields={taskFields} editSettings={editOptions} height='450px' ref={gantt => ganttInstance = gantt}>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName' edit={this.dropdownlist}></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration'></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
<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/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>Disable editing for particular column
You can disable editing for particular columns, by using the columns.allowEditing property.
In the following demo, editing is disabled for the TaskName column.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, 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',
child: 'subtasks'
};
const editOptions = {
allowEditing: true
};
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName' allowEditing={false}></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration'></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
<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, ColumnsDirective, ColumnDirective, Edit, Selection } 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:any = {
allowEditing: true
};
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName' allowEditing={false}></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration'></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
<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/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>