Having trouble getting help?
Contact Support
Contact Support
Column spanning in EJ2 TypeScript Gantt control
2 May 20237 minutes to read
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/29.1.33/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>