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

SpanColumnComponent

Component

Represents a column that spans multiple data cells while keeping individual header and footer cells. Use this component to create flexible layouts and retain built-in UI for sorting and filtering. Wrap the columns to merge inside the <kendo-treelist-span-column> tag.

Definition

Package:@progress/kendo-angular-treelist

Selector:kendo-treelist-span-column

Syntax:

html

<kendo-treelist-span-column>
  <kendo-treelist-column field="field1"></kendo-treelist-column>
  <kendo-treelist-column field="field2"></kendo-treelist-column>
  <ng-template kendoTreeListCellTemplate let-dataItem>
    <h5>{{ dataItem.field1 }}</h5>
    <p>{{ dataItem.field2 }}</p>
  </ng-template>
</kendo-treelist-span-column>

Inputs

autoSize

boolean

Indicates whether 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. 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

Defines whether the edit template of the column is rendered. To enable editing for a spanned column, set an edit template for it.

Default:

false

expandable

boolean

Specifies if the expanded indicator appears in the column.

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 the columns.

Default:

true

locked

boolean

Toggles the locked (frozen) state of the columns. Locked columns are visible at all times during horizontal scrolling. See example.

Default:

false

media

string

Sets the condition that must be satisfied for a column to remain visible (see example). If you set the hidden property, the behavior of media is overridden.

minResizableWidth

number

Sets the minimum width (in pixels) for resizing the column using the UI.

Default:

reorderable

boolean

Indicates whether the column is reorderable.

Default:

true

resizable

boolean

Indicates whether 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:

style

{ [key: string]: string }

Sets custom styles for the table cells (excluding the footer and header) of the column. Uses the NgStyle directive. See example.

tableCellsRole

string

Sets the role attribute for the table cells (excluding the footer and header) of the column.

Default:

'gridcell'

Fields

orderIndex

number

The column index after reordering. The orderIndex` is a read-only property. Setting this field does not affect column order.

Default: