The column displays information from a bound data source, and you can edit the values of column to update the task details through TreeGrid. The operations such as sorting, filtering, and searching can be performed based on column definitions. To display a Gantt column, the field
property should be mapped from the data source to the column.
If the column
field
is not specified in the data source, the column values will be empty.
The treeColumnIndex
property is used to define the expander column in the Gantt control to expand and collapse the child rows.
Using the columns
property, you can define the columns in Gantt. If the columns are not defined, then the default columns will be rendered based on the mapped data source fields in the taskFields
property. Refer to the following code example for defining the columns in Gantt along with their widths.
import { Gantt } from '@syncfusion/ej2-gantt';
let GanttData: Object[] = [
{
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: 4, 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, 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: 3, Progress: 50 }
]
},
];
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
height: '450px',
splitterSettings: {
columnIndex: 2
},
columns: [
{ field: 'TaskID', width: '150' },
{ field: 'TaskName', width: '250' }
]
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
The column header text can be defined using the headerText
property, and you can customize the column headers using the headerTemplate
property.
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
height: '450px',
splitterSettings: {
columnIndex: 4
},
columns: [
{ field: 'TaskName', headerTemplate: '#projectName', width: '150' },
{ field: 'StartDate', headerTemplate: '#dateTemplate', width: '150' },
{ field: 'Duration', headerTemplate: '#durationTemplate', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerTemplate: '#progressTemplate', headerText: 'Progress', width: '150' },
]
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
<script type="text/x-template" id="projectName">
<div>
<div>
<img src="taskname.png" width="20" height="20" class="e-image" /> Task Name
</div>
</div>
</script>
<script type="text/x-template" id="dateTemplate">
<div>
<div>
<img src="startdate.png" width="20" height="20" class="e-image" /> Start Date
</div>
</div>
</script>
<script type="text/x-template" id="durationTemplate">
<div>
<div>
<img src="duration.png" width="20" height="20" class="e-image" /> Duration
</div>
</div>
</script>
<script type="text/x-template" id="progressTemplate">
<div>
<div>
<img src="progress.png" width="20" height="20" class="e-image" /> Progress
</div>
</div>
</script>
</body></html>
To format the cell values based on a specific culture, use the columns.format
property. The Gantt control uses the Internationalization
library to format number
and date
values.
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings: {
columnIndex: 3
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'Progress', headerText: 'Progress', width: '150', format: 'C' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' }
]
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
By default, the number and date values are formatted in
en-US
culture.
The number or integer values can be formatted using the following format strings.
Format | Description |
---|---|
N | Denotes numeric type. |
C | Denotes currency type. |
P | Denotes percentage type |
You can format date values either using the built-in date format string or a custom format string.
For the built-in date format, you can specify the columns.format
property as string (example: yMd
).
You can also use the custom format string to format the date values. Some of the custom formats and the formatted date values are given in the following table.
Format | Formatted value |
---|---|
{ type:‘date’, format:‘dd/MM/yyyy’ } | 04/07/2019 |
{ type:‘date’, format:‘dd.MM.yyyy’ } | 04.07.2019 |
{ type:‘date’, skeleton:‘short’ } | 7/4/19 |
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ } | 04/07/2019 12:00 AM |
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ } | 07/04/2019 12:00:00 AM |
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings: {
columnIndex: 3
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150', format: 'C' },
{ field: 'StartDate', headerText: 'Start Date', width: '150', format: { format: 'dd/MM/yyyy', type: 'date' } },
{ field: 'Duration', headerText: 'Duration', width: '150' }
]
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
The column reordering can be done by dragging a column header from one index to another index within the TreeGrid. To enable reordering, set the allowReordering
property to true.
To use the column reordering feature, inject the Reorder
module to the Gantt control.
import { Gantt, Reorder } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Reorder);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
allowReordering: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
height: '450px',
splitterSettings: {
columnIndex: 5
}
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
You can disable the reordering of a particular column by setting the
columns.allowReordering
property tofalse
.
Multiple columns can be reordered at a time by using the reorderColumns
method.
import { Gantt, Reorder } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Reorder);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
allowReordering: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
height: '450px',
splitterSettings: {
position: '100%'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
]
});
gantt.appendTo('#Gantt');
let reorderMultipleCols: Button = new Button();
reorderMultipleCols.appendTo('#reorderMultipleCols');
document.getElementById('reorderMultipleCols').addEventListener('click', () => {
gantt.reorderColumns('TaskName', 'Progress');
});
<!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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id="reorderMultipleCols">Reorder Task ID and Task Name to Last</button>
<div id='Gantt'></div>
</div>
</body>
</html>
During the reorder action, the gantt component triggers the below three events.
columnDragStart
event triggers when column header element drag (move) starts.columnDrag
event triggers when column header element is dragged (moved) continuously.columnDrop
event triggers when a column header element is dropped on the target column.import { Gantt, Reorder } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Reorder);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
allowReordering: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings: {
columnIndex: 4
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
],
columnDragStart: () => {
alert('columnDragStart event is Triggered');
},
columnDrag: () => {
alert('columnDrag event is Triggered');
},
columnDrop: () => {
alert('columnDrop event is Triggered');
}
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
The column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To resize the column, set the allowResizing
property to true. The following code example shows how to enable the column resize feature in the Gantt control.
To resize the column, inject the Resize
module into the Gantt control.
import { Gantt, Resize } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Resize);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
allowResizing: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings: {
columnIndex: 4
},
height: '450px'
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
You can disable resizing for a particular column by setting the
columns.allowResizing
tofalse
.
The column resizing can be restricted between minimum and maximum widths by defining the columns->minWidth
and columns->maxWidth
properties.
In the following example, the minimum and maximum widths are defined for the Duration
, and Task Name
columns.
import { Gantt, Resize } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Resize);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
allowResizing: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings: {
columnIndex: 5
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '200', minWidth: '150', maxWidth: '250', },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '100', minWidth: '50', maxWidth: '200' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
]
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
A column template is used to customize the column’s look. The following code example explains how to define the custom template in Gantt using the template
property.
import { Gantt } from '@syncfusion/ej2-gantt';
let ProjectResources: Object[] = [
{ resourceId: 1, resourceName: 'Martin Tamer' },
{ resourceId: 2, resourceName: 'Rose Fuller' },
{ resourceId: 3, resourceName: 'Margaret Buchanan' },
{ resourceId: 4, resourceName: 'Fuller King' },
{ resourceId: 5, resourceName: 'Davolio Fuller' },
{ resourceId: 6, resourceName: 'Van Jack' },
{ resourceId: 7, resourceName: 'Fuller Buchanan' },
{ resourceId: 8, resourceName: 'Jack Davolio' },
{ resourceId: 9, resourceName: 'Tamer Vinet' },
{ resourceId: 10, resourceName: 'Vinet Fuller' },
{ resourceId: 11, resourceName: 'Bergs Anton' },
{ resourceId: 12, resourceName: 'Construction Supervisor' }
];
let GanttData: Object[] = [
{
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: 4,Progress: 50, resources: [1]},
{TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',Progress: 50, resources: [2]},
{TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '3', Progress: 50 ,resources: [3]},
]
},
{
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, Predecessor: '4', Progress: 50, resources: [4]},
{TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),Duration: 3, Predecessor: '6', resources: [3],Progress: 50},
{TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),Duration: 3, Predecessor: '7',
}
]
}];
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
rowHeight: 50,
splitterSettings: {
columnIndex: 3
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'resources', headerText: 'Resources', width: '250', template: '#columnTemplate' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
resourceFields: {
id: 'resourceId',
name: 'resourceName',
},
resources: ProjectResources
});
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/20.1.57/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>
</head>
<body>
<script type="text/x-jsrender" id="columnTemplate">
${if(ganttProperties.resourceNames)}
<div class="image">
<img src="${TaskID}.png" style="height:40px;width:40px" /><div style="display:inline-block;width:100%;position:relative;left:30px;top:-14px">${ganttProperties.resourceNames}</div>
</div>
${/if}
</script>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click the Multiple icon of the column. To enable the column menu, you should set the showColumnMenu
property to true.
The default items are displayed in the following table:
Item | Description |
---|---|
SortAscending |
Sort the current column in ascending order. |
SortDescending |
Sort the current column in descending order. |
AutoFit |
Auto fit the current column. |
AutoFitAll |
Auto fit all columns. |
Filter |
Show the filter option as given in the filterSettings.type property. |
import { Gantt, Filter, Sort, Resize, ColumnMenu } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Filter, Sort, Resize, ColumnMenu);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
showColumnMenu: true,
allowFiltering: true,
allowResizing: true,
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
splitterSettings: {
position: '100%'
},
height: '450px'
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
You can disable the column menu for a particular column by setting the
columns.showColumnMenu
tofalse
.
During the resizing action, the gantt component triggers the below two events.
columnMenuOpen
event triggers before the column menu opens.columnMenuClick
event triggers when the user clicks the column menu of the gantt.import { Gantt, Filter, Sort, Resize, ColumnMenu } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Filter, Sort, Resize, ColumnMenu);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
showColumnMenu: true,
allowFiltering: true,
allowResizing: true,
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
splitterSettings: {
position: '100%'
},
height: '450px',
columnMenuOpen: () => {
alert('columnMenuOpen event is Triggered');
},
columnMenuClick: () => {
alert('columnMenuClick event is Triggered');
}
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
Custom column menu items can be added by defining the columnMenuItems
.
Actions for this customized items can be defined in the columnMenuClick
event.
import { Gantt, Filter, Sort, Resize, ColumnMenu } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
Gantt.Inject(Filter, Sort, Resize, ColumnMenu);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
showColumnMenu: true,
allowFiltering: true,
allowResizing: true,
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
columnMenuItems:[{text:'Clear Sorting', id:'ganttclearsorting'}],
columnMenuClick: function(args: MenuEventArgs){
if(args.item.id === 'ganttclearsorting'){
gantt.clearSorting();
}
},
sortSettings:{
columns:[{direction: "Ascending", field: "TaskName"}]
},
splitterSettings: {
position: '75%'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID'},
{ field: 'TaskName', headerText: 'Task Name' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '100' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
],
height: '450px'
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the columnMenuOpenEventArgs.hide
as true in the columnMenuOpen
event.
The following sample, Filter item was hidden in column menu when opens for the Task Name column.
import { Gantt, Filter, Sort, Resize, ColumnMenu } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
import { ColumnMenuOpenEventArgs, ColumnMenuItemModel } from '@syncfusion/ej2-grids';
Gantt.Inject(Filter, Sort, Resize, ColumnMenu);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
showColumnMenu: true,
allowFiltering: true,
allowResizing: true,
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
splitterSettings: {
position: '100%'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID'},
{ field: 'TaskName', headerText: 'Task Name' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '100' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
],
height: '450px',
columnMenuOpen: function (args: ColumnMenuOpenEventArgs) {
for (let item of args.items) {
if (item.text === 'Filter' && args.column.field === 'TaskName') {
(item as ColumnMenuItemModel).hide = true;
} else {
(item as ColumnMenuItemModel).hide = 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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
You can toggle the column visibility based on media queries, which are defined in the hideAtMedia
. The hideAtMedia
accepts valid Media Queries.
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings: {
position: '75%'
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '200', hideAtMedia: '(min-width: 700px)' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '100', hideAtMedia: '(max-width: 500px)' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
]
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
The tree/expander column is a column in the Gantt control, that has icons to expand or collapse the parent records. You can define the tree column index in the Gantt control by using the treeColumnIndex
property and the default value of this property is 0
. The following code example shows how to use this property.
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings: {
columnIndex: 3
},
height: '450px',
treeColumnIndex: 2
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body></html>
You can show or hide gantt columns dynamically using external buttons by invoking the showColumn
or hideColumn
method.
import { Gantt, Edit, Selection } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit, Selection);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings: {
position: '75%'
},
editSettings: {
allowEditing: true
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{ field: 'Progress', headerText: 'Progress' },
{ field: 'TaskName', headerText: 'Task Name' },
{ field: 'StartDate', headerText: 'Start Date' },
{ field: 'Duration', headerText: 'Duration' }
]
});
gantt.appendTo('#Gantt');
let show: Button = new Button();
show.appendTo('#show');
let hide: Button = new Button();
hide.appendTo('#hide');
document.getElementById('show').addEventListener('click', () => {
gantt.showColumn(['TaskName', 'Duration']);
});
document.getElementById('hide').addEventListener('click', () => {
gantt.hideColumn(['TaskName', 'Duration']);
});
<!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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id="show">Show</button>
<button id="hide">Hide</button>
<div id='Gantt'></div>
</div>
</body>
</html>
To render boolean values as checkbox in columns, you need to set displayAsCheckBox
property as true.
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
verified: 'verified'
},
splitterSettings: {
columnIndex: 5
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{ field: 'Progress', headerText: 'Progress' },
{ field: 'TaskName', headerText: 'Task Name' },
{ field: 'StartDate', headerText: 'Start Date' },
{ field: 'verified', headerText: 'Verified', displayAsCheckBox: true, type: 'boolean' },
{ field: 'Duration', headerText: 'Duration' }
]
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
You can enable or disable gantt action for a particular column by setting the allowFiltering
, allowSorting
, allowReordering
, and allowEditing
properties.
import { Gantt, Filter, Sort, Resize, ColumnMenu, Reorder, Selection, Edit } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit, Selection, Filter, Sort, Resize, Reorder);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
allowFiltering: true,
allowSorting: true,
allowReordering: true,
splitterSettings: {
position: '75%'
},
editSettings: {
allowEditing: true
},
height: '450px',
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{ field: 'Progress', headerText: 'Progress', allowReordering: false },
{ field: 'TaskName', headerText: 'Task Name', allowSorting: false },
{ field: 'StartDate', headerText: 'Start Date', allowEditing: false },
{ field: 'Duration', headerText: 'Duration', allowFiltering: 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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>
Column type can be specified using the columns.type
property. It specifies the type of data the column binds.
If the format
is defined for a column, the column uses type
to select the appropriate format option number or date.
Gantt column supports the following types:
If the
type
is not defined, it will be determined from the first record of thedataSource
. In case if the first record of thedataSource
is null/blank value for a column then it is necessary to define thetype
for that column.
The gantt has option to span the adjacent cells. You need to define the colSpan
attribute to span cells in the QueryCellInfo
event.
In the following demo, Work 1 cells have been spanned.
import { Gantt, Edit, Selection, QueryCellInfoEventArgs } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Edit, Selection);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
gridLines: 'Both',
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
work1: 'work1',
work2: 'work2',
progress: 'Progress',
child: 'subtasks'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{ field: 'TaskName', headerText: 'Task Name' },
{ field: 'work1', headerText: 'Work 1' },
{ field: 'work2', headerText: 'Work 2' },
{ field: 'StartDate', headerText: 'Start Date' },
{ field: 'Duration', headerText: 'Duration' },
{ field: 'Progress', headerText: 'Progress'}
],
splitterSettings: {
columnIndex: 5
},
queryCellInfo: function (args: QueryCellInfoEventArgs) {
switch(args.data.TaskID) {
case 1:
if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
args.colSpan = 2;
}
break;
case 2:
if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
args.colSpan = 2;
}
break;
case 3:
if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
args.colSpan = 2;
}
break;
case 4:
if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
args.colSpan = 2;
}
break;
case 5 :
if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
args.colSpan = 2;
}
break;
case 7:
if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
args.colSpan = 2;
}
break;
}
}
});
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/20.1.57/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>