Column spanning in EJ2 JavaScript Grid control
13 Apr 202316 minutes to read
The grid 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, employee Davolio is doing analysis from 9.00 A.M. to 10.00 A.M. so that the cells have been spanned.
var grid = new ej.grids.Grid({
dataSource: columnSpanData,
queryCellInfo: QueryCellEvent,
gridLines: 'Both',
columns: [
{ field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 120 },
{ field: 'EmployeeName', headerText: 'Employee Name', width: 200 },
{ field: '9:00', headerText: '9.00 AM', width: 100 },
{ field: '9:30', headerText: '9.30 AM', width: 100 },
{ field: '10:00', headerText: '10.00 AM', width: 100 },
{ field: '10:30', headerText: '10.30 AM', width: 100 },
{ field: '11:00', headerText: '11.00 AM', width: 100 },
{ field: '11:30', headerText: '11.30 AM', width: 100 },
{ field: '12:00', headerText: '12.00 PM', width: 100 },
{ field: '12:30', headerText: '12.30 PM', width: 100 },
{ field: '2:30', headerText: '2.30 PM', width: 120 },
{ field: '3:00', headerText: '3.00 PM', width: 120 },
{ field: '3:30', headerText: '3.30 PM', width: 120 },
{ field: '4:00', headerText: '4.00 PM', width: 100 },
{ field: '4:30', headerText: '4.30 PM', width: 100 },
{ field: '5:00', headerText: '5.00 PM', width: 100 }
],
width: 'auto',
height: 'auto',
allowTextWrap: true
});
grid.appendTo('#Grid');
function QueryCellEvent(args) {
var data = args.data;
switch (data.EmployeeID) {
case 10001:
if (args.column.field === '9:00' || args.column.field === '2:30' || args.column.field === '4:30') {
args.colSpan = 2;
} else if (args.column.field === '11:00') {
args.colSpan = 3;
}
break;
case 10002:
if (args.column.field === '9:30' || args.column.field === '2:30' ||
args.column.field === '4:30') {
args.colSpan = 3;
} else if (args.column.field === '11:00') {
args.colSpan = 4;
}
break;
case 10003:
if (args.column.field === '9:00' || args.column.field === '11:30') {
args.colSpan = 3;
} else if (args.column.field === '10:30' || args.column.field === '3:30' ||
args.column.field === '4:30' || args.column.field === '2:30') {
args.colSpan = 2;
}
break;
case 10004:
if (args.column.field === '9:00') {
args.colSpan = 3;
} else if (args.column.field === '11:00') {
args.colSpan = 4;
} else if (args.column.field === '4:00' || args.column.field === '2:30') {
args.colSpan = 2;
}
break;
case 10005:
if (args.column.field === '9:00') {
args.colSpan = 4;
} else if (args.column.field === '11:30') {
args.colSpan = 3;
} else if (args.column.field === '3:30' || args.column.field === '4:30' || args.column.field === '2:30') {
args.colSpan = 2;
}
break;
case 10006:
if (args.column.field === '9:00' || args.column.field === '4:30' ||
args.column.field === '2:30' || args.column.field === '3:30') {
args.colSpan = 2;
} else if (args.column.field === '10:00' || args.column.field === '11:30') {
args.colSpan = 3;
}
break;
case 10007:
if (args.column.field === '9:00' || args.column.field === '3:00' || args.column.field === '10:30') {
args.colSpan = 2;
} else if (args.column.field === '11:30' || args.column.field === '4:00') {
args.colSpan = 3;
}
break;
case 10008:
if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '2:30') {
args.colSpan = 3;
} else if (args.column.field === '4:00') {
args.colSpan = 2;
}
break;
case 10009:
if (args.column.field === '9:00' || args.column.field === '11:30') {
args.colSpan = 3;
} else if (args.column.field === '4:30' || args.column.field === '2:30') {
args.colSpan = 2;
}
break;
case 100010:
if (args.column.field === '9:00' || args.column.field === '2:30' ||
args.column.field === '4:00' || args.column.field === '11:30') {
args.colSpan = 3;
} else if (args.column.field === '10:30') {
args.colSpan = 2;
}
break;
}
}<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.1.36/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="Grid"></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>