Managing tasks in EJ2 TypeScript Gantt control
4 Jul 202424 minutes to read
The Gantt component has options to dynamically insert, delete, and update tasks in the project. The primary key column is necessary to manage the tasks and perform CRUD operations in Gantt. To define the primary key, set the columns.isPrimaryKey
property to true
in the particular column.
To use CRUD, inject the Edit
module into the Gantt control.
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,
allowAdding: true,
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/27.1.48/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='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/27.1.48/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/27.1.48/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/27.1.48/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>
Read-only Gantt
In Gantt, all create, update, delete operations can be disabled by set readOnly
property as true
. The following sample demonstrates, render Gantt chart as read only.
import { Gantt, Edit, Toolbar, ContextMenu, Resize, Sort, Selection} from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit, Toolbar, ContextMenu, Resize, Sort, Selection);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
toolbar: ['Add', 'Cancel', 'CollapseAll', 'Delete', 'Edit', 'ExpandAll', 'NextTimeSpan', 'PrevTimeSpan', 'Search', 'Update', 'Indent', 'Outdent'],
enableContextMenu: true,
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
allowTaskbarEditing: true
},
allowSorting: true,
allowResizing: true,
readOnly: 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/27.1.48/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>
Troubleshoot: Editing works only when primary key column is defined
Editing feature requires a primary key column for CRUD operations. While defining columns in Gantt using the columns
property, it is mandatory that any one of the columns, must be a primary column. By default, the id
column will be the primary key column. If id
column is not defined, we need to enable isPrimaryKey
for any one of the columns defined in the columns
property.
Open new task dialog with default values
You can set default values when new task dialog opens using actionBegin event when requestType
is beforeOpenAddDialog
.
import { Gantt, Toolbar, Edit, ActionBeginArgs } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Toolbar, Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings: {
allowAdding: true
},
actionBegin : (args: ActionBeginArgs) => {
if (args.requestType == 'beforeOpenAddDialog') {
args.rowData.TaskName = 'Gantt';
args.rowData.Progress = 70;
args.rowData.ganttProperties.taskName = 'Gantt';
args.rowData.ganttProperties.progress = 70;
}
},
toolbar: ['Add']
});
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/27.1.48/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>
Customize control in add/edit dialog
In Gantt Chart, the controls such as form elements, grid and RTE in add and edit dialog can be customized by using additionalParams property.
Customize general tab of dialog
The form element in the General
tab of the add/edit dialog can be added or removed by using the fields property within the addDialogFields and editDialogFields settings respectively.
The controls of the fields
can be customized by using the edit template feature.
In the below sample, General
tab is customized using the fields
property. The fields TaskID, TaskName and newInput are added in both addDialogFields
and editDialogFields
settings.
import { Gantt, Toolbar, Edit} from '@syncfusion/ej2-gantt';
import { GanttData,resourceCollection } from 'datasource.ts';
Gantt.Inject(Toolbar, Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
resources: resourceCollection,
addDialogFields: [
{ type: 'General', headerText: 'General add',fields: ["TaskID", "TaskName", "newInput"] },
{ type: 'Dependency'},
{ type: 'Resources'} ,
{ type: 'Notes' },
{type:"Segments"}
],
editDialogFields: [
{ type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newInput"] },
{type: 'Dependency', },
{ type: 'Resources'},
{type: 'Notes'},
{type: "Segments"}
],
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
resourceInfo: 'resources',
work: 'work',
child: 'subtasks',
segments: 'Segments',
notes:"note",
},
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
});
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/27.1.48/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>
<script type="text/x-jsrender" id="newInput">
<div class="e-edit-form-column">
<input type="text" class="inputbox" placeholder="custom input 1">
</div>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
Customize dependency, segments and resources tab of dialog
You can customize the dependency, segments, and resource tabs of the dialog box using the additionalParams property within the addDialogFields and editDialogFields settings respectively. This customization involves defining properties from the Grid within the additionalParams
property.
In the example below:
- The
dependency
tab enables sorting and toolbar options. - The
segments
tab enablessorting
andtoolbar
options and includes a new columnnewData
defined with a specified field. - The
resources
tab defines a new columnSegment Task
with specific properties such asfield
, width and headerText.
These customizations are applied to bothaddDialogFields
andeditDialogFields
settings.
import { Gantt, Toolbar, Edit} from '@syncfusion/ej2-gantt';
import { GanttData,resourceCollection } from 'datasource.ts';
Gantt.Inject(Toolbar, Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
resources: resourceCollection,
addDialogFields: [
{ type: 'General', headerText: 'General add'},
{ type: 'Dependency', additionalParams: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
{ type: 'Resources', additionalParams: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newData" }]}},
{type:"Segments", additionalParams:{columns:[{field:"segmenttask",width:"170px" ,headerText:"Segment Task"}],}}
],
editDialogFields: [
{ type: 'General', headerText: 'General edit', fields: ["TaskID", "TaskName", "newinput"] },
{type: 'Dependency', additionalParams: {allowPaging: true, allowSorting: true, toolbar: ["Search", "Print",]}},
{ type: 'Resources', additionalParams: { allowSorting: true, allowPaging: true, toolbar: ["Search", "Print"], columns: [{ field: "newData" }]}},
{type: "Segments", additionalParams: {columns: [{ field: "segmenttask", width: "170px", headerText: "Segment Task" }],}}
],
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
resourceInfo: 'resources',
work: 'work',
child: 'subtasks',
segments: 'Segments',
notes:"note",
},
resourceFields: {
id: 'resourceId',
name: 'resourceName',
unit: 'resourceUnit'
},
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
});
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/27.1.48/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>
<script type="text/x-jsrender" id="newinput">
<div class="e-edit-form-column">
<input type="text" class="inputbox" placeholder="custom input 1">
</div>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
Customize note dialog tab
You can customize the note dialog tab using the additionalParams property within the addDialogFields and editDialogFields settings respectively. This customization involves defining properties from the RTE module within the additionalParams
property.
In the following example, the notes
tab is customized with the inlinemode property enabled, allowing for in-place editing. Additionally, the OnSelection
property is enabled, which opens the toolbar inline upon selecting text.
import { Gantt, Toolbar, Edit} from '@syncfusion/ej2-gantt';
import { GanttData,resourceCollection } from 'datasource.ts';
Gantt.Inject(Toolbar, Edit);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
resources: resourceCollection,
addDialogFields: [
{ type: 'General', headerText: 'General add'},
{ type: 'Dependency'},
{ type: 'Resources'} ,
{type: 'Notes', additionalParams: {inlineMode: { enable: true,onSelection: true }}},
{type:"Segments"}
],
editDialogFields: [
{ type: 'General', headerText: 'General edit' },
{type: 'Dependency'},
{ type: 'Resources'},
{type: 'Notes', additionalParams: {inlineMode: { enable: true,onSelection: true }}},
{type: "Segments"}
],
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
resourceInfo: 'resources',
work: 'work',
child: 'subtasks',
segments: 'Segments',
notes:"note",
},
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
});
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/27.1.48/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>
<script type="text/x-jsrender" id="newinput">
<div class="e-edit-form-column">
<input type="text" class="inputbox" placeholder="custom input 1">
</div>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
Touch interaction
The Gantt control editing actions can be achieved using the double tap and tap and drag actions on a element.
The following table describes different types of editing modes available in Gantt.
Action |Description
—–|—–
Cell editing
| To perform double tap
on a specific cell, initiate the cell to be in edit state.
Dialog editing
| To perform double tap
on a specific row, initiate the edit dialog to be opened.
Taskbar editing
| Taskbar editing action is initiated using the tap
action on the taskbar.
Parent taskbar : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.
Child taskbar : Once you tap the child taskbar, it will be changed to editing state.
Dragging taskbar : To drag a taskbar to the left or right in editing state.
Resizing taskbar : To resize a taskbar, drag the left/right resize icon.
Progress resizing : To change the progress, drag the progress resize icon to the left or right direction.
Task dependency editing
You can tap
the left/right connector point to initiate task dependencies
edit mode and again tap another taskbar to establish the dependency line between two taskbars.
The following table explains the taskbar state in dependency edit mode.
Taskbar state | Description |
---|---|
Parent taskbar |
You cannot create dependency relationship to parent tasks. |
Taskbar without dependency |
If you tap a valid child taskbar, it will create FS type dependency line between tasks, otherwise exits from task dependency edit mode. |
Taskbar with dependency |
If you tap the second taskbar, which has already been directly connected, it will ask to remove it. |
Removing dependency |
Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency. |
import { Gantt, Edit, Selection } from '@syncfusion/ej2-gantt';
Gantt.Inject(Edit, Selection);
let gantt: Gantt = new Gantt({
dataSource: [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 3, 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'),
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: 4,Predecessor:"6SS", Progress: 50 }
]
},
],
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
},
editSettings: {
allowTaskbarEditing: true
},
// Forcing desktop layout to change as mobile layout
load: function(){
this.isAdaptive = 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/27.1.48/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>
Note: In mobile device, you cannot create dependency other than
FS
by taskbar editing. By using cell/dialog editing, you can add all type of dependencies.
Taskbar editing tooltip
The taskbar editing tooltip can be customized using the tooltipSettings.editing
property. The following code example shows how to customize the taskbar editing tooltip in Gantt.
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,
allowTaskbarEditing: true
},
tooltipSettings: {
showTooltip: true,
editing: '#editingTooltip'
}
});
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/27.1.48/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>
<script type="text/x-jsrender" id="editingTooltip">
<div>Duration : ${duration}</div>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>