Column Spanning in ASP.NET MVC TreeGrid Component
Column spanning in the TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the colSpan attribute in the queryCellInfo event, cells can be easily spanned and the appearance of the TreeGrid can be customized.
In the following example, Employee “Davolio” is scheduled for analysis from “9.00 AM” to “10.00 AM”, so those cells have been spanned.
@Html.EJS().TreeGrid("CellMerging").DataSource((IEnumerable<object>)ViewBag.Datasource).QueryCellInfo("QueryCellEvent").GridLines(GridLine.Both).Height("auto").Width("auto").Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.TreeGrid.TextAlign.Right).Width("150").Add();
col.Field("EmployeeName").HeaderText("Employee Name").Width("200").Add();
col.Field("Time9AM").HeaderText("9.00 AM").Width("120").Add();
col.Field("Time930AM").HeaderText("9.30 AM").Width("120").Add();
col.Field("Time10AM").HeaderText("10.00 AM").Width("120").Add();
col.Field("Time1030AM").HeaderText("10.30 AM").Width("120").Add();
col.Field("Time11AM").HeaderText("11.00 AM").Width("120").Add();
col.Field("Time1130AM").HeaderText("11.30 AM").Width("120").Add();
col.Field("Time12PM").HeaderText("12.00 PM").Width("120").Add();
col.Field("Time1230PM").HeaderText("12.30 PM").Width("120").Add();
col.Field("Time1PM").HeaderText("1.00 PM").Width("120").TextAlign(Syncfusion.EJ2.TreeGrid.TextAlign.Center).Add();
col.Field("Time2PM").HeaderText("2.00 PM").Width("120").Add();
col.Field("Time230PM").HeaderText("2.30 PM").Width("120").Add();
col.Field("Time3PM").HeaderText("3.00 PM").Width("120").Add();
col.Field("Time330PM").HeaderText("3.30 PM").Width("120").Add();
col.Field("Time4PM").HeaderText("4.00 PM").Width("120").Add();
col.Field("Time430PM").HeaderText("4.30 PM").Width("120").Add();
col.Field("Time5PM").HeaderText("5.00 PM").Width("120").Add();
}).ChildMapping("Children").TreeColumnIndex(1).Render()
<script>
function QueryCellEvent(args) {
var data = args.data;
switch (data.EmployeeID) {
case 10001:
if (args.column.field === 'Time9AM' || args.column.field === 'Time230PM' || args.column.field === 'Time430PM') {
args.colSpan = 2;
} else if (args.column.field === 'Time11AM') {
args.colSpan = 3;
}
break;
case 10002:
if (args.column.field === 'Time930AM' || args.column.field === 'Time230PM' || args.column.field === 'Time430PM') {
args.colSpan = 3;
} else if (args.column.field === 'Time11AM') {
args.colSpan = 4;
}
break;
case 10003:
if (args.column.field === 'Time9AM' || args.column.field === 'Time1130AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time1030AM' || args.column.field === 'Time330PM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM') {
args.colSpan = 2;
}
break;
case 10004:
if (args.column.field === 'Time9AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time11AM') {
args.colSpan = 4;
} else if (args.column.field === 'Time4PM' || args.column.field === 'Time230PM') {
args.colSpan = 2;
}
break;
case 10005:
if (args.column.field === 'Time9AM') {
args.colSpan = 4;
} else if (args.column.field === 'Time1130AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time330PM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM') {
args.colSpan = 2;
}
break;
case 10006:
if (args.column.field === 'Time9AM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM' || args.column.field === 'Time330PM') {
args.colSpan = 2;
} else if (args.column.field === 'Time10AM' || args.column.field === 'Time1130AM') {
args.colSpan = 3;
}
break;
case 10007:
if (args.column.field === 'Time9AM' || args.column.field === 'Time3PM' || args.column.field === 'Time1030AM') {
args.colSpan = 2;
} else if (args.column.field === 'Time1130AM' || args.column.field === 'Time4PM') {
args.colSpan = 3;
}
break;
case 10008:
if (args.column.field === 'Time9AM' || args.column.field === 'Time1030AM' || args.column.field === 'Time230AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time4AM') {
args.colSpan = 2;
}
break;
case 10009:
if (args.column.field === 'Time9AM' || args.column.field === 'Time1130AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time430AM' || args.column.field === 'Time230AM') {
args.colSpan = 2;
}
break;
case 100010:
if (args.column.field === 'Time9AM' || args.column.field === 'Time230AM' ||
args.column.field === 'Time4AM' || args.column.field === 'Time1130AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time1030AM') {
args.colSpan = 2;
}
break;
}
}
</script>public ActionResult ColumnMenu()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
return View();
}Column spanning via API
Column spanning in the TreeGrid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data. To enable column spanning, set the EnableColumnSpan property to “true” in the TreeGrid configuration.
In the following example, column spanning is applied to the “Status”, “Permit Status”, “Inspection Status”, and “Punch List Status” columns, while it is disabled for the “Planned Budget” and “Actual Spend” columns by setting the EnableColumnSpan property to “false” in the column level.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Grids
@Html.EJS().TreeGrid("RowSpanning")
.DataSource((IEnumerable<object>)ViewBag.datasource)
.EnableHover(false)
.AllowSelection(false)
.GridLines(GridLine.Both)
.EnableColumnSpan(true)
.PageSettings(p=>p.PageSizeMode(Syncfusion.EJ2.TreeGrid.PageSizeMode.All).PageSize(18))
.AllowPaging()
.ClipMode(ClipMode.EllipsisWithTooltip)
.Columns(col =>
{
col.Field("ActivityName").HeaderText("Phase Name").Width(250).Freeze(FreezeDirection.Left).Add();
col.HeaderText("Schedule").TextAlign(TextAlign.Center).Columns(
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "StartDate", Width = "140",
HeaderText = "Start Date",
Format="yMd",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "EndDate", Width = "140",
HeaderText = "End Date",
Format="yMd",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
},
}
).Add();
col.HeaderText("Work Status").TextAlign(TextAlign.Center).Columns(
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Status", Width = "140",
HeaderText = "Status",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
},
}).Add();
col.HeaderText("Compliance").TextAlign(TextAlign.Center).Columns(
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PermitStatus", Width = "120",
HeaderText = "Permit Status",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionDate", Width = "180",
HeaderText = "Inspection Date",
Format="yMd",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionStatus", Width = "180",
HeaderText = "Inspection Status",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PunchListStatus", Width = "150",
HeaderText = "Punch List Status",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
},
}).Add();
col.HeaderText("Personnel").TextAlign(TextAlign.Center).Columns(
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Supervisor", Width = "180",
HeaderText = "Supervisor",
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Team", Width = "200",
HeaderText = "Crew",
},
}).Add();
col.HeaderText("Materials").TextAlign(TextAlign.Center).Columns(
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialUsed", Width = "180",
HeaderText = "Material Used",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialCost", Width = "140",
HeaderText = "Material Cost",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
EnableColumnSpan = false
},
}).Add();
col.HeaderText("Cost Summary").TextAlign(TextAlign.Center).Columns(
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "TotalBudget", Width = "140",
HeaderText = "Planned Budget",
Format="C2",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
EnableColumnSpan = false
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate", Width = "140",
HeaderText = "Actual Spend",
Format="C2",
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
EnableColumnSpan = false
},
}).Add();
})
.Height(400)
.ChildMapping("Children")
.TreeColumnIndex(0)
.Render()public ActionResult ColumnMenu()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
return View();
}Limitations
The following list outlines the features that are not compatible with column spanning:
- Virtualization
- Infinite Scrolling
- Row Drag and Drop
- Column Virtualization
- Detail Template
- Editing
- Export