Row spanning in EJ2 JavaScript TreeGrid control

6 Feb 202615 minutes to read

The row spanning feature in the Syncfusion® 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.

var treeGridObj = new ej.treegrid.TreeGrid({
   dataSource: rowSpanData,
    queryCellInfo: QueryCellEvent,
    gridLines: 'Both',
    treeColumnIndex: 1,
    childMapping: 'subtasks',
    columns: [
        { field: 'EmployeeID', headerText: 'Employee ID', isPrimaryKey: true, textAlign: 'Right', width: 120 },
        { field: 'EmployeeName', headerText: 'Employee Name', width: 150 },
        { field: '9:00', headerText: '9.00 AM', width: 120 },
        { field: '10:00', headerText: '10.00 AM', width: 120 },
        { field: '11:00', headerText: '11.00 AM', width: 120 },
        { field: '12:00', headerText: '12.00 PM', width: 120 },
        { field: '1:00', headerText: '1.00 PM', width: 120 },
        { field: '3:00', headerText: '3.00 PM', width: 120 },
        { field: '4:00', headerText: '4.00 PM', width: 120 },
        { field: '5:00', headerText: '5.00 PM', width: 120 }
    ],
    width: 'auto',
    height: 'auto',
    allowTextWrap: false
});
treeGridObj.appendTo('#TreeGrid');

function QueryCellEvent(args) {
    let data = args.data;
    switch (data.EmployeeID) {
        case 10001:
            if (args.column.field === '1:00') {
                args.rowSpan = 10;
            }
            break;
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-treegrid/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="TreeGrid"></div>        
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Limitations

Row spanning in the TreeGrid has the following limitations:

  • The updateCell method does not support row spanning.
  • Row spanning is not compatible with the following features:
    1. Virtual scrolling
    2. Infinite scrolling

When using Row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior.

Row spanning implementation through API

The Syncfusion TreeGrid provides an API-based approach to vertically merge cells with identical values in the same column across consecutive rows.

The row spanning feature in the Syncfusion TreeGrid can be enabled using enableRowSpan property to true in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as “Status”, “Permit Status”, “Inspection Status” and “Punch List Status”.

var treeGridObj = new ej.treegrid.TreeGrid({
    dataSource: rowSpanData,
    childMapping: 'children',
    height: 315,
    treeColumnIndex: 0,
    enableRowSpan: true,
    rowHeight: 50,
    gridLines: 'Both',
    clipMode: 'EllipsisWithTooltip',
    enableHover: false,
    allowSelection: false,
    allowPaging: true,
    pageSettings: { pageSize: 18, pageSizeMode: 'All' },
    columns: [
        { field: 'activityName', headerText: 'Phase Name', width: 250, freeze: 'Left' },
        {
            headerText: 'Schedule', textAlign: 'Center', columns: [
                { field: 'startDate', headerText: 'Start Date', type: 'date', format: 'MM/dd/yyyy', width: 140, textAlign: 'Center' },
                { field: 'endDate', headerText: 'End Date', type: 'date', format: 'MM/dd/yyyy', width: 140, textAlign: 'Center' },
            ]
        },
        {
            headerText: 'Work Status', textAlign: 'Center', columns: [
                { field: 'status', headerText: 'Status', width: 180, textAlign: 'Center' },
            ]
        },
        {
            headerText: 'Compliance', textAlign: 'Center', columns: [
                { field: 'permitStatus', headerText: 'Permit Status', width: 160, textAlign: 'Center' },
                { field: 'inspectionDate', headerText: 'Inspection Date', width: 180, type: 'date', format: 'MM/dd/yyyy', textAlign: 'Center' },
                { field: 'inspectionStatus', headerText: 'Inspection Status', width: 180, textAlign: 'Center' },
                { field: 'punchListStatus', headerText: 'Punch List Status', width: 180, textAlign: 'Center' },
            ]
        },
        {
            headerText: 'Personnel', textAlign: 'Center', columns: [
                {
                    field: 'supervisor',
                    headerText: 'Supervisor',
                    width: 180,
                },
                { field: 'team', headerText: 'Crew', width: 200 },
            ]
        },
        {
            headerText: 'Materials', textAlign: 'Center', columns: [
                { field: 'materialUsed', headerText: 'Materials Used', width: 180, textAlign: 'Center' },
                { field: 'materialCost', headerText: 'Material Cost', width: 140, format: 'C2', textAlign: 'Right', enableRowSpan: false },
            ]
        },
        {
            headerText: 'Cost Summary', textAlign: 'Center', columns: [
                { field: 'totalBudget', headerText: 'Planned Budget', width: 140, format: 'C2', textAlign: 'Center', enableRowSpan: false },
                { field: 'paidToDate', headerText: 'Actual Spend', width: 140, format: 'C2', textAlign: 'Center', enableRowSpan: false },
            ]
        },
    ]
});

treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-treegrid/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="TreeGrid"></div>        
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

In the sample, row spanning is disabled at the column level for the price based columns such as “Planned Budget” and “Actual Spend” by setting each column’s enableRowSpan property to false.

Limitations

Row spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with row spanning feature.

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