Column Spanning in ASP.NET CORE TreeGrid Component
19 Dec 202523 minutes to read
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.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" queryCellInfo="queryCellEvent" gridLines="Both" width= 'auto', height= 'auto' childMapping="subtasks" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true" textAlign="Right" width="150"></e-treegrid-column>
<e-treegrid-column field="EmployeeName" headerText="Employee Name" width="200"></e-treegrid-column>
<e-treegrid-column field="Time9AM" headerText="9.00 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time930AM" headerText="9.30 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time10AM" headerText="10.00 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time1030AM" headerText="10.30 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time11AM" headerText="11.00 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time1130AM" headerText="11.30 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time12PM" headerText="12.00 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time1230PM" headerText="12.30 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time230PM" headerText="2.30 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time3PM" headerText="3.00 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time330PM" headerText="3.30 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time4PM" headerText="4.00 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time430PM" headerText="4.30 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time5PM" headerText="5.00 PM" width="120"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<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 IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
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.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" height="450px" width="auto" treegridLines="Both" allowSorting="true" enableHover="false" allowSelection="false" enableColumnSpan="true" childMapping="Children" treeColumnIndex="0">
<e-treegrid-pagesettings pageSizeMode="All" pageSize="18"></e-treegrid-pagesettings>
<e-treegrid-columns>
<e-treegrid-column field="ActivityName" headerText="Phase Name" freeze="Left" width="250"></e-treegrid-column>
<e-treegrid-column headerText="Schedule" 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", HeaderText = "End Date",Width = "140",Format="yMd", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Work Status" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Status", Width = "160", HeaderText = "Status", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Compliance" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PermitStatus", Width = "150", HeaderText = "Permit Status", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionDate", HeaderText = "Inspection Date", Format="yMd", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionStatus", HeaderText = "Inspection Status", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PunchListStatus", HeaderText = "PunchList Status", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Personnel" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Supervisor", Width = "180", HeaderText = "Supervisor", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Team", HeaderText = "Crew",Width = "200", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Materials" 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", HeaderText = "Material Cost",Width = "160", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, EnableColumnSpan = "false" }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Cost Summary" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "TotalBudget", Width = "140", Format="C2" ,HeaderText = "Planned Budget", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, EnableColumnSpan = "false" },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate", HeaderText = "Actual Spend",Width = "140",Format="C2", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, EnableColumnSpan = "false" }} )">
</e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
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