New to Kendo UI for Angular? Start a free 30-day trial

SpanColumnComponent

Component

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.

Definition

Package:@progress/kendo-angular-grid

Selector:kendo-grid-span-column

Syntax:

html

<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>

Inputs

autoSize

boolean

Specifies if the column is automatically resized during initialization to fit its header and row content.

class

string | string[] | Set<string> | { [key: string]: any }

Sets custom CSS classes to the column cells. Uses the NgClass directive. See example. To customize header and footer column cells, use the headerClass and footerClass inputs.

columnMenu

boolean

Specifies if the column menu is shown for the column.

Default:

true

editable

boolean

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).

Default:

false

filterClass

string | string[] | Set<string> | { [key: string]: any }

Sets custom CSS classes to the filter row cell. Uses the NgClass directive. See example.

filterStyle

{ [key: string]: string }

Sets custom styles for the filter row cell. Uses the NgStyle directive. See example.

hidden

boolean

Sets the visibility of the column (see example).

Default:

false

lockable

boolean

Specifies if the column can be locked or unlocked from the column menu or by reordering.

Default:

true

locked

boolean

Toggles the locked (frozen) state of the columns (see example).

Default:

false

maxResizableWidth

number

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 autoFitColumn and autoFitColumns methods have higher priority.

media

string

Sets the condition for the column to remain visible (see example). If you set the hidden property, media is ignored.

Accepts device identifiers from Bootstrap 4 (see example).

minResizableWidth

number

Sets the minimum width (in pixels) for resizing the column by using the UI (see example). The autoFitColumn and autoFitColumns methods have higher priority.

Default:

reorderable

boolean

Specifies if the column is reorderable.

Default:

true

resizable

boolean

Specifies if the column is resizable.

Default:

true

resizeStep

number

Sets the distance in pixels by which the column width is adjusted during keyboard navigation resizing. Used when resizing columns with Alt/Option + Left/Right Arrow keyboard shortcuts.

Default: