Row Spanning
The row spanning feature of the Kendo UI for Angular Grid enables you to span the cells in a particular column over multiple rows. This functionality is identical to "cell merging" in Excel or "row spanning" in HTML tables.
Setup
To enable the built-in row spanning functionality of the Kendo UI for Angular Grid, set the cellRowspan property of the desired ColumnComponent to true. The corresponding column will use a default function that spans consecutive Grid cells with the same value over multiple rows.
The following example demonstrates the default row spanning functionality and how it behaves with the different data operations of the Grid.
Custom Row Spanning
The cellRowspan property allows you to customize the default behavior of the row spanning functionality by defining a custom CellRowspanFn function. The callback is executed for each data row in a given Grid column and returns a number that determines the rowspan for each column cell.
When a given cell has a certain
rowspanapplied, the next cells that get spanned based on therowspanvalue are not rendered in the Grid and are omitted from the callback's following execution.
The CellRowspanFn callback provides information about the associated RowArgs instance, ColumnComponent and the currently displayed data in the Grid:
public rowspanCallback: CellRowspanFn = (row, column, data) => {
return 2;
}The
CellRowspanFncallback is executed each time the rendered Grid data is updated as a result of a data operation or editing.
The callback grants the freedom to implement any custom logic for spanning the desired cells depending on the current Grid state and considering the requirements of the application.
The following example implements a custom function that spans consecutive Grid cells with the same CategoryID and sets a suitable template for the spanned cells.
Custom Row Spanning with Grouping
When grouping is configured for the Grid, the CellRowspanFn callback exposes additional information about the group, in which each data row is contained. This enables you to adjust the custom row spanning function depending on the defined groups.
You can obtain the associated group of a row from the group field of the dataItem that the RowArgs parameter of the function provides:
public rowspanCallback: CellRowspanFn = (row, column, data) => {
const group = row.dataItem.group;
...
}You can use this information to ensure that the custom callback for the cellRowspan property takes into account the defined groups and correctly applies the desired rowspan to the grouped cells.
The following example demonstrates how to set a suitable rowspan based on the grouped Grid rows with custom logic.