New to Kendo UI for AngularStart a free 30-day trial

SpanColumnComponent

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.

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>

Selector

kendo-treelist-span-column

Inputs

NameTypeDefaultDescription

autoSize

boolean

Indicates whether the column is automatically resized during initialization to fit its header and row content.

columnMenu

boolean

true

Specifies if the column menu is shown for the column.

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.

editable

boolean

false

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

expandable

boolean

Specifies if the expanded indicator appears in the column.

hidden

boolean

false

Sets the visibility of the column (see example).

lockable

boolean

true

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

locked

boolean

false

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

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

10

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

reorderable

boolean

true

Indicates whether the column is reorderable.

resizable

boolean

true

Indicates whether the column is resizable.

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

"gridcell"

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

Fields

NameTypeDefaultDescription

orderIndex

number

0

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

In this article
SelectorInputsFields
Not finding the help you need?
Contact Support