TreeListComponent

Represents the Kendo UI TreeList component for Angular. Use this component to display and manage hierarchical data in a tabular format.

html

<kendo-treelist
  [kendoTreeListFlatBinding]="data"
  [pageSize]="10"
  [pageable]="true">
</kendo-treelist>

Selector

kendo-treelist

Export Name

Accessible in templates as #kendoTreeListInstance="kendoTreeList"

Inputs

Name	Type	Default	Description
aria-label	string		Provides an accessible description of the component.
autoSize	boolean	false	Determines whether TreeList columns resize during initialization to fit their headers and row content. Columns with autoSize set to false are excluded. To dynamically update the column width to match new content, refer to this example.
columnMenu	boolean | ColumnMenuSettings	false	Determines whether the column menu of the columns displays (see example).
data	any[] | Observable<any> | TreeListDataResult		Sets the data for the TreeList. When you provide an array, the TreeList gets the total count automatically (more information and example).
fetchChildren	(node: any) => any[] | Observable<any[]>		Sets or gets the callback function that retrieves the child nodes for a particular node.
filter	CompositeFilterDescriptor		Sets the descriptor for filtering the data (see examples).
filterable	FilterableSettings	false	Enables the filtering of TreeList columns that have their field option set.
hasChildren	(node: any) => boolean		Sets or gets the callback function that determines if a particular node has child nodes.
height	number		Sets the height in pixels for the TreeList when you set the scrollable option. You can also use style.height to set the height. The style.height option supports units such as px, %, em, rem, and others.
hideHeader	boolean	false	Determines whether the TreeList hides the header. The header is visible by default. The header includes column headers and the filter row.
idField	string	"id"	Sets the name of the field that contains the unique identifier of the node.
isExpanded	(node: any) => boolean		Sets the callback function that determines if a particular item is expanded.
isSelected	IsSelectedFn		Sets a callback that determines if the given row or cell is selected.
loading	boolean	false	Determines whether the TreeList displays the loading indicator (see example).
navigable	boolean	true	When keyboard navigation is enabled, you can use dedicated shortcuts to interact with the TreeList. By default, navigation is enabled. To disable it and include the TreeList content in the normal tab sequence, set this property to false.
pageable	boolean | PagerSettings	false	Configures the pager for the TreeList (see example).
pageSize	number	10	Sets the page size for the TreeList when paging is enabled.
reorderable	boolean	false	When set to true, you can reorder columns by dragging their header cells (see example).
resizable	boolean	false	When set to true, you can resize columns by dragging the edges (resize handles) of their header cells (see example).
rowClass	RowClassFn		A function executed for every data row in the component. It should return a string that will be used as a CSS class for the row.
rowHeight	number		Sets the actual height of each TreeList row (tr) element in the DOM. The virtual scrolling functionality requires this setting. Set the rowHeight option to match the exact pixel height of the tr element in the DOM.
rowReorderable	boolean	false	Enables the row reordering of the TreeList.
scrollable	ScrollMode	'scrollable'	Sets the scroll mode for the TreeList.
selectable	boolean | SelectableSettings		Sets the TreeList selection settings.
skip	number		Sets the number of records that the pager skips. The paging functionality requires this setting.
sort	SortDescriptor[]		Sets the descriptors for sorting the data (see example).
sortable	SortSettings	false	Enables the sorting of TreeList columns that have their field option set.
trackBy	TrackByFunction<DataItem>		Sets 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. The TreeList tracks edited rows by reference.
virtualColumns	boolean	false	When set to true, the TreeList renders only the columns in the current viewport.

Fields

