SpanColumnComponent
Represents a column that spans multiple data cells while keeping the individual
header and footer cells (see example).
Use this column to create flexible layouts and keep built-in UI for
sorting, filtering, and
grouping. Wrap the columns you want to merge inside the <kendo-grid-span-column>
tag.
<kendo-grid-span-column>
<kendo-grid-column field="ID"></kendo-grid-column>
<kendo-grid-column field="Name"></kendo-grid-column>
<ng-template kendoGridCellTemplate let-dataItem>
<p>{{ dataItem.ID }}</p>
<p>{{ dataItem.Name }}</p>
</ng-template>
</kendo-grid-span-column>
Selector
kendo-grid-span-column
Inputs
Name | Type | Default | Description |
---|---|---|---|
autoSize |
|
Specifies if the column is automatically resized during initialization to fit its header and row content. | |
columnMenu |
|
|
Specifies if the column menu is shown for the column. |
class |
|
Sets custom CSS classes to the column cells.
Uses the | |
editable |
|
|
Sets whether the edit template of the column is rendered. To enable editing for a spanned column, set an edit template for it (see example). |
filterClass |
|
Sets custom CSS classes to the filter row cell.
Uses the | |
filterStyle |
|
Sets custom styles for the filter row cell.
Uses the | |
hidden |
|
|
Sets the visibility of the column (see example). |
lockable |
|
|
Specifies if the column can be locked or unlocked from the column menu or by reordering. |
locked |
|
|
Toggles the locked (frozen) state of the columns (see example). |
maxResizableWidth |
|
Sets the maximum width (in pixels) for resizing the column by using the UI (see example).
By default, the maximum width is not restricted.
The | |
media |
|
Sets the condition for the column to remain visible (see example).
If you set the Accepts device identifiers from Bootstrap 4 (see example). | |
minResizableWidth |
|
|
Sets the minimum width (in pixels) for resizing the column by using the UI (see example).
The |
reorderable |
|
|
Specifies if the column is reorderable. |
resizable |
|
|
Specifies if the column is resizable. |
stickable |
|
|
Specifies if the column can be stuck or unstuck from the column menu. |
sticky |
|
|
Specifies if the column is always visible when scrolling the Grid horizontally. |
style |
|
Sets custom styles for the table cells (excluding footer and header) of the column.
Uses the | |
tableCellsRole |
|
|
Sets the |
Fields
Name | Type | Default | Description |
---|---|---|---|
orderIndex |
|
|
Gets the column index after reordering. The |