Components / TreeList / API / TreeListComponent /

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

TreeListComponent

Represents the Kendo UI TreeList component for Angular.

Example

View Source

Change Theme:

Export Name

Accessible in templates as #kendoTreeListInstance="kendoTreeList"

Inputs

Name	Type	Default	Description
aria-label	`string`		An optional accessible description of the component.
autoSize	`boolean`		Indicates whether the TreeList columns will be resized during initialization so that they fit their headers and row content. Defaults to `false`. Columns with `autoSize` set to `false` are excluded. To dynamically update the column width to match the new content, refer to this example.
columnMenu	`boolean \| ColumnMenuSettings`	`false`	Specifies if the column menu of the columns will be displayed (see example).
data	`any[] \| TreeListDataResult \| Observable<any>`		Sets the data of the TreeList. If an array is provided, the TreeList automatically gets the total count (more information and example).
fetchChildren	`(node: any) => any[] \| Observable<any[]>`		Gets or sets the callback function that retrieves the child nodes for a particular node.
filter	`CompositeFilterDescriptor`		The descriptor by which the data will be filtered (see examples).
filterable	`FilterableSettings`		Enables the filtering of the TreeList columns that have their `field` option set.
hasChildren	`(node: any) => boolean`		Gets or sets the callback function that indicates if a particular node has child nodes.
height	`number`		Defines the height (in pixels) that is used when the `scrollable` option of the TreeList is set. To set the height of the TreeList, you can also use `style.height`. The `style.height` option supports units such as `px`, `%`, `em`, `rem`, and others.
hideHeader	`boolean`		Specifies if the header of the treelist will be hidden. The header is visible by default. The header includes column headers and the filter row.
idField	`string`	`"id"`	The name of the field which contains the unique identifier of the node.
isExpanded	`(node: any) => boolean`		Sets the callback function that indicates if a particular item is expanded.
isSelected	`IsSelectedFn`		Provides a callback that determines if the given row / cell is selected.
loading	`boolean`	`false`	Specifies if the loading indicator of the TreeList will be displayed (see example).
navigable	`boolean`		If set to `true`, the user can use dedicated shortcuts to interact with the TreeList. By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.
pageable	`boolean \| PagerSettings`		Configures the pager of the TreeList (see example). The available options are: `buttonCount: Number`—Sets the maximum numeric buttons count before the buttons are collapsed. Defaults to `10`. `info: Boolean`—Toggles the information about the current page and the total number of records. Defaults to `true`. `type: PagerType`—Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values. Defaults to `'numeric'`. `pageSizes: Boolean` or `Array<number>`—Shows a menu for selecting the page size. Defaults to `false`. `previousNext: Boolean`—Toggles the Previous and Next buttons. Defaults to `true`. `responsive: Boolean`—Toggles the built-in responsive behavior of the Pager. Defaults to `true`.
pageSize	`number`	`10`	Defines the page size used by the TreeList when paging is enabled.
reorderable	`boolean`	`false`	If set to `true`, the user can reorder columns by dragging their header cells (see example).
resizable	`boolean`	`false`	If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells (see example).
rowClass	`RowClassFn`		Defines a function that is executed for every data row in the component. import { Component, ViewEncapsulation } from '@angular/core'; import { RowClassArgs } from '@progress/kendo-angular-treelist'; @Component({ selector: 'my-app', encapsulation: ViewEncapsulation.None, styles: [` .k-treelist tr.even { background-color: #f45c42; } .k-treelist tr.odd { background-color: #41f4df; } `], template: ` <kendo-treelist [data]="treelistData" [rowClass]="rowCallback"> </kendo-treelist> ` }) class AppComponent { public treelistData: any[] = products; public rowCallback(context: RowClassArgs) { const isEven = context.index % 2 === 0; return { even: isEven, odd: !isEven }; } } const products = [{ "ProductID": 1, "ProductName": "Chai", "UnitPrice": 18.0000, "Discontinued": true }, { "ProductID": 2, "ProductName": "Chang", "UnitPrice": 19.0000, "Discontinued": false } ];
rowHeight	`number`		Defines the row height that is used when the `scrollable` option of the TreeList is set to `virtual`. Required by the virtual scrolling functionality.
scrollable	`ScrollMode`		Defines the scroll mode used by the TreeList. The available options are: `none`—Renders no scrollbar. `scrollable`—The default scroll mode. It requires the setting of the `height` option.
selectable	`boolean \| SelectableSettings`		Specified the treelist selection settings
skip	`number`		Defines the number of records to be skipped by the pager. Required by the paging functionality.
sort	`SortDescriptor[]`		The descriptors by which the data will be sorted (see example).
sortable	`SortSettings`		Enables the sorting of the TreeList columns that have their `field` option set.
trackBy	`TrackByFunction<DataItem>`		A function that defines how to track changes for the data rows. By default, the TreeList tracks changes by the index of the data item. Edited rows are tracked by reference. In some cases, you might need to override the default behavior, for example, when you implement editing with immutable data items. The following example demonstrates how to track items only by index. import { Component } from '@angular/core'; import { TreeListItem } from '@progress/kendo-angular-treelist'; @Component({ selector: 'my-app', template: ` <kendo-treelist [data]="treelistData" [trackBy]="trackBy"> </kendo-treelist> ` }) class AppComponent { public treelistData: any[] = products; public trackBy(index: number, item: TreeListItem): any { console.log(item); return index; } } const products = [{ "ProductID": 1, "ProductName": "Chai", "UnitPrice": 18.0000, "Discontinued": true }, { "ProductID": 2, "ProductName": "Chang", "UnitPrice": 19.0000, "Discontinued": false } ];
virtualColumns	`boolean`		If set to `true`, the treelist will render only the columns in the current viewport.

Fields

Name	Type	Description
activeCell	`NavigationCell`	Returns the currently focused cell (if any).
activeRow	`NavigationRow`	Returns the currently focused row (if any).
columns	`QueryList<ColumnBase>`	A query list of all declared columns.

Events

Name	Type	Description
add	`EventEmitter<AddEvent>`	Fires when the user clicks the Add command button to add a new row (see example).
cancel	`EventEmitter<SaveEvent>`	Fires when the user clicks the Cancel command button to close a row (see example).
cellClick	`EventEmitter<CellClickEvent>`	Fires when the user clicks a cell (see example).
cellClose	`EventEmitter<CellCloseEvent>`	Fires when the user leaves an edited cell (see example).
collapse	`EventEmitter<ExpandEvent>`	Fires when an item is collapsed.
columnLockedChange	`EventEmitter<ColumnLockedChangeEvent>`	Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
columnReorder	`EventEmitter<ColumnReorderEvent>`	Fires when the user completes the reordering of the column.
columnResize	`EventEmitter<ColumnResizeArgs[]>`	Fires when the user completes the resizing of the column.
columnVisibilityChange	`EventEmitter<ColumnVisibilityChangeEvent>`	Fires when the user changes the visibility of the columns from the column menu or column chooser.
contentScroll	`EventEmitter<ContentScrollEvent>`	Fires when the treelist content is scrolled. For performance reasons, the event is triggered outside the Angular zone. Enter the Angular zone if you make any changes that require change detection.
dataStateChange	`EventEmitter<DataStateChangeEvent>`	Fires when the data state of the TreeList is changed.
edit	`EventEmitter<EditEvent>`	Fires when the user clicks the Edit command button to edit a row (see example).
excelExport	`EventEmitter<ExcelExportEvent>`	Fires when the user clicks the Export to Excel command button.
expand	`EventEmitter<ExpandEvent>`	Fires when an item is expanded.
filterChange	`EventEmitter<CompositeFilterDescriptor>`	Fires when the TreeList filter is modified through the UI. You have to handle the event yourself and filter the data.
pageChange	`EventEmitter<PageChangeEvent>`	Fires when the page of the TreeList is changed (see example). You have to handle the event yourself and page the data.
pdfExport	`EventEmitter<PDFExportEvent>`	Fires when the user clicks the Export to PDF command button.
remove	`EventEmitter<RemoveEvent>`	Fires when the user clicks the Remove command button to remove a row (see example).
save	`EventEmitter<SaveEvent>`	Fires when the user clicks the Save command button to save changes in a row (see example).
scrollBottom	`EventEmitter<ScrollBottomEvent>`	Fires when the user scrolls to the last record on the page and enables endless scrolling (see example). You have to handle the event yourself and page the data.
selectionChange	`EventEmitter<SelectionChangeEvent>`	Fires when the TreeList selection is changed.
sortChange	`EventEmitter<SortDescriptor[]>`	Fires when the sorting of the TreeList is changed (see example). You have to handle the event yourself and sort the data.

Methods

addRow

Creates a new row editor (see example).

Parameters
group	`any`	The `FormGroup` that describes the edit form. If called with a data item, it will build the `FormGroup` from the data item fields.
parent?	`any`

Applies the minimum possible width for the specified column, so that the whole text fits without wrapping. This method expects the TreeList to be resizable (set resizable to true). Makes sense to execute this method only after the TreeList is already populated with data.

@Component({
   selector: 'my-app',
   template: `
       <kendo-treelist
           #treelist
           [data]="treelistData"
           [resizable]="true"
           style="height: 300px">
           <ng-template kendoTreeListToolbarTemplate>
                <button kendoButton (click)="treelist.autoFitColumn(groupColumn)">
                    Auto-fit the group column
                </button>
           </ng-template>
           <kendo-treelist-column-group #groupColumn title="Product Info">
               <kendo-treelist-column
                   field="ProductID"
                   [width]="50"
                   [minResizableWidth]="30"
                   title="ID">
               </kendo-treelist-column>

               <kendo-treelist-column
                   field="ProductName"
                   title="Product Name">
               </kendo-treelist-column>
           </kendo-treelist-column-group>

           <kendo-treelist-column
               field="UnitPrice"
               title="Unit Price"
               [width]="180"
               filter="numeric"
               format="{0:c}">
           </kendo-treelist-column>
       </kendo-treelist>
   `
})
class AppComponent {
   public treelistData: any[] = products;
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];

Parameters
column	`ColumnBase`

autoFitColumns

Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping. If no columns are specified, autoFitColumns is applied to all columns.

This method requires the TreeList to be resizable (set resizable to true).

@Component({
   selector: 'my-app',
   template: `
     <kendo-treelist
         #treelist
         [data]="treelistData"
         [resizable]="true"
         style="height: 300px">
         <ng-template kendoTreeListToolbarTemplate>
             <button kendoButton (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
                 Auto-fit the first and last column
             </button>
             <button kendoButton (click)="treelist.autoFitColumns()">
                 Auto-fit all columns
             </button>
         </ng-template>
         <kendo-treelist-column-group title="Product Info">
             <kendo-treelist-column
                 #firstColumn
                 field="ProductID"
                 [width]="50"
                 [minResizableWidth]="30"
                 title="ID">
             </kendo-treelist-column>

             <kendo-treelist-column
                 field="ProductName"
                 title="Product Name"
                 >
             </kendo-treelist-column>
         </kendo-treelist-column-group>

         <kendo-treelist-column
             #lastColumn
             field="UnitPrice"
             title="Unit Price"
             [width]="180"
             filter="numeric"
             format="{0:c}">
         </kendo-treelist-column>
     </kendo-treelist>
   `
})
class AppComponent {
   public treelistData: any[] = products;
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];

Parameters
columns	`ColumnBase[] \| QueryList<[ColumnBase]({% slug api_treelist_columnbase %})>`

cancelCell
Closes the current cell in edit mode.

closeCell

Closes the current cell in edit mode and fires the cellClose event.

Returns
`boolean`	Indicates whether the edited cell was closed. A `false` value indicates that the `cellClose` event was prevented.

closeRow

Closes the editor for a given row (see example).

Parameters
item	`any`
isNew	`boolean`

collapse

Collapses the row for the specified dataItem.

Parameters
dataItem	`any`

drawPDF

Exports the TreeList element to a Drawing Group by using the kendo-treelist-pdf component options. (see example).

Returns
`Promise<any>`	A promise that will be resolved with the Drawing `Group`.

editCell

Puts the cell that is specified by the table row and column in edit mode.