Name	Type	Default	Description
activeCell	NavigationCell		Returns the currently focused cell (if any).
activeRow	NavigationRow		Gets 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 you click the Add command button to add a new row (see example).
cancel	EventEmitter<SaveEvent>	Fires when you click the Cancel command button to close a row (see example).
cellClick	EventEmitter<CellClickEvent>	Fires when you click a cell (see example).
cellClose	EventEmitter<CellCloseEvent>	Fires when you leave an edited cell (see example).
collapse	EventEmitter<ExpandEvent>	Fires when an item collapses.
columnLockedChange	EventEmitter<ColumnLockedChangeEvent>	Fires when you change the locked state of the columns from the column menu or by reordering the columns.
columnReorder	EventEmitter<ColumnReorderEvent>	Fires when you complete the reordering of the column.
columnResize	EventEmitter<ColumnResizeArgs[]>	Fires when you complete the resizing of the column.
columnVisibilityChange	EventEmitter<ColumnVisibilityChangeEvent>	Fires when you change the visibility of the columns from the column menu or column chooser.
contentScroll	EventEmitter<ContentScrollEvent>	Fires when the TreeList content scrolls. For performance reasons, the event triggers 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 changes.
edit	EventEmitter<EditEvent>	Fires when you click the Edit command button to edit a row (see example).
excelExport	EventEmitter<ExcelExportEvent>	Fires when you click the Export to Excel command button.
expand	EventEmitter<ExpandEvent>	Fires when an item expands.
filterChange	EventEmitter<CompositeFilterDescriptor>	Fires when you modify the TreeList filter through the UI. You have to handle the event and filter the data.
pageChange	EventEmitter<PageChangeEvent>	Fires when the page of the TreeList changes (see example). You have to handle the event and page the data.
pdfExport	EventEmitter<PDFExportEvent>	Fires when you click the Export to PDF command button.
remove	EventEmitter<RemoveEvent>	Fires when you click the Remove command button to remove a row (see example).
rowReorder	EventEmitter<RowReorderEvent>	Fires when you drop the dragged row and reordering occurs. Emits the RowReorderEvent.
save	EventEmitter<SaveEvent>	Fires when you click the Save command button to save changes in a row (see example).
scrollBottom	EventEmitter<ScrollBottomEvent>	Fires when you scroll to the last record on the page and enables endless scrolling (see example). You have to handle the event and page the data.
selectionChange	EventEmitter<SelectionChangeEvent>	Fires when the TreeList selection changes.
sortChange	EventEmitter<SortDescriptor[]>	Fires when the sorting of the TreeList changes (see example). You have to handle the event 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 builds the FormGroup from the data item fields. parent? any

autoFitColumn
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). Execute this method only after the TreeList is already populated with data. See example.
Parameters column ColumnBase

autoFitColumns
Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping. If you do not specify columns, autoFitColumns applies to all columns. This method requires the TreeList to be resizable (set resizable to true). See example.
Parameters columns ColumnBase[] | QueryList<ColumnBase>

cancelCell
Closes the current cell in edit mode.

closeCell
Closes the current cell in edit mode and fires the cellClose event.
Returns boolean A Boolean value that indicates whether the edited cell closed. A false value indicates that the cellClose event was prevented.

closeRow
Closes the editor for a given row (see example).
Parameters dataItem any The data item that you will switch out of edit mode. isNew boolean Determines whether the data item is new.

collapse
Collapses the row for the specified data item.
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 resolves with the Drawing Group.

editCell
Puts the cell that you specify by the table row and column in edit mode.
Parameters dataItem any The data item that you will edit. 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 to edit mode (see example).
Parameters dataItem any The data item that you will edit. group? any The FormGroup that describes the edit form. options? {[skipFocus: string]: boolean} Additional options. Use skipFocus to determine if the edit element of the row should receive focus.

expand
Expands the row for the specified data item.
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. The row indexing is absolute and does not change with paging. Header rows are included, starting at index 0. If the TreeList is configured for scrolling, including virtual scrolling, the scroll position updates. If the row is not present on the current page, the method has 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 that indicates if the focus moves to the next row.
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 that indicates if the focus moves to the next row.
Returns NavigationCell The focused cell. If the focus is already on the first cell, returns null.

isEditing
Gets a flag that indicates if a row or a cell is currently edited.
Returns boolean A Boolean flag that indicates if a row or a cell is currently edited.

isEditingCell
Gets a flag that indicates if a cell is currently edited.
Returns boolean A Boolean flag that indicates if a cell is currently being edited.

reload
Clears the already loaded children for the data item so that the TreeList fetches them again the next time it renders.
Parameters dataItem any reloadChildren? boolean

reorderColumn
Changes the position of the specified column. The reordering of columns operates only on the level that the source column infers. For the reorderColumn method to work properly, the source column has to be visible.
Parameters source ColumnBase The column whose position you will change. destIndex number The new position of the column. options ColumnReorderConfig Additional options.

saveAsExcel
Starts the Excel export (see example).

saveAsPDF
Starts 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 isExpanded and isSelected callbacks.