/**----------------------------------------------------------------------------------------- * Copyright © 2024 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, Renderer2, QueryList, SimpleChange, NgZone, ChangeDetectorRef, TemplateRef, TrackByFunction } from '@angular/core'; import { Observable } from 'rxjs'; import { SortDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query'; import { ScrollMode } from './scrolling/scrollmode'; import { SortSettings } from './columns/sort-settings'; import { PagerSettings } from './pager/pager-settings'; import { BrowserSupportService } from './layout/browser-support.service'; import { TreeListDataResult, ViewCollection } from './data/data.collection'; import { EditService } from './editing/edit.service'; import { PageChangeEvent, DataStateChangeEvent } from './data/change-event-args.interface'; import { ColumnsContainer } from './columns/columns-container'; import { ChangeNotificationService } from './data/change-notification.service'; import { NoRecordsTemplateDirective } from './rendering/no-records-template.directive'; import { ColumnBase } from './columns/column-base'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { FilterService } from './filtering/filter.service'; import { PagerTemplateDirective } from './pager/pager-template.directive'; import { PDFService } from './pdf/pdf.service'; import { PDFExportEvent } from './pdf/pdf-export-event'; import { ResponsiveService } from "./layout/responsive.service"; import { ExcelService } from './excel/excel.service'; import { ExcelExportEvent } from './excel/excel-export-event'; import { ColumnList } from './columns/column-list'; import { RowClassFn } from './rendering/common/row-class'; import { ToolbarTemplateDirective } from "./rendering/toolbar/toolbar-template.directive"; import { EditEvent } from "./editing/edit-event-args.interface"; import { RemoveEvent } from "./editing/remove-event-args.interface"; import { SaveEvent } from "./editing/save-event-args.interface"; import { CancelEvent } from "./editing/cancel-event-args.interface"; import { AddEvent } from "./editing/add-event-args.interface"; import { CellCloseEvent } from './editing/cell-close-event'; import { CellClickEvent } from './common/cell-click-event-args.interface'; import { ScrollSyncService } from "./scrolling/scroll-sync.service"; import { DomEventsService } from './common/dom-events.service'; import { ColumnResizingService } from "./column-resizing/column-resizing.service"; import { ColumnResizeArgs } from './column-resizing/column-resize.interface'; import { FilterableSettings } from './filtering/filterable'; import { ColumnReorderService } from './dragdrop/column-reorder.service'; import { ColumnReorderEvent } from './dragdrop/column-reorder-event'; import { ColumnReorderConfig } from './dragdrop/column-reorder-config'; import { NavigationService } from './navigation/navigation.service'; import { NavigationCell } from './navigation/navigation-cell.interface'; import { NavigationRow } from './navigation/navigation-row.interface'; import { ColumnInfoService } from "./common/column-info.service"; import { ScrollRequestService, ScrollRequest } from './scrolling/scroll-request.service'; import { SortService } from './common/sort.service'; import { ColumnMenuTemplateDirective } from './column-menu/column-menu-template.directive'; import { ColumnMenuSettings } from './column-menu/column-menu-settings.interface'; import { ColumnVisibilityChangeEvent } from './column-menu/column-visibility-change-event'; import { ColumnLockedChangeEvent } from './column-menu/column-locked-change-event'; import { ScrollBottomEvent } from './scrolling/scroll-bottom-event'; import { ContentScrollEvent } from './scrolling/content-scroll-event'; import { TreeListItem } from './data/treelist-item.interface'; import { ExpandStateService } from './expand-state/expand-state.service'; import { ExpandEvent } from './expand-state/expand-event'; import { OptionChangesService } from "./common/option-changes.service"; import { SelectionService } from './selection/selection.service'; import { SelectableSettings } from './selection/selectable-settings'; import { SelectionChangeEvent } from './selection/selection-change-event'; import { IsSelectedFn } from './selection/is-selected'; import { ContextService } from './common/provider.service'; import { RowReorderEvent } from './row-reordering/types'; import { RowReorderService } from './row-reordering/row-reorder.service'; import { DragTargetContainerDirective, DragTargetDataFn, DropTargetContainerDirective } from '@progress/kendo-angular-utils'; import * as i0 from "@angular/core"; /** * Represents the Kendo UI TreeList component for Angular. * * @example * ```html * * ``` * */ export declare class TreeListComponent implements AfterContentInit, AfterViewInit, OnDestroy, OnChanges, OnInit { private supportService; wrapper: ElementRef; private changeNotification; private editService; private filterService; private pdfService; private responsiveService; private renderer; private excelService; private ngZone; private scrollSyncService; private domEvents; private columnResizingService; private changeDetectorRef; private columnReorderService; private columnInfoService; private navigationService; private sortService; private scrollRequestService; private expandStateService; private optionChanges; selectionService: SelectionService; private localization; private ctx; private rowReorderService; /** * An optional accessible description of the component. */ ariaLabel: string; /** * Sets the data of the TreeList. If an array is provided, the TreeList automatically gets the total count * ([more information and example]({% slug databinding_treelist %})). */ set data(value: Array | TreeListDataResult | Observable | null | undefined); get data(): Array | TreeListDataResult | Observable | null | undefined; /** * Defines the page size used by the TreeList when [paging]({% slug paging_treelist %}) is enabled. * * @default 10 */ pageSize: 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. */ height: number; /** * Represent the actual height of each TreeList row (`tr`) element in the DOM. * Required by the [virtual scrolling functionality]({% slug scrollmmodes_treelist %}). * Set the `rowHeight` option to the exact pixels as the height of the `tr` element appears in the DOM. */ rowHeight: number; /** * Defines the number of records to be skipped by the pager. * Required by the [paging]({% slug paging_treelist %}) functionality. */ get skip(): number | null | undefined; set skip(value: number | null | undefined); /** * Defines the scroll mode used by the TreeList. * @default 'scrollable' */ scrollable: ScrollMode; /** * The descriptors by which the data will be sorted ([see example]({% slug sorting_treelist %})). */ set sort(value: Array | null | undefined); get sort(): Array | null | undefined; /** * 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. * */ trackBy: TrackByFunction; /** * The descriptor by which the data will be filtered ([see examples]({% slug filtering_treelist %})). */ filter: CompositeFilterDescriptor | null | undefined; /** * If set to `true`, the treelist will render only the columns in the current viewport. * @default false */ virtualColumns: boolean; /** * @hidden */ get showTopToolbar(): boolean; /** * @hidden */ get showBottomToolbar(): boolean; /** * @hidden */ get isLocked(): boolean; /** * @hidden */ get showPager(): boolean; get marqueeSelection(): boolean; /** * Enables the [filtering]({% slug filtering_treelist %}) of the TreeList columns that have their `field` option set. */ filterable: FilterableSettings; /** * Enables the [sorting]({% slug sorting_treelist %}) of the TreeList columns that have their `field` option set. */ sortable: SortSettings; /** * Configures the pager of the TreeList ([see example]({% slug paging_treelist %})). * */ pageable: PagerSettings | 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. * @default false */ navigable: boolean; /** * @hidden * * An alias for `navigable` for users who migrate from Kendo UI for jQuery. */ set navigatable(value: boolean); /** * @hidden */ get navigatable(): 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]({% slug resizing_columns_treelist %}). * * @default false */ autoSize: boolean; /** * Defines a function that is executed for every data row in the component. * */ set rowClass(fn: RowClassFn); get rowClass(): RowClassFn; /** * Returns the currently focused cell (if any). */ get activeCell(): NavigationCell; /** * Returns the currently focused row (if any). */ get activeRow(): NavigationRow; /** * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells * ([see example]({% slug resizing_columns_treelist %})). * * @default false */ resizable: boolean; /** * If set to `true`, the user can reorder columns by dragging their header cells * ([see example]({% slug reordering_columns_treelist %})). * * @default false */ reorderable: boolean; /** * Specifies if the loading indicator of the TreeList will be displayed ([see example]({% slug databinding_treelist %})). * * @default false */ loading: boolean; /** * Specifies if the column menu of the columns will be displayed ([see example]({% slug columnmenu_treelist %})). * * @default false */ columnMenu: boolean | ColumnMenuSettings; /** * 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]({% slug filtering_treelist %}#toc-filter-row). * * @default false */ hideHeader: boolean; /** * The name of the field which contains the unique identifier of the node. * * @default "id" */ set idField(value: string); /** * Specified the treelist selection settings */ set selectable(value: boolean | SelectableSettings); /** * Provides a callback that determines if the given row or cell is selected. */ set isSelected(value: IsSelectedFn); /** * Enables the [row reordering]({% slug treelist_row_reordering %}) of the TreeList. * @default false */ set rowReorderable(value: boolean); get rowReorderable(): boolean; /** * Fires when the TreeList selection is changed. */ selectionChange: EventEmitter; /** * Fires when the TreeList filter is modified through the UI. * You have to handle the event yourself and filter the data. */ filterChange: EventEmitter; /** * Fires when the page of the TreeList is changed ([see example]({% slug paging_treelist %})). * You have to handle the event yourself and page the data. */ pageChange: EventEmitter; /** * Fires when the sorting of the TreeList is changed ([see example]({% slug sorting_treelist %})). * You have to handle the event yourself and sort the data. */ sortChange: EventEmitter>; /** * Fires when the data state of the TreeList is changed. */ dataStateChange: EventEmitter; /** * Fires when the user clicks the **Edit** command button to edit a row * ([see example]({% slug editing_template_forms_treelist %}#toc-editing-records)). */ edit: EventEmitter; /** * Fires when the user clicks the **Cancel** command button to close a row * ([see example]({% slug editing_template_forms_treelist %}#toc-cancelling-editing)). */ cancel: EventEmitter; /** * Fires when the user clicks the **Save** command button to save changes in a row * ([see example]({% slug editing_template_forms_treelist %}#toc-saving-records)). */ save: EventEmitter; /** * Fires when the user clicks the **Remove** command button to remove a row * ([see example]({% slug editing_template_forms_treelist %}#toc-removing-records)). */ remove: EventEmitter; /** * Fires when the user clicks the **Add** command button to add a new row * ([see example]({% slug editing_template_forms_treelist %}#toc-adding-records)). */ add: EventEmitter; /** * Fires when the user leaves an edited cell ([see example]({% slug editing_incell_treelist %}#toc-basic-concepts)). */ cellClose: EventEmitter; /** * Fires when the user clicks a cell ([see example]({% slug editing_incell_treelist %}#toc-basic-concepts)). */ cellClick: EventEmitter; /** * Fires when the user clicks the **Export to PDF** command button. */ pdfExport: EventEmitter; /** * Fires when the user clicks the **Export to Excel** command button. */ excelExport: EventEmitter; /** * Fires when the user completes the resizing of the column. */ columnResize: EventEmitter>; /** * Fires when the user completes the reordering of the column. */ columnReorder: EventEmitter; /** * Fires when the user changes the visibility of the columns from the column menu or column chooser. */ columnVisibilityChange: EventEmitter; /** * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns. */ columnLockedChange: EventEmitter; /** * Fires when the user scrolls to the last record on the page and enables endless scrolling * ([see example]({% slug scrollmmodes_treelist %}#toc-endless-scrolling)). * You have to handle the event yourself and page the data. */ scrollBottom: EventEmitter; /** * 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. */ contentScroll: EventEmitter; /** * Fires when an item is expanded. */ expandEvent: EventEmitter; /** * Fires when an item is collapsed. */ collapseEvent: EventEmitter; /** * @hidden * * Emits when the expand or collapse events are fired. * Used by the expand directive and the Gantt component. */ expandStateChange: EventEmitter; /** * Fires when the user drops the dragged row and reordering is performed. * Emits the [RowReorderEvent]({% slug api_treelist_rowreorderevent %}). */ rowReorder: EventEmitter; /** * @hidden */ columnOrderChange: EventEmitter; /** * @hidden */ set columnsRef(columns: QueryList); get columnsRef(): QueryList; /** * A query list of all declared columns. */ columns: QueryList; get dir(): string; hostClasses: boolean; get lockedClasses(): boolean; get virtualClasses(): boolean; get noScrollbarClass(): boolean; noRecordsTemplateChildren: QueryList; get noRecordsTemplate(): NoRecordsTemplateDirective; set noRecordsTemplate(customNoRecordsTemplate: NoRecordsTemplateDirective); pagerTemplateChildren: QueryList; get pagerTemplate(): PagerTemplateDirective; set pagerTemplate(customPagerTemplate: PagerTemplateDirective); toolbarTemplateChildren: QueryList; get toolbarTemplate(): ToolbarTemplateDirective; set toolbarTemplate(customToolbarTemplate: ToolbarTemplateDirective); columnMenuTemplates: QueryList; lockedHeader: any; header: any; footer: QueryList; ariaRoot: ElementRef; dragTargetContainer: DragTargetContainerDirective; dropTargetContainer: DropTargetContainerDirective; get scrollbarWidth(): number; get headerPadding(): any; columnMenuOptions: any; columnList: ColumnList; columnsContainer: ColumnsContainer; get showLoading(): boolean; get showFooter(): boolean; get ariaRowCount(): number; get ariaColCount(): number; get ariaMultiselectable(): any; get navigation(): NavigationService; get isVirtual(): boolean; get isScrollable(): boolean; get visibleColumns(): QueryList; get lockedColumns(): QueryList; get nonLockedColumns(): QueryList; get lockedLeafColumns(): QueryList; get nonLockedLeafColumns(): QueryList; get leafColumns(): QueryList; get totalColumnLevels(): number; get headerColumns(): any; get headerLeafColumns(): any; get lockedWidth(): number; get nonLockedWidth(): number; get columnMenuTemplate(): TemplateRef; get totalCount(): number; /** * Gets or sets the callback function that retrieves the child nodes for a particular node. */ set fetchChildren(value: (node: any) => Observable | any[]); get fetchChildren(): (node: any) => Observable | any[]; /** * Gets or sets the callback function that indicates if a particular node has child nodes. */ set hasChildren(value: (node: any) => boolean); get hasChildren(): (node: any) => boolean; /** * Sets the callback function that indicates if a particular item is expanded. */ set isExpanded(value: (node: any) => boolean); idGetter: any; localEditService: any; view: ViewCollection; expandIcons: boolean; ariaRootId: string; private dataChanged; private loadedData; private _fetchChildren; private _hasChildren; private subscriptions; private dataLoadedSubscription; private focusElementSubscription; private rowReorderSubscription; private detachElementEventHandlers; private rtl; private shouldGenerateColumns; private direction; private _data; private _sort; private _skip; private _columnsRef; private cachedWindowWidth; private _customNoRecordsTemplate; private _customPagerTemplate; private _customToolbarTemplate; private leafViewportColumns; private viewportColumns; private pageChangeTimeout; private _rowReorderable; constructor(supportService: BrowserSupportService, wrapper: ElementRef, changeNotification: ChangeNotificationService, editService: EditService, filterService: FilterService, pdfService: PDFService, responsiveService: ResponsiveService, renderer: Renderer2, excelService: ExcelService, ngZone: NgZone, scrollSyncService: ScrollSyncService, domEvents: DomEventsService, columnResizingService: ColumnResizingService, changeDetectorRef: ChangeDetectorRef, columnReorderService: ColumnReorderService, columnInfoService: ColumnInfoService, navigationService: NavigationService, sortService: SortService, scrollRequestService: ScrollRequestService, expandStateService: ExpandStateService, optionChanges: OptionChangesService, selectionService: SelectionService, localization: LocalizationService, ctx: ContextService, rowReorderService: RowReorderService); /** * @hidden */ viewFieldAccessor(): any; /** * @hidden */ onDataChange(): void; ngOnChanges(changes: { [propertyName: string]: SimpleChange; }): void; ngAfterViewInit(): void; ngAfterContentChecked(): void; ngAfterContentInit(): void; ngOnInit(): void; ngOnDestroy(): void; /** * @hidden */ handleReorderEvents(ev: any, evType: string): void; /** * @hidden */ getDefaultSelectors(type: string): string; /** * @hidden */ treeListData: DragTargetDataFn; /** * @hidden */ getHintSettings(setting: string): any; /** * @hidden */ get hintText(): string; /** * @hidden */ attachScrollSync(): void; /** * Switches the specified table row in the edit mode ([see example]({% slug editing_template_forms_treelist %}#toc-editing-records)). * * @param dataItem - The data item that will be edited. * @param group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) * that describes the edit form. * @param options - Additional options. Use `skipFocus` to determine if the row's edit element should be focused. Defaults to `false`. */ editRow(dataItem: any, group?: any, options?: { [skipFocus: string]: boolean; }): void; /** * Closes the editor for a given row ([see example]({% slug editing_template_forms_treelist %}#toc-cancelling-editing)). * * @param {any} dataItem - The dataItem that will be switched out of the edit mode. * @param {boolean} isNew - Indicates whether the dataItem is new. */ closeRow(dataItem: any, isNew: boolean): void; /** * Creates a new row editor ([see example]({% slug editing_template_forms_treelist %}#toc-adding-records)). * * @param {FormGroup} group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes * the edit form. If called with a data item, it will build the `FormGroup` from the data item fields. */ addRow(group: any, parent?: any): void; /** * Puts the cell that is specified by the table row and column in edit mode. * * @param {any} dataItem - The data item that will be edited. * @param {number|string|any} column - The leaf column index, or the field name or the column instance that should be edited. * @param {FormGroup} group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) * that describes the edit form. */ editCell(dataItem: any, column: number | string | any, group?: any): void; /** * Closes the current cell in edit mode and fires * the [`cellClose`]({% slug api_treelist_treelistcomponent %}#toc-cellclose) event. * * @return {boolean} Indicates whether the edited cell was closed. * A `false` value indicates that the * [`cellClose`]({% slug api_treelist_treelistcomponent %}#toc-cellclose) event was prevented. */ closeCell(): boolean; /** * Closes the current cell in edit mode. */ cancelCell(): void; /** * Returns a flag which indicates if a row or a cell is currently edited. * * @return {boolean} A flag which indicates if a row or a cell is currently edited. */ isEditing(): boolean; /** * Returns a flag which indicates if a cell is currently edited. * * @return {boolean} A flag which indicates if a cell is currently being edited. */ isEditingCell(): boolean; /** * Initiates the PDF export ([see example]({% slug pdfexport_treelist %})). */ saveAsPDF(): void; /** * Exports the TreeList element to a Drawing [`Group`]({% slug api_kendo-drawing_group %}) by using the `kendo-treelist-pdf` component options. * ([see example]({% slug pdfexport_treelist %}#toc-exporting-multiple-treelists-to-the-same-pdf)). * * @return {Promise} A promise that will be resolved with the Drawing `Group`. */ drawPDF(): Promise; /** * Initiates the Excel export ([see example]({% slug excelexport_treelist %})). */ saveAsExcel(): void; /** * 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. [See example](slug:resizing_columns_treelist#toc-auto-fitting-the-content). * */ autoFitColumn(column: ColumnBase): void; /** * 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`). * [See example](slug:resizing_columns_treelist#toc-auto-fitting-the-content). */ autoFitColumns(columns?: Array | QueryList): void; /** * @hidden */ notifyPageChange(source: string, event: any): void; /** * @hidden */ messageFor(token: string): string; /** * @hidden */ notifyScrollBottom(): void; /** * @hidden */ focusEditElement(containerSelector: () => string): void; /** * Focuses the last active or the first cell of the TreeList. * * @returns {NavigationCell} The focused cell. */ focus(): NavigationCell; /** * 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 will be updated. * If the row is not present on the current page, the method will have no effect. * * @param rowIndex - The logical row index to focus. The top header row has an index 0. * @param colIndex - The column index to focus. * @returns {NavigationCell} The focused cell. * */ focusCell(rowIndex: number, colIndex: number): NavigationCell; /** * Focuses the next cell, optionally wrapping to the next row. * * @param wrap - 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`. */ focusNextCell(wrap?: boolean): NavigationCell; /** * Focuses the previous cell. Optionally wraps to the previous row. * * @param wrap - 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`. */ focusPrevCell(wrap?: boolean): NavigationCell; /** * Scrolls to the specified row and column */ scrollTo(request: ScrollRequest): void; /** * 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. * * @param {ColumnBase} source - The column whose position will be changed. * @param {number} destIndex - The new position of the column. * @param {ColumnReorderConfig} options - Additional options. * */ reorderColumn(source: ColumnBase, destIndex: number, options?: ColumnReorderConfig): void; /** * Clears the already loaded children for the dataItem so that the TreeList will fetch them again the next time it is rendered. */ reload(dataItem: any, reloadChildren?: boolean): void; /** * 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](#toc-isexpanded) and * [isSelected](#toc-isSelected) callbacks. */ updateView(): void; /** * Expands the row for the specified dataItem. */ expand(dataItem: any): void; /** * Collapses the row for the specified dataItem. */ collapse(dataItem: any): void; /** * @hidden */ private reorder; private updateColumnIndices; private updateIndicesForLevel; private allColumnsForLevel; private setEditFocus; private columnInstance; private verifySettings; private autoGenerateColumns; private attachStateChangesEmitter; private attachEditHandlers; private emitCRUDEvent; private attachDomEventHandlers; private attachElementEventHandlers; private matchesMedia; private resizeCheck; private emitPDFExportEvent; private syncHeaderHeight; private columnsContainerChange; private handleColumnResize; private notifyResize; private assertNavigable; private _rowClass; private navigationMetadata; private updateNavigationMetadata; private applyAutoSize; private onColumnRangeChange; private dataLoaded; private unsubscribeDataLoaded; private loadColumns; private notifyReorderContainers; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }