TreeListComponent
Represents the Kendo UI TreeList component for Angular. Use this component to display and manage hierarchical data in a tabular format.
Definition
Package:@progress/kendo-angular-treelist
Selector:kendo-treelist
Export Name:Accessible in templates as #kendoTreeListInstance="kendoTreeList"
Syntax:
<kendo-treelist
[kendoTreeListFlatBinding]="data"
[pageSize]="10"
[pageable]="true">
</kendo-treelist>Inputs
aria-label
string
Provides an accessible description of the component.
autoSize
boolean
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.
false
columnMenu
boolean | ColumnMenuSettings
Determines whether the column menu of the columns displays (see example).
false
data
any[] | TreeListDataResult | Observable<any>
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.
Sets the descriptor for filtering the data (see examples).
Enables the filtering of TreeList columns that have their field option set.
false
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
Determines whether the TreeList hides the header. The header is visible by default.
The header includes column headers and the filter row.
false
idField
string
Sets the name of the field that contains the unique identifier of the node.
"id"
isExpanded
(node: any) => boolean
Sets the callback function that determines if a particular item is expanded.
Sets a callback that determines if the given row or cell is selected.
loading
boolean
Determines whether the TreeList displays the loading indicator (see example).
false
navigable
boolean
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.
true
pageable
boolean | PagerSettings
Configures the pager for the TreeList (see example).
false
reorderable
boolean
When set to true, you can reorder columns by dragging their header cells
(see example).
false
resizable
boolean
When set to true, you can resize columns by dragging the edges (resize handles) of their header cells
(see example).
false
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
Enables the row reordering of the TreeList.
false
Sets the scroll mode for the TreeList.
'scrollable'
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).
Enables the sorting of TreeList columns that have their field option set.
false
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.
defaultTrackBy
virtualColumns
boolean
When set to true, the TreeList renders only the columns in the current viewport.
false
Fields
Returns the currently focused cell (if any).
Gets the currently focused row (if any).
A query list of all declared columns.
Events
Fires when you click the Add command button to add a new row (see example).
Fires when you click the Cancel command button to close a row (see example).
Fires when you click a cell (see example).
Fires when you leave an edited cell (see example).
Fires when an item collapses.
Fires when you change the locked state of the columns from the column menu or by reordering the columns.
Fires when you complete the reordering of the column.
Fires when you complete the resizing of the column.
Fires when you change the visibility of the columns from the column menu or column chooser.
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.
Fires when the data state of the TreeList changes.
Fires when you click the Edit command button to edit a row (see example).
Fires when you click the Export to Excel command button.
Fires when an item expands.
Fires when you modify the TreeList filter through the UI. You have to handle the event and filter the data.
Fires when the page of the TreeList changes (see example). You have to handle the event and page the data.
Fires when you click the Export to PDF command button.
Fires when you click the Remove command button to remove a row (see example).
Fires when you drop the dragged row and reordering occurs. Emits the RowReorderEvent.
Fires when you click the Save command button to save changes in a row (see example).
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.
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
Creates a new row editor (see example).
The FormGroup that describes
the edit form. If called with a data item, it builds the FormGroup from the data item fields.
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.
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.
Closes the current cell in edit mode.
Closes the editor for a given row (see example).
The data item that you will switch out of edit mode.
isNewbooleanDetermines whether the data item is new.
Collapses the row for the specified data item.
Exports the TreeList element to a Drawing Group by using the kendo-treelist-pdf component options.
(see example).
Promise<any>
A promise that resolves with the Drawing Group.
Puts the cell that you specify by the table row and column in edit mode.
The data item that you will edit.
columnanyThe leaf column index, or the field name or the column instance that should be edited.
group?anyThe FormGroup
that describes the edit form.
Switches the specified table row to edit mode (see example).
The data item that you will edit.
group?anyThe FormGroup
that describes the edit form.
Additional options. Use skipFocus to determine if the edit element of the row should receive focus.
false
Expands the row for the specified data item.
Focuses the last active or the first cell of the TreeList.
The focused cell.
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.
The logical row index to focus. The top header row has an index 0.
colIndexnumberThe column index to focus.
Returns:The focused cell.
Focuses the next cell, optionally wrapping to the next row.
A Boolean value that indicates if the focus moves to the next row.
Returns:The focused cell. If the focus is already on the last cell, returns null.
true
Focuses the previous cell. Optionally wraps to the previous row.
A Boolean value that indicates if the focus moves to the next row.
Returns:The focused cell. If the focus is already on the first cell, returns null.
true
Gets a flag that indicates if a row or a cell is currently edited.
boolean
A Boolean flag that indicates if a row or a cell is currently edited.
Gets a flag that indicates if a cell is currently edited.
boolean
A Boolean flag that indicates if a cell is currently being edited.
Clears the already loaded children for the data item so that the TreeList fetches them again the next time it renders.
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.
The column whose position you will change.
destIndexnumberThe new position of the column.
optionsColumnReorderConfigAdditional options.
Starts the Excel export (see example).
Starts the PDF export (see example).
Scrolls to the specified row and column.
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.