Task bar editing in EJ2 TypeScript Gantt control
3 Jul 202324 minutes to read
Modify the task details through user interaction such as resizing and dragging the taskbar by enabling the allowTaskbarEditing
property.
import { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings: {
allowTaskbarEditing: true
}
});
gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></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 { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
taskbarEditing: function (args: any) {
if (args.data.TaskID == 4) // We can't edit Task Id 4
args.cancel = true;
},
queryTaskbarInfo: function (args) {
if (args.data.TaskID == 6) {
args.taskbarElement.className += ' e-preventEdit' // Taskbar editing indicators are hidden
}
},
editSettings: {
allowTaskbarEditing: true
}
});
gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.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='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
Task dependencies
In the Gantt control, you can update the dependencies between the 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
Dependency
tab 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.
import { Gantt, Edit } from '@syncfusion/ej2-gantt';
let GanttData: 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 }
]
},
];
Gantt.Inject(Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
},
editSettings: {
allowTaskbarEditing: true,
allowEditing: true,
mode: 'Auto'
}
});
gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.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='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></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
updateRecordById
method, you cannot update the task ID value.
import { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings: {
allowEditing: true
}
});
gantt.appendTo('#Gantt');
let updateBtn: Button = new Button();
updateBtn.appendTo('#updateRecord');
document.getElementById('updateRecord').addEventListener('click', () => {
let data: Object = {
TaskID: 3,
TaskName: 'Updated by index value',
StartDate: new Date('04/02/2019'),
Duration: 4,
Progress: 50
};
gantt.updateRecordByID(data);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<button id="updateRecord">Update Record</button>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></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
-NumericTextBox
component for integers, double, and decimal data types. -
defaultedit
-TextBox
component for string data type. -
dropdownedit
-DropDownList
component to show all unique values related to that field. -
booleanedit
-CheckBox
component for boolean data type. -
datepickeredit
-DatePicker
component for date data type. -
datetimepickeredit
-DateTimePicker
component 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 { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit);
function durationFormat(field: string, data: Object, column: Object): string {
return data[field];
}
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings: {
allowEditing: true
},
toolbar: ['Edit'],
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{ field: 'TaskName', headerText: 'Task Name' },
{ field: 'StartDate', headerText: 'Start Date' },
{ field: 'Duration', headerText: 'Duration', editType:'numericedit', edit: { params: { min:1 } }, valueAccessor: durationFormat },
{ field: 'Progress', headerText: 'Progress', edit: { params: { showSpinButton: false } } },
],
});
gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></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 { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit);
let elem: HTMLElement;
let dropdownlistObj: DropDownList;
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings: {
allowEditing: true
},
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{
field: 'TaskName', headerText: 'Task Name',
edit: {
create: () => {
elem = document.createElement('input');
return elem;
},
read: () => {
return dropdownlistObj.value;
},
destroy: () => {
dropdownlistObj.destroy();
},
write: (args: Object) => {
dropdownlistObj = new DropDownList({
dataSource: gantt.treeGrid.grid.dataSource,
fields: { value: 'TaskName' },
value: args.rowData[args.column.field],
floatLabelType: 'Auto',
});
dropdownlistObj.appendTo(elem);
}
}
},
{ field: 'StartDate', headerText: 'Start Date' },
{ field: 'Duration', headerText: 'Duration' },
{ field: 'Progress', headerText: 'Progress' },
],
});
gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></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 { Gantt, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings: {
allowEditing: true
},
toolbar: ['Edit'],
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{ field: 'TaskName', headerText: 'Task Name', allowEditing: false },
{ field: 'StartDate', headerText: 'Start Date', },
{ field: 'Duration', headerText: 'Duration' },
{ field: 'Progress', headerText: 'Progress' },
],
});
gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>