Defining Columns

The TreeList enables you to define its columns in two ways. You can either:

• Define the columns explicitly in the component template.
• Let the TreeList generate the columns automatically based on the provided data.

Using the Column Component

To define the TreeList columns in a declarative way, nest the columns as tags inside the <kendo-treelist> tag. This approach is convenient for configuring the columns and enabling various features like hidden and locked states, resizing, reordering, and many more.

The available column components provided by the TreeList are:

• <kendo-treelist-column>—Represents the basic TreeList column. Used to display model data or templated content.
• <kendo-treelist-column-group>—Used to define multi-column group headers, which span over subordinate columns.
• <kendo-treelist-checkbox-column>—Defines a column with a dedicated checkbox for row selection.
• <kendo-treelist-command-column>—Defines a column dedicated to displaying command buttons like Edit, Remove, and others.
• <kendo-treelist-span-column>—Allows you to span row content over multiple cells while retaining the individual header and footer cells.

The following code snippet will produce a TreeList with two columns bound to the name and title fields of the model:

Copy Code<kendo-treelist [kendoTreeListFlatBinding]="data" ...>
    <kendo-treelist-column field="name" title="Name"> </kendo-treelist-column>
    <kendo-treelist-column field="title" title="Title"> </kendo-treelist-column>
<kendo-treelist>

The code above demonstrates how to configure the following column properties:

• field—The model field to which you bind the column.
• title—The column header text. If you don't provide it, the TreeList displays the field property name in the header.

The example below demonstrates how to define the TreeList columns in the template.

Dynamic Column Generation

The TreeList enables you to generate columns based on a configuration array. This dynamic column generation approach is convenient for a few scenarios:

• The number of columns that must be displayed is large and you don't want to manually list all of them in the TreeList template.
• The column number and configuration will vary based on some business logic.
• The column configuration must be stored and loaded separately, for example, from a remote service.

To configure dynamic column generation, use the Angular ngFor structural directive to loop through a column configuration array. The columns will be rendered according to the items order in the passed collection.

Copy Code<kendo-treelist [kendoTreeListFlatBinding]="data" ...>
    <kendo-treelist-column *ngFor="let column of columnsConfig"
        field="{{ column.field }}"
        title="{{ column.title }}"
        [expandable]="column.expandable">
    </kendo-treelist-column>
</kendo-treelist>

The following example demonstrates how to generate the TreeList columns by using a ngFor loop.

Automatic Column Generation

By default, if the columns are not explicitly configured, the TreeList will generate a column for each model field from the bound data. For example, when bound to the data below, the Treelist will generate three columns (ID, Name, and Title):

Copy Codepublic data: Employee[] = [
    { id: 1, name: 'Daryl Sweeney', title: 'Chief Executive Officer', managerId: null,},
    { id: 2, name: 'Guy Wooten', title: 'Chief Technical Officer', managerId: 1,},
    ...
];

The following example demonstrates the TreeList default column generation.

Suggested Links

• ColumnComponent
• API Reference of the TreelistComponent
• API Index of the TreeList
• Angular ngFor Directive