Column spanning in TypeScript TreeGrid control

18 Nov 20181 minute to read

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

Limitations

Column spanning in the TreeGrid has the following limitations:

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

When using column 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.

Column spanning implementation through API

The Syncfusion TreeGrid provides an API-based approach to horizontally merge cells with identical values in the same row across adjacent columns.

The column spanning feature in the Syncfusion TreeGrid can be enabled using enableColumnSpan 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”.

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

Limitations

Column 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 column spanning feature.

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