Column spanning in EJ2 TypeScript Grid control

17 Feb 202424 minutes to read

The column spanning feature in the Syncfusion Grid allows you to merge adjacent cells horizontally, creating a visually appealing and informative layout. By defining the colSpan attribute in the queryCellInfo event, you can easily span cells and customize the appearance of the grid.

In the following demo, Employee Davolio doing analysis from 9.00 AM to 10.00 AM, so that cells have spanned.

index.ts
index.html
import { Grid,  QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { columnSpanData, ColumnSpanDataType  } from './datasource.ts';

let grid: Grid = new Grid({
    dataSource: columnSpanData,
    queryCellInfo: QueryCellEvent,
    gridLines: 'Both',
    columns: [
        { field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 150 },
        { field: 'EmployeeName', headerText: 'Employee Name', width: 200 },
        { field: '9:00', headerText: '9.00 AM', width: 120 },
        { field: '9:30', headerText: '9.30 AM', width: 120 },
        { field: '10:00', headerText: '10.00 AM', width: 120 },
        { field: '10:30', headerText: '10.30 AM', width: 120 },
        { field: '11:00', headerText: '11.00 AM', width: 120 },
        { field: '11:30', headerText: '11.30 AM', width: 120 },
        { field: '12:00', headerText: '12.00 PM', width: 120 },
        { field: '12:30', headerText: '12.30 PM', width: 120 },
        { 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: 120 },
        { field: '4:30', headerText: '4.30 PM', width: 120 },
        { field: '5:00', headerText: '5.00 PM', width: 120 }
    ],
    width: 'auto',
    height: 'auto',
    allowTextWrap: true
});
grid.appendTo('#Grid');

function QueryCellEvent(args: QueryCellInfoEventArgs): void {
    let data: ColumnSpanDataType = args.data as ColumnSpanDataType;
    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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/material.css" rel="stylesheet" />
    <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='Grid'></div>        
    </div>
</body>
</html>

Change the border color while column spanning

You can change the border color for the spanned cells by the using queryCellInfo event. This event triggers before the cell element is appended to the Grid element.

index.ts
index.html
import { Grid, QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { columnSpanData, ColumnSpanDataType  } from './datasource.ts';

let grid: Grid = new Grid({
    dataSource: columnSpanData,
    queryCellInfo: QueryCellEvent,
    gridLines: 'Both',
    columns: [
        { field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 150 },
        { field: 'EmployeeName', headerText: 'Employee Name', width: 200 },
        { field: '9:00', headerText: '9.00 AM', width: 120 },
        { field: '9:30', headerText: '9.30 AM', width: 120 },
        { field: '10:00', headerText: '10.00 AM', width: 120 },
        { field: '10:30', headerText: '10.30 AM', width: 120 },
        { field: '11:00', headerText: '11.00 AM', width: 120 },
        { field: '11:30', headerText: '11.30 AM', width: 120 },
        { field: '12:00', headerText: '12.00 PM', width: 120 },
        { field: '12:30', headerText: '12.30 PM', width: 120 },
        { 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: 120 },
        { field: '4:30', headerText: '4.30 PM', width: 120 },
        { field: '5:00', headerText: '5.00 PM', width: 120 }
    ],
    width: 'auto',
    height: 'auto',
    allowTextWrap: true
});
grid.appendTo('#Grid');

function QueryCellEvent(args: QueryCellInfoEventArgs): void {
    let data: ColumnSpanDataType = args.data as ColumnSpanDataType;
    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;
      default:
        extendQueryCellEvent(args, data.EmployeeID);
    }
    if (args.colSpan > 1) {
      (args.cell as HTMLElement).style.border = '1px solid red';
    }
  }
  
  function extendQueryCellEvent(
    args: QueryCellInfoEventArgs,
    value: number
  ): void {
    switch (value) {
      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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/material.css" rel="stylesheet" />
    <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='Grid'></div>        
    </div>
</body>
</html>

Limitations

Column spanning is not compatible with the following features:
1. Virtual scrolling
2. Infinite scrolling
3. Grouping
4. Autofill