Columns in EJ2 JavaScript Gantt control
24 Jan 202424 minutes to read
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.
Defining columns
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.
var GanttData = [
{
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 }
]
},
];
var ganttChart = new ej.gantt.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' }
]
});
ganttChart.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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Custom column header
The column header text can be defined using the headerText
property, and you can customize the column headers using the headerTemplate
property.
var ganttChart = new ej.gantt.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' },
],
});
ganttChart.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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></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>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Format
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.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
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: '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' }
]
});
ganttChart.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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
By default, the number and date values are formatted in
en-US
culture.
Number formatting
The number or integer values can be formatted using the following format strings.
Format | Description | Remarks |
---|---|---|
N | Denotes numeric type. | The numeric format is followed by an integer value like N2 or N3, which denotes the number of precisions to be allowed. |
C | Denotes currency type. | The currency format is followed by an integer value like C2 or C3, which denotes the number of precisions to be allowed. |
P | Denotes percentage type | The percentage format expects the input value to be in the range of 0 to 100. For example, the cell value 0.2 is formatted as 20% . The percentage format is followed by an integer value like P2, P3, which denotes the number of precisions to be allowed. |
Date formatting
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 |
var ganttChart = new ej.gantt.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' }
]
});
ganttChart.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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Change tree/expander column
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.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
splitterSettings:{
columnIndex:3
},
height:'450px',
treeColumnIndex:2
});
ganttChart.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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Show or Hide columns dynamically
You can show or hide gantt columns dynamically using external buttons by invoking the showColumn
or hideColumn
method.
ej.gantt.Gantt.Inject(ej.gantt.Toolbar,ej.gantt.Edit);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings: {
allowEditing: true
},
splitterSettings: {
position: '75%'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID' },
{ field: 'Progress', headerText: 'Progress' },
{ field: 'TaskName', headerText: 'Task Name' },
{ field: 'StartDate', headerText: 'Start Date' },
{ field: 'Duration', headerText: 'Duration' }
]
});
var show= new ej.buttons.Button();
show.appendTo('#show');
var hide= new ej.buttons.Button();
hide.appendTo('#hide');
document.getElementById('show').addEventListener('click', function() {
ganttChart.showColumn(['TaskName', 'Duration']);
});
document.getElementById('hide').addEventListener('click', function() {
ganttChart.hideColumn(['TaskName', 'Duration']);
});
ganttChart.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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Controlling Gantt column actions
You can enable or disable gantt action for a particular column by setting the allowFiltering
, allowSorting
, allowReordering
, and allowEditing
properties.
ej.gantt.Gantt.Inject(ej.gantt.Toolbar,ej.gantt.Edit);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height:'450px',
allowFiltering: true,
allowSorting: true,
allowReordering: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
editSettings: {
allowEditing: true
},
splitterSettings: {
position: '75%'
},
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 }
]
});
ganttChart.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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Column type
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:
- string
- number
- boolean
- date
- date time
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.