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

Defining Columns

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

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:

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

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

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.

View Source
Change Theme:

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.

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

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

View Source
Change Theme:

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

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

View Source
Change Theme: