Row Spanning in ASP.NET MVC TreeGrid Component

19 Dec 20259 minutes to read

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.

@Html.EJS().TreeGrid("CellMerging").DataSource((IEnumerable<object>)ViewBag.Datasource).QueryCellInfo("QueryCellEvent").GridLines(Syncfusion.EJ2.TreeGrid.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("Time10AM").HeaderText("10.00 AM").Width("120").Add();
        col.Field("Time11AM").HeaderText("11.00 AM").Width("120").Add();
        col.Field("Time12PM").HeaderText("12.00 PM").Width("120").Add();
        col.Field("Time1PM").HeaderText("1.00 PM").Width("120").TextAlign(Syncfusion.EJ2.TreeGrid.TextAlign.Center).Add();
        col.Field("Time3PM").HeaderText("3.00 PM").Width("120").Add();
        col.Field("Time4PM").HeaderText("4.00 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 === 'Time1PM') {
                        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.

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Grids

@Html.EJS().TreeGrid("RowSpanning")
    .DataSource((IEnumerable<object>)ViewBag.datasource)
    .EnableHover(false)
    .AllowSelection(false)
    .GridLines(GridLine.Both)
    .EnableRowSpan(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,
                EnableRowSpan = 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,
                EnableRowSpan = false
            },
            new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate", Width = "140",
                HeaderText = "Actual Spend",
                Format="C2",
                TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
                EnableRowSpan = 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 row spanning:

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

See Also