Row Spanning in ASP.NET Core TreeGrid Component

Row spanning in the TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the rowSpan attribute in the queryCellInfo event, cells can be easily spanned and the appearance of the TreeGrid can be customized.

In the following demo, the “Lunch Break” cell spans multiple rows in the “1:00 PM” column.

<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="9:00" headerText="9:00 AM" width="120"></e-treegrid-column>
        <e-treegrid-column field="10:00" headerText="10:00 AM" width="120"></e-treegrid-column>
        <e-treegrid-column field="11:00" headerText="11:00 AM" width="120"></e-treegrid-column>
        <e-treegrid-column field="12:00" headerText="12:00 AM" width="120"></e-treegrid-column>
        <e-treegrid-column field="1:00" headerText="1:00 PM" width="120"></e-treegrid-column>
        <e-treegrid-column field="3:00" headerText="3:00 PM" width="120"></e-treegrid-column>
        <e-treegrid-column field="4:00" headerText="4:00 PM" width="120"></e-treegrid-column>
        <e-treegrid-column field="5:00" 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 === '1:00') {
                        args.rowSpan = 10;
                    }
                    break;
            }
        }
</script>
public ActionResult ColumnMenu()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();
}

Row spanning via API

Row spanning in the TreeGrid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a cleaner layout by eliminating repetitive data.To enable row spanning, set the enableRowSpan property to “true” in the TreeGrid configuration.

In the following example, row 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 EnableRowSpan 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" enableRowSpan="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, EnableRowSpan = "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, EnableRowSpan = "false" },
                                                                                                                                        new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate",  HeaderText = "Actual Spend",Width = "140",Format="C2", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, EnableRowSpan = "false" }} )">
        </e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public ActionResult ColumnMenu()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();
}

Limitations

The following list outlines the features that are not compatible with row spanning:

  • Virtualization
  • Infinite Scrolling
  • Row Drag and Drop
  • Column Virtualization
  • Detail Template
  • Editing
  • Export

See Also