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

CommandColumnComponent

Represents the command column of the TreeList. Define the content of the column inside an <ng-template> tag. For more information and examples on using the passed fields and command directives, see editing the TreeList in Angular Reactive Forms.

Usually, the template contains CRUD command directives such as:

html

<kendo-treelist ...>
  <kendo-treelist-column field="ProductID"></kendo-treelist-column>
  <kendo-treelist-command-column title="command">
     <ng-template kendoTreeListCellTemplate>
        <button kendoTreeListEditCommand class="k-primary">Edit</button>
        <button kendoTreeListRemoveCommand>Remove</button>
     </ng-template>
  </kendo-treelist-command-column>
</kendo-treelist>

Selector

kendo-treelist-command-column

Inputs

Name	Type	Default	Description
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.
footerClass	`string \| string[] \| Set<string> \| {[key: string]: any}`		Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property, the `footerClass` option uses the `NgClass` directive. See example.
footerStyle	`{[key: string]: string}`		Sets custom styles for the footer cell of the column. Uses the `NgStyle` directive. See example.
headerClass	`string \| string[] \| Set<string> \| {[key: string]: any}`		Sets custom CSS classes to the column header cell. Uses the `NgClass` directive. See example.
headerStyle	`{[key: string]: string}`		Sets custom styles for the header cell of the column. Uses the `NgStyle` directive. See example.
hidden	`boolean`	`false`	Sets the visibility of the column (see example).
includeInChooser	`boolean`	`true`	Specifies if the column is included in the column-chooser list.
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 (more information and 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.
title	`string`		Sets the title of the column.
width	`number`		Sets the width of the column (in pixels).

Fields

Name	Type	Default	Description
orderIndex	`number`	`0`	The column index after reordering. The orderIndex` is a read-only property. Setting this field does not affect column order.