Column Spanning in ASP.NET MVC Grid Component

16 Feb 20248 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 testing from 9.00 A.M. to 10.00 A.M. so that the cells have been spanned.

CSHTML

@Html.EJS().Grid("CellMerging").DataSource((IEnumerable<object>)ViewBag.Datasource).QueryCellInfo("QueryCellEvent").GridLines(Syncfusion.EJ2.Grids.GridLine.Both).Columns(col =>
{
    col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add();
    col.Field("EmployeeName").HeaderText("Employee Name").Width("200").Add();
    col.Field("Time900").HeaderText("9.00 AM").Width("120").Add();
    col.Field("Time930").HeaderText("9.30 AM").Width("120").Add();
    col.Field("Time1000").HeaderText("10.00 AM").Width("120").Add();
    col.Field("Time1030").HeaderText("10.30 AM").Width("120").Add();
    col.Field("Time1100").HeaderText("11.00 AM").Width("120").Add();
    col.Field("Time1130").HeaderText("11.30 AM").Width("120").Add();
    col.Field("Time1200").HeaderText("12.00 PM").Width("120").Add();
    col.Field("Time1230").HeaderText("12.30 PM").Width("120").Add();
    col.Field("Time100").HeaderText("1.00 PM").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("Time200").HeaderText("2.00 PM").Width("120").Add();
    col.Field("Time230").HeaderText("2.30 PM").Width("120").Add();
    col.Field("Time300").HeaderText("3.00 PM").Width("120").Add();
    col.Field("Time330").HeaderText("3.30 PM").Width("120").Add();
    col.Field("Time400").HeaderText("4.00 PM").Width("120").Add();
    col.Field("Time430").HeaderText("4.30 PM").Width("120").Add();
    col.Field("Time500").HeaderText("5.00 PM").Width("120").Add();
}).Render()

<script>

function QueryCellEvent(args)
{
    var data = args.data;
    switch (data.EmployeeID) {
        case 10001:
            if (args.column.field === 'Time900' || args.column.field === 'Time230' || args.column.field === 'Time430') {
                args.colSpan = 2;
            } else if (args.column.field === 'Time1100') {
                args.colSpan = 3;
            }
            break;
        case 10002:
            if (args.column.field === 'Time930' || args.column.field === 'Time230' ||
                args.column.field === 'Time430') {
                args.colSpan = 3;
            } else if (args.column.field === 'Time1100') {
                args.colSpan = 4;
            }
            break;
        case 10003:
            if (args.column.field === 'Time900' || args.column.field === 'Time1130') {
                args.colSpan = 3;
            } else if (args.column.field === 'Time1030' || args.column.field === 'Time330' ||
                args.column.field === 'Time430' || args.column.field === 'Time230') {
                args.colSpan = 2;
            }
            break;
        case 10004:
            if (args.column.field === 'Time900') {
                args.colSpan = 3;
            } else if (args.column.field === 'Time1100') {
                args.colSpan = 4;
            } else if (args.column.field === 'Time400' || args.column.field === 'Time230') {
                args.colSpan = 2;
            }
            break;
        case 10005:
            if (args.column.field === 'Time900') {
                args.colSpan = 4;
            } else if (args.column.field === 'Time1130') {
                args.colSpan = 3;
            } else if (args.column.field === 'Time330' || args.column.field === 'Time430' || args.column.field === 'Time230') {
                args.colSpan = 2;
            }
            break;
        case 10006:
            if (args.column.field === 'Time900' || args.column.field === 'Time430' ||
                args.column.field === 'Time230' || args.column.field === 'Time330') {
                args.colSpan = 2;
            } else if (args.column.field === 'Time1000' || args.column.field === 'Time1130') {
                args.colSpan = 3;
            }
            break;
        case 10007:
            if (args.column.field === 'Time900' || args.column.field === 'Time300' || args.column.field === 'Time1030') {
                args.colSpan = 2;
            } else if (args.column.field === 'Time1130' || args.column.field === 'Time400') {
                args.colSpan = 3;
            }
            break;
    }
}
</script>

Columnspanning.cs

public IActionResult Index()
{
    ViewBag.DataSource = Merge.GetAllRecords()
    return View();
}

Limitations

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