How can I help you?
Task Bar Editing in React Gantt Chart Component
3 Feb 202612 minutes to read
Task bar editing in the React Gantt Chart component enables intuitive project timeline adjustments by allowing to drag or resize taskbars to modify task details, such as start dates, durations, or progress, using mouse or touch interactions. Enable this feature by setting the allowTaskbarEditing property to true and injecting Edit, ensuring task data aligns with valid taskFields mappings (e.g., id, startDate, duration). Taskbars can be dragged to shift dates, resize them to adjust durations, or move progress grips to update completion percentages. The taskbarEditing event allows preventing edits for specific tasks, while the queryTaskbarInfo event customizes taskbar visuals by hiding editing indicators like resizers or connector points.
Edit taskbars
Enable taskbar editing by setting allowTaskbarEditing to true and injecting Edit. Drag taskbars to adjust start and end dates, resize them to modify durations, or adjust progress grips to update completion percentages, ideal for quick timeline updates.
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 = {
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, 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 = {
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/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>Prevent taskbar editing for specific tasks
Prevent taskbar editing for specific tasks using the taskbarEditing event by setting its cancel property to true based on task data, such as protecting milestones. Customize taskbar visuals by hiding editing indicators (e.g., resizers, connector points) using the queryTaskbarInfo event, ensuring a tailored editing experience.
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 = {
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',
parentID: 'ParentID'
};
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/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%;
}
.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>