Parameters
dataItem	`any`
column	`any`	The leaf column index, or the field name or the column instance that should be edited.
group?	`any`	The `FormGroup` that describes the edit form.

editRow

Switches the specified table row in the edit mode (see example).

Parameters
item	`any`
group?	`any`	The `FormGroup` that describes the edit form.
options?	`{[skipFocus: string]: boolean}`	Additional options. Use skipFocus to determine if the row's edit element should be focused. Defaults to `false`.

expand

Expands the row for the specified dataItem.

Parameters
dataItem	`any`

focus

Focuses the last active or the first cell of the TreeList.

Returns
`NavigationCell`	The focused cell.

focusCell

Focuses the cell with the specified row and column index.

The row index is based on the logical structure of the TreeList and does not correspond to the data item index:

Header rows are included, starting at index 0.
The row indexing is absolute and does not change with paging.

If the TreeList is configured for scrolling, including virtual scrolling, the scroll position will be updated. If the row is not present on the current page, the method will have no effect.

Parameters
rowIndex	`number`	The logical row index to focus. The top header row has an index 0.
colIndex	`number`	The column index to focus.

Returns
`NavigationCell`	The focused cell.

focusNextCell

Focuses the next cell, optionally wrapping to the next row.

Parameters
wrap	`boolean`	A Boolean value which indicates if the focus will move to the next row. Defaults to `true`.

Returns
`NavigationCell`	The focused cell. If the focus is already on the last cell, returns `null`.

focusPrevCell

Focuses the previous cell. Optionally wraps to the previous row.

Parameters
wrap	`boolean`	A Boolean value which indicates if the focus will move to the next row. Defaults to `true`.

Returns
`NavigationCell`	The focused cell. If the focus is already on the first cell, returns `null`.

isEditing

Returns a flag which indicates if a row or a cell is currently edited.

Returns
`boolean`	A flag which indicates if a row or a cell is currently edited.

isEditingCell

Returns a flag which indicates if a cell is currently edited.

Returns
`boolean`	A flag which indicates if a cell is currently being edited.

reload

Clears the already loaded children for the dataItem so that the TreeList will fetch them again the next time it is rendered.

Parameters
dataItem	`any`
reloadChildren?	`boolean`

reorderColumn

Changes the position of the specified column. The reordering of columns operates only on the level which is inferred by the source column. For the reorderColumn method to work properly, the source column has to be visible.

@Component({
   selector: 'my-app',
   template: `
       <kendo-treelist
           #treelist
           [data]="treelistData"
           [reorderable]="true"
           style="height: 300px">
           <ng-template kendoTreeListToolbarTemplate>
                <button kendoButton
                    (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
                    Move the group column before the last one.
                </button>
           </ng-template>
           <kendo-treelist-column-group #groupColumn title="Product Info">
               <kendo-treelist-column
                   field="ProductID"
                   [width]="50"
                   title="ID">
               </kendo-treelist-column>

               <kendo-treelist-column
                   field="ProductName"
                   title="Product Name">
               </kendo-treelist-column>
           </kendo-treelist-column-group>

           <kendo-treelist-column
               field="UnitPrice"
               title="Unit Price"
               [width]="180"
               format="{0:c}">
           </kendo-treelist-column>

           <kendo-treelist-column
               field="Discontinued"
               title="Discontinued"
               [width]="100">
           </kendo-treelist-column>
       </kendo-treelist>
   `
})
class AppComponent {
   public treelistData: any[] = products;
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];

Parameters
source	`ColumnBase`	The column whose position will be changed.
destIndex	`number`	The new position of the column.
options	`ColumnReorderConfig`	Additional options.

saveAsExcel
Initiates the Excel export (see example).

saveAsPDF
Initiates the PDF export (see example).

scrollTo

Scrolls to the specified row and column

Parameters
request	`ScrollRequest`

updateView
Updates the state of the current view without reloading the data. Checks all currently rendered items for changes and triggers re-evaluation of the the isExpanded and isSelected callbacks.

updateView

Updates the state of the current view without reloading the data.

Checks all currently rendered items for changes and triggers re-evaluation of the the isExpanded and isSelected callbacks.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

TreeListComponent

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!