@progress/kendo-angular-treelist 17.0.0-develop.9 → 17.0.1-develop.1

package/{esm2020 → esm2022}/treelist.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, QueryList, ViewChild, isDevMode, NgZone, ViewChildren, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, forwardRef } from '@angular/core';
-import { NgIf } from '@angular/common';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Subscription, merge, isObservable } from 'rxjs';
 import { map, tap, take, filter, switchMap, takeUntil } from 'rxjs/operators';
@@ -27,8 +27,6 @@ import { NoRecordsTemplateDirective } from './rendering/no-records-template.dire
 import { ColumnBase } from './columns/column-base';
 import { syncRowsHeight } from './layout/row-sync';
 import { FilterService } from './filtering/filter.service';
-import { PagerTemplateDirective } from './pager/pager-template.directive';
-import { PagerContextService } from "./pager/pager-context.service";
 import { PDFService } from './pdf/pdf.service';
 import { PDFExportEvent } from './pdf/pdf-export-event';
 import { SuspendService } from './scrolling/suspend.service';
@@ -70,7 +68,6 @@ import { DataBoundTreeComponent } from './binding-directives/data-bound-tree-com
 import { ExpandableTreeComponent } from './expand-state/expandable-tree-component';
 import { ContextService } from './common/provider.service';
 import { RowReorderService } from './row-reordering/row-reorder.service';
-import { PagerComponent } from './pager/pager.component';
 import { LoadingComponent } from './rendering/common/loading.component';
 import { TableBodyComponent } from './rendering/table-body.component';
 import { MarqueeDirective } from './selection/marquee.directive';
@@ -81,6 +78,8 @@ import { ColGroupComponent } from './rendering/common/col-group.component';
 import { TableDirective } from './column-resizing/table.directive';
 import { ToolbarComponent } from './rendering/toolbar/toolbar.component';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
+import { KENDO_PAGER, PagerContextService, PagerNavigationService, PagerTemplateDirective } from '@progress/kendo-angular-pager';
+import { normalize } from './common/pager-settings';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./data/change-notification.service";
@@ -103,6 +102,7 @@ import * as i18 from "./selection/selection.service";
 import * as i19 from "@progress/kendo-angular-l10n";
 import * as i20 from "./common/provider.service";
 import * as i21 from "./row-reordering/row-reorder.service";
+import * as i22 from "@progress/kendo-angular-pager";
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -127,349 +127,35 @@ const isInEditedCell = (element, treelistElement) => closest(element, matchesCla
  *
  */
 export class TreeListComponent {
-    constructor(supportService, wrapper, changeNotification, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, expandStateService, optionChanges, selectionService, localization, ctx, rowReorderService) {
-        this.supportService = supportService;
-        this.wrapper = wrapper;
-        this.changeNotification = changeNotification;
-        this.editService = editService;
-        this.filterService = filterService;
-        this.pdfService = pdfService;
-        this.responsiveService = responsiveService;
-        this.renderer = renderer;
-        this.excelService = excelService;
-        this.ngZone = ngZone;
-        this.scrollSyncService = scrollSyncService;
-        this.domEvents = domEvents;
-        this.columnResizingService = columnResizingService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.columnReorderService = columnReorderService;
-        this.columnInfoService = columnInfoService;
-        this.navigationService = navigationService;
-        this.sortService = sortService;
-        this.scrollRequestService = scrollRequestService;
-        this.expandStateService = expandStateService;
-        this.optionChanges = optionChanges;
-        this.selectionService = selectionService;
-        this.localization = localization;
-        this.ctx = ctx;
-        this.rowReorderService = rowReorderService;
-        /**
-         * Defines the page size used by the TreeList when [paging]({% slug paging_treelist %}) is enabled.
-         *
-         * @default 10
-         */
-        this.pageSize = 10;
-        /**
-         * Defines the scroll mode used by the TreeList.
-         * @default 'scrollable'
-         */
-        this.scrollable = 'scrollable';
-        /**
-         * 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.
-         *
-         */
-        this.trackBy = defaultTrackBy;
-        /**
-         * If set to `true`, the treelist will render only the columns in the current viewport.
-         * @default false
-         */
-        this.virtualColumns = false;
-        /**
-         * Enables the [filtering]({% slug filtering_treelist %}) of the TreeList columns that have their `field` option set.
-         */
-        this.filterable = false;
-        /**
-         * Enables the [sorting]({% slug sorting_treelist %}) of the TreeList columns that have their `field` option set.
-         */
-        this.sortable = false;
-        /**
-         * Configures the pager of the TreeList ([see example]({% slug paging_treelist %})).
-         *
-         */
-        this.pageable = false;
-        /**
-         * 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
-         */
-        this.navigable = false;
-        /**
-         * 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
-         */
-        this.autoSize = false;
-        /**
-         * 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
-         */
-        this.resizable = false;
-        /**
-         * If set to `true`, the user can reorder columns by dragging their header cells
-         * ([see example]({% slug reordering_columns_treelist %})).
-         *
-         * @default false
-         */
-        this.reorderable = false;
-        /**
-         * Specifies if the loading indicator of the TreeList will be displayed ([see example]({% slug databinding_treelist %})).
-         *
-         * @default false
-         */
-        this.loading = false;
-        /**
-         * Specifies if the column menu of the columns will be displayed ([see example]({% slug columnmenu_treelist %})).
-         *
-         * @default false
-         */
-        this.columnMenu = false;
-        /**
-         * 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:filter_row_treelist).
-         *
-         * @default false
-         */
-        this.hideHeader = false;
-        /**
-         * Fires when the TreeList selection is changed.
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Fires when the TreeList filter is modified through the UI.
-         * You have to handle the event yourself and filter the data.
-         */
-        this.filterChange = new 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.
-         */
-        this.pageChange = new 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.
-         */
-        this.sortChange = new EventEmitter();
-        /**
-         * Fires when the data state of the TreeList is changed.
-         */
-        this.dataStateChange = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Edit** command button to edit a row
-         * ([see example]({% slug editing_template_forms_treelist %}#toc-editing-records)).
-         */
-        this.edit = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Cancel** command button to close a row
-         * ([see example]({% slug editing_template_forms_treelist %}#toc-cancelling-editing)).
-         */
-        this.cancel = new 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)).
-         */
-        this.save = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Remove** command button to remove a row
-         * ([see example]({% slug editing_template_forms_treelist %}#toc-removing-records)).
-         */
-        this.remove = new 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)).
-         */
-        this.add = new EventEmitter();
-        /**
-         * Fires when the user leaves an edited cell ([see example]({% slug editing_incell_treelist %}#toc-basic-concepts)).
-         */
-        this.cellClose = new EventEmitter();
-        /**
-         * Fires when the user clicks a cell ([see example]({% slug editing_incell_treelist %}#toc-basic-concepts)).
-         */
-        this.cellClick = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Export to PDF** command button.
-         */
-        this.pdfExport = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Export to Excel** command button.
-         */
-        this.excelExport = new EventEmitter();
-        /**
-         * Fires when the user completes the resizing of the column.
-         */
-        this.columnResize = new EventEmitter();
-        /**
-         * Fires when the user completes the reordering of the column.
-         */
-        this.columnReorder = new EventEmitter();
-        /**
-         * Fires when the user changes the visibility of the columns from the column menu or column chooser.
-         */
-        this.columnVisibilityChange = new EventEmitter();
-        /**
-         * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
-         */
-        this.columnLockedChange = new 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.
-         */
-        this.scrollBottom = new 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.
-         */
-        this.contentScroll = new EventEmitter();
-        /**
-         * Fires when an item is expanded.
-         */
-        this.expandEvent = new EventEmitter();
-        /**
-         * Fires when an item is collapsed.
-         */
-        this.collapseEvent = new EventEmitter();
-        /**
-         * @hidden
-         *
-         * Emits when the expand or collapse events are fired.
-         * Used by the expand directive and the Gantt component.
-         */
-        this.expandStateChange = new EventEmitter();
-        /**
-         * Fires when the user drops the dragged row and reordering is performed.
-         * Emits the [RowReorderEvent]({% slug api_treelist_rowreorderevent %}).
-         */
-        this.rowReorder = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.columnOrderChange = new EventEmitter();
-        /**
-         * A query list of all declared columns.
-         */
-        this.columns = new QueryList();
-        this.hostClasses = true;
-        this.footer = new QueryList();
-        this.columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
-            if (!isUniversal()) {
-                column.matchesMedia = this.matchesMedia(column);
-            }
-            return column.isVisible;
-        }));
-        this.idGetter = getter(undefined);
-        this.localEditService = new LocalEditService();
-        this.view = new ViewCollection(this.viewFieldAccessor.bind(this), this.expandStateService, this.editService, this.selectionService);
-        this.ariaRootId = `k-${guid()}`;
-        this.dataChanged = false;
-        this._hasChildren = (() => false);
-        this.subscriptions = new Subscription();
-        this.rtl = false;
-        this.shouldGenerateColumns = true;
-        this._data = [];
-        this._sort = new Array();
-        this._skip = 0;
-        this.cachedWindowWidth = 0;
-        this._rowReorderable = false;
-        /**
-         * @hidden
-         */
-        this.treeListData = () => { return this.view; };
-        this._rowClass = () => null;
-        validatePackage(packageMetadata);
-        this.subscriptions.add(localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        }));
-        this.selectionService.init(this);
-        this.ctx.treelist = this;
-        this.subscriptions.add(this.selectionService.changes.subscribe((args) => {
-            if (hasObservers(this.selectionChange)) {
-                this.ngZone.run(() => {
-                    args.sender = this;
-                    this.selectionChange.emit(args);
-                    this.selectionService.updateSelectedState();
-                    this.changeDetectorRef.markForCheck();
-                });
-            }
-        }));
-        this.columnInfoService.init(this.columnsContainer, () => this.columnList);
-        this.subscriptions.add(this.columnInfoService.visibilityChange.subscribe((changed) => {
-            this.columnVisibilityChange.emit(new ColumnVisibilityChangeEvent(changed));
-            this.changeDetectorRef.markForCheck();
-        }));
-        this.subscriptions.add(this.columnInfoService.lockedChange.subscribe((changed) => {
-            this.columnLockedChange.emit(new ColumnLockedChangeEvent(changed));
-            this.changeDetectorRef.markForCheck();
-        }));
-        this.subscriptions.add(merge(this.optionChanges.columns, this.optionChanges.options).subscribe(() => {
-            this.changeDetectorRef.markForCheck();
-        }));
-        this.subscriptions.add(this.filterService.changes.subscribe(x => {
-            this.filterChange.emit(x);
-        }));
-        this.subscriptions.add(this.sortService.changes.subscribe(x => {
-            this.sortChange.emit(x);
-        }));
-        this.attachStateChangesEmitter();
-        this.attachEditHandlers();
-        this.attachDomEventHandlers();
-        this.subscriptions.add(this.pdfService.exportClick.subscribe(this.emitPDFExportEvent.bind(this)));
-        this.subscriptions.add(this.excelService.exportClick.subscribe(this.saveAsExcel.bind(this)));
-        this.subscriptions.add(this.excelService.loadingChange.subscribe(() => {
-            this.changeDetectorRef.detectChanges();
-        }));
-        this.columnsContainerChange();
-        this.handleColumnResize();
-        this.columnList = new ColumnList(this.columns);
-        this.subscriptions.add(this.columnReorderService
-            .changes.subscribe(this.reorder.bind(this)));
-        this.subscriptions.add(this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this)));
-        this.subscriptions.add(this.expandStateService.changes.subscribe((args) => {
-            if (args.expand) {
-                this.expandEvent.emit(args);
-            }
-            else {
-                this.collapseEvent.emit(args);
-            }
-            if (!args.isDefaultPrevented()) {
-                this.changeDetectorRef.markForCheck();
-                this.view.clear();
-                this.expandStateChange.emit(args);
-            }
-            if (this.rowReorderable) {
-                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                    this.notifyReorderContainers();
-                });
-            }
-        }));
-        this.subscriptions.add(this.view.childrenLoaded.subscribe(() => {
-            this.changeDetectorRef.detectChanges();
-        }));
-        this.subscriptions.add(this.view.resetPage.subscribe(() => {
-            if (this.skip > 0 && hasObservers(this.pageChange)) {
-                // don't think there is a way to avoid this
-                // every callback in which the view can be computed is already passed the change detection
-                // computing the current page in advance also does not seem feasible for such a rare case
-                this.pageChangeTimeout = setTimeout(() => {
-                    this.pageChange.emit({ skip: 0, take: this.pageSize });
-                }, 0);
-            }
-            this.skip = 0;
-        }));
-        this.dataLoaded = this.dataLoaded.bind(this);
-        this.editService.idGetter = this.idGetter;
-    }
+    supportService;
+    wrapper;
+    changeNotification;
+    editService;
+    filterService;
+    pdfService;
+    responsiveService;
+    renderer;
+    excelService;
+    ngZone;
+    scrollSyncService;
+    domEvents;
+    columnResizingService;
+    changeDetectorRef;
+    columnReorderService;
+    columnInfoService;
+    navigationService;
+    sortService;
+    scrollRequestService;
+    expandStateService;
+    optionChanges;
+    selectionService;
+    localization;
+    ctx;
+    rowReorderService;
+    /**
+     * An optional accessible description of the component.
+     */
+    ariaLabel;
     /**
      * 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 %})).
@@ -489,6 +175,24 @@ export class TreeListComponent {
     get data() {
         return this.loadedData;
     }
+    /**
+     * Defines the page size used by the TreeList when [paging]({% slug paging_treelist %}) is enabled.
+     *
+     * @default 10
+     */
+    pageSize = 10;
+    /**
+     * 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;
+    /**
+     * 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;
     /**
      * Defines the number of records to be skipped by the pager.
      * Required by the [paging]({% slug paging_treelist %}) functionality.
@@ -502,6 +206,11 @@ export class TreeListComponent {
             this.view.clear();
         }
     }
+    /**
+     * Defines the scroll mode used by the TreeList.
+     * @default 'scrollable'
+     */
+    scrollable = 'scrollable';
     /**
      * The descriptors by which the data will be sorted ([see example]({% slug sorting_treelist %})).
      */
@@ -513,6 +222,23 @@ export class TreeListComponent {
     get sort() {
         return this._sort;
     }
+    /**
+     * 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 = defaultTrackBy;
+    /**
+     * The descriptor by which the data will be filtered ([see examples]({% slug filtering_treelist %})).
+     */
+    filter;
+    /**
+     * If set to `true`, the treelist will render only the columns in the current viewport.
+     * @default false
+     */
+    virtualColumns = false;
     /**
      * @hidden
      */
@@ -540,6 +266,28 @@ export class TreeListComponent {
     get marqueeSelection() {
         return this.selectionService.enableMarquee;
     }
+    /**
+     * Enables the [filtering]({% slug filtering_treelist %}) of the TreeList columns that have their `field` option set.
+     */
+    filterable = false;
+    /**
+     * Enables the [sorting]({% slug sorting_treelist %}) of the TreeList columns that have their `field` option set.
+     */
+    sortable = false;
+    /**
+     * Configures the pager of the TreeList ([see example]({% slug paging_treelist %})).
+     *
+     */
+    pageable = false;
+    get normalizedPageableSettings() {
+        return normalize(this.pageable);
+    }
+    /**
+     * 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 = false;
     /**
      * @hidden
      *
@@ -554,6 +302,16 @@ export class TreeListComponent {
     get navigatable() {
         return this.navigable;
     }
+    /**
+     * 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 = false;
     /**
      * Defines a function that is executed for every data row in the component.
      *
@@ -579,6 +337,40 @@ export class TreeListComponent {
     get activeRow() {
         return this.navigationService.activeRow;
     }
+    /**
+     * 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 = false;
+    /**
+     * If set to `true`, the user can reorder columns by dragging their header cells
+     * ([see example]({% slug reordering_columns_treelist %})).
+     *
+     * @default false
+     */
+    reorderable = false;
+    /**
+     * Specifies if the loading indicator of the TreeList will be displayed ([see example]({% slug databinding_treelist %})).
+     *
+     * @default false
+     */
+    loading = false;
+    /**
+     * Specifies if the column menu of the columns will be displayed ([see example]({% slug columnmenu_treelist %})).
+     *
+     * @default false
+     */
+    columnMenu = false;
+    /**
+     * 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:filter_row_treelist).
+     *
+     * @default false
+     */
+    hideHeader = false;
     /**
      * The name of the field which contains the unique identifier of the node.
      *
@@ -628,6 +420,121 @@ export class TreeListComponent {
     get rowReorderable() {
         return this._rowReorderable;
     }
+    /**
+     * Fires when the TreeList selection is changed.
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Fires when the TreeList filter is modified through the UI.
+     * You have to handle the event yourself and filter the data.
+     */
+    filterChange = new 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 = new 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 = new EventEmitter();
+    /**
+     * Fires when the data state of the TreeList is changed.
+     */
+    dataStateChange = new 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 = new 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 = new 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 = new 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 = new 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 = new EventEmitter();
+    /**
+     * Fires when the user leaves an edited cell ([see example]({% slug editing_incell_treelist %}#toc-basic-concepts)).
+     */
+    cellClose = new EventEmitter();
+    /**
+     * Fires when the user clicks a cell ([see example]({% slug editing_incell_treelist %}#toc-basic-concepts)).
+     */
+    cellClick = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Export to PDF** command button.
+     */
+    pdfExport = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Export to Excel** command button.
+     */
+    excelExport = new EventEmitter();
+    /**
+     * Fires when the user completes the resizing of the column.
+     */
+    columnResize = new EventEmitter();
+    /**
+     * Fires when the user completes the reordering of the column.
+     */
+    columnReorder = new EventEmitter();
+    /**
+     * Fires when the user changes the visibility of the columns from the column menu or column chooser.
+     */
+    columnVisibilityChange = new EventEmitter();
+    /**
+     * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
+     */
+    columnLockedChange = new 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 = new 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 = new EventEmitter();
+    /**
+     * Fires when an item is expanded.
+     */
+    expandEvent = new EventEmitter();
+    /**
+     * Fires when an item is collapsed.
+     */
+    collapseEvent = new EventEmitter();
+    /**
+     * @hidden
+     *
+     * Emits when the expand or collapse events are fired.
+     * Used by the expand directive and the Gantt component.
+     */
+    expandStateChange = new EventEmitter();
+    /**
+     * Fires when the user drops the dragged row and reordering is performed.
+     * Emits the [RowReorderEvent]({% slug api_treelist_rowreorderevent %}).
+     */
+    rowReorder = new EventEmitter();
+    /**
+     * @hidden
+     */
+    columnOrderChange = new EventEmitter();
     /**
      * @hidden
      */
@@ -641,9 +548,14 @@ export class TreeListComponent {
     get columnsRef() {
         return this._columnsRef;
     }
+    /**
+     * A query list of all declared columns.
+     */
+    columns = new QueryList();
     get dir() {
         return this.direction;
     }
+    hostClasses = true;
     get lockedClasses() {
         return this.lockedLeafColumns.length > 0;
     }
@@ -653,6 +565,7 @@ export class TreeListComponent {
     get noScrollbarClass() {
         return this.scrollbarWidth === 0;
     }
+    noRecordsTemplateChildren;
     get noRecordsTemplate() {
         if (this._customNoRecordsTemplate) {
             return this._customNoRecordsTemplate;
@@ -662,6 +575,7 @@ export class TreeListComponent {
     set noRecordsTemplate(customNoRecordsTemplate) {
         this._customNoRecordsTemplate = customNoRecordsTemplate;
     }
+    pagerTemplateChildren;
     get pagerTemplate() {
         if (this._customPagerTemplate) {
             return this._customPagerTemplate;
@@ -671,6 +585,7 @@ export class TreeListComponent {
     set pagerTemplate(customPagerTemplate) {
         this._customPagerTemplate = customPagerTemplate;
     }
+    toolbarTemplateChildren;
     get toolbarTemplate() {
         if (this._customToolbarTemplate) {
             return this._customToolbarTemplate;
@@ -680,6 +595,13 @@ export class TreeListComponent {
     set toolbarTemplate(customToolbarTemplate) {
         this._customToolbarTemplate = customToolbarTemplate;
     }
+    columnMenuTemplates;
+    lockedHeader;
+    header;
+    footer = new QueryList();
+    ariaRoot;
+    dragTargetContainer;
+    dropTargetContainer;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -692,6 +614,14 @@ export class TreeListComponent {
         const left = this.rtl ? padding : 0;
         return `0 ${right} 0 ${left}`;
     }
+    columnMenuOptions;
+    columnList;
+    columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
+        if (!isUniversal()) {
+            column.matchesMedia = this.matchesMedia(column);
+        }
+        return column.isVisible;
+    }));
     get showLoading() {
         return this.loading || (isObservable(this._data) && !this.loadedData) || this.excelService.loading;
     }
@@ -793,6 +723,146 @@ export class TreeListComponent {
         this.expandStateService.isExpanded = value || defaultExpanded;
         this.expandIcons = Boolean(value);
     }
+    idGetter = getter(undefined);
+    localEditService = new LocalEditService();
+    view;
+    expandIcons;
+    ariaRootId = `k-${guid()}`;
+    dataChanged = false;
+    loadedData;
+    _fetchChildren;
+    _hasChildren = (() => false);
+    subscriptions = new Subscription();
+    dataLoadedSubscription;
+    focusElementSubscription;
+    rowReorderSubscription;
+    detachElementEventHandlers;
+    rtl = false;
+    shouldGenerateColumns = true;
+    direction;
+    _data = [];
+    _sort = new Array();
+    _skip = 0;
+    _columnsRef;
+    cachedWindowWidth = 0;
+    _customNoRecordsTemplate;
+    _customPagerTemplate;
+    _customToolbarTemplate;
+    leafViewportColumns;
+    viewportColumns;
+    pageChangeTimeout;
+    _rowReorderable = false;
+    constructor(supportService, wrapper, changeNotification, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, expandStateService, optionChanges, selectionService, localization, ctx, rowReorderService) {
+        this.supportService = supportService;
+        this.wrapper = wrapper;
+        this.changeNotification = changeNotification;
+        this.editService = editService;
+        this.filterService = filterService;
+        this.pdfService = pdfService;
+        this.responsiveService = responsiveService;
+        this.renderer = renderer;
+        this.excelService = excelService;
+        this.ngZone = ngZone;
+        this.scrollSyncService = scrollSyncService;
+        this.domEvents = domEvents;
+        this.columnResizingService = columnResizingService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.columnReorderService = columnReorderService;
+        this.columnInfoService = columnInfoService;
+        this.navigationService = navigationService;
+        this.sortService = sortService;
+        this.scrollRequestService = scrollRequestService;
+        this.expandStateService = expandStateService;
+        this.optionChanges = optionChanges;
+        this.selectionService = selectionService;
+        this.localization = localization;
+        this.ctx = ctx;
+        this.rowReorderService = rowReorderService;
+        validatePackage(packageMetadata);
+        this.subscriptions.add(localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        }));
+        this.view = new ViewCollection(this.viewFieldAccessor.bind(this), this.expandStateService, this.editService, this.selectionService);
+        this.selectionService.init(this);
+        this.ctx.treelist = this;
+        this.subscriptions.add(this.selectionService.changes.subscribe((args) => {
+            if (hasObservers(this.selectionChange)) {
+                this.ngZone.run(() => {
+                    args.sender = this;
+                    this.selectionChange.emit(args);
+                    this.selectionService.updateSelectedState();
+                    this.changeDetectorRef.markForCheck();
+                });
+            }
+        }));
+        this.columnInfoService.init(this.columnsContainer, () => this.columnList);
+        this.subscriptions.add(this.columnInfoService.visibilityChange.subscribe((changed) => {
+            this.columnVisibilityChange.emit(new ColumnVisibilityChangeEvent(changed));
+            this.changeDetectorRef.markForCheck();
+        }));
+        this.subscriptions.add(this.columnInfoService.lockedChange.subscribe((changed) => {
+            this.columnLockedChange.emit(new ColumnLockedChangeEvent(changed));
+            this.changeDetectorRef.markForCheck();
+        }));
+        this.subscriptions.add(merge(this.optionChanges.columns, this.optionChanges.options).subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        }));
+        this.subscriptions.add(this.filterService.changes.subscribe(x => {
+            this.filterChange.emit(x);
+        }));
+        this.subscriptions.add(this.sortService.changes.subscribe(x => {
+            this.sortChange.emit(x);
+        }));
+        this.attachStateChangesEmitter();
+        this.attachEditHandlers();
+        this.attachDomEventHandlers();
+        this.subscriptions.add(this.pdfService.exportClick.subscribe(this.emitPDFExportEvent.bind(this)));
+        this.subscriptions.add(this.excelService.exportClick.subscribe(this.saveAsExcel.bind(this)));
+        this.subscriptions.add(this.excelService.loadingChange.subscribe(() => {
+            this.changeDetectorRef.detectChanges();
+        }));
+        this.columnsContainerChange();
+        this.handleColumnResize();
+        this.columnList = new ColumnList(this.columns);
+        this.subscriptions.add(this.columnReorderService
+            .changes.subscribe(this.reorder.bind(this)));
+        this.subscriptions.add(this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this)));
+        this.subscriptions.add(this.expandStateService.changes.subscribe((args) => {
+            if (args.expand) {
+                this.expandEvent.emit(args);
+            }
+            else {
+                this.collapseEvent.emit(args);
+            }
+            if (!args.isDefaultPrevented()) {
+                this.changeDetectorRef.markForCheck();
+                this.view.clear();
+                this.expandStateChange.emit(args);
+            }
+            if (this.rowReorderable) {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    this.notifyReorderContainers();
+                });
+            }
+        }));
+        this.subscriptions.add(this.view.childrenLoaded.subscribe(() => {
+            this.changeDetectorRef.detectChanges();
+        }));
+        this.subscriptions.add(this.view.resetPage.subscribe(() => {
+            if (this.skip > 0 && hasObservers(this.pageChange)) {
+                // don't think there is a way to avoid this
+                // every callback in which the view can be computed is already passed the change detection
+                // computing the current page in advance also does not seem feasible for such a rare case
+                this.pageChangeTimeout = setTimeout(() => {
+                    this.pageChange.emit({ skip: 0, take: this.pageSize });
+                }, 0);
+            }
+            this.skip = 0;
+        }));
+        this.dataLoaded = this.dataLoaded.bind(this);
+        this.editService.idGetter = this.idGetter;
+    }
     /**
      * @hidden
      */
@@ -850,6 +920,10 @@ export class TreeListComponent {
         this.updateNavigationMetadata();
         this.applyAutoSize();
         this.subscriptions.add(this.pagerTemplateChildren.changes.subscribe(() => this.changeDetectorRef.markForCheck()));
+        const toolbarComponentWrapper = this.wrapper?.nativeElement?.querySelector('kendo-toolbar');
+        if (toolbarComponentWrapper) {
+            this.renderer.addClass(toolbarComponentWrapper, 'k-grid-toolbar');
+        }
     }
     ngAfterContentChecked() {
         if (this.dataChanged) {
@@ -902,6 +976,10 @@ export class TreeListComponent {
     getDefaultSelectors(type) {
         return this.rowReorderService.defaultSelectors[type];
     }
+    /**
+     * @hidden
+     */
+    treeListData = () => { return this.view; };
     /**
      * @hidden
      */
@@ -1409,6 +1487,10 @@ export class TreeListComponent {
             if ((this.rowHeight) && !this.isVirtual) {
                 throw new Error('Row height setting requires virtual scrolling mode to be enabled.');
             }
+            if (this.wrapper?.nativeElement?.querySelector('kendo-toolbar') && this.toolbarTemplate) {
+                console.warn(`Defining both a toolbar template and a ToolBarComponent within the TreeList is not supported.
+                    Please use either the ToolBarComponent or a custom template.`);
+            }
             validateColumnsField(this.columnList);
         }
     }
@@ -1617,6 +1699,7 @@ export class TreeListComponent {
             throw new Error('The TreeList should be configured as [navigable]="true" to control focus');
         }
     }
+    _rowClass = () => null;
     navigationMetadata() {
         const isVirtual = this.isVirtual;
         const filterRowOffset = hasFilterRow(this.filterable) ? 1 : 0;
@@ -1700,54 +1783,53 @@ export class TreeListComponent {
         this.dragTargetContainer?.notify();
         this.dropTargetContainer?.notify();
     }
-}
-TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeListComponent, deps: [{ token: i1.BrowserSupportService }, { token: i0.ElementRef }, { token: i2.ChangeNotificationService }, { token: i3.EditService }, { token: i4.FilterService }, { token: i5.PDFService }, { token: i6.ResponsiveService }, { token: i0.Renderer2 }, { token: i7.ExcelService }, { token: i0.NgZone }, { token: i8.ScrollSyncService }, { token: i9.DomEventsService }, { token: i10.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i11.ColumnReorderService }, { token: i12.ColumnInfoService }, { token: i13.NavigationService }, { token: i14.SortService }, { token: i15.ScrollRequestService }, { token: i16.ExpandStateService }, { token: i17.OptionChangesService }, { token: i18.SelectionService }, { token: i19.LocalizationService }, { token: i20.ContextService }, { token: i21.RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
-TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TreeListComponent, isStandalone: true, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", rowReorderable: "rowReorderable", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange", rowReorder: "rowReorder" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-md": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
-        BrowserSupportService,
-        LocalizationService,
-        ColumnInfoService,
-        ChangeNotificationService,
-        EditService,
-        PDFService,
-        SuspendService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.treelist'
-        },
-        FilterService,
-        ResponsiveService,
-        PagerContextService,
-        ExcelService,
-        ScrollSyncService,
-        ResizeService,
-        DomEventsService,
-        ColumnResizingService,
-        SinglePopupService,
-        DragAndDropService,
-        DragHintService,
-        DropCueService,
-        ColumnReorderService,
-        NavigationService,
-        FocusRoot,
-        IdService,
-        ScrollRequestService,
-        SortService,
-        ExpandStateService,
-        OptionChangesService,
-        SelectionService,
-        {
-            provide: DataBoundTreeComponent,
-            useExisting: forwardRef(() => TreeListComponent)
-        },
-        {
-            provide: ExpandableTreeComponent,
-            useExisting: forwardRef(() => TreeListComponent)
-        },
-        ContextService,
-        RowReorderService
-    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoTreeList"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListComponent, deps: [{ token: i1.BrowserSupportService }, { token: i0.ElementRef }, { token: i2.ChangeNotificationService }, { token: i3.EditService }, { token: i4.FilterService }, { token: i5.PDFService }, { token: i6.ResponsiveService }, { token: i0.Renderer2 }, { token: i7.ExcelService }, { token: i0.NgZone }, { token: i8.ScrollSyncService }, { token: i9.DomEventsService }, { token: i10.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i11.ColumnReorderService }, { token: i12.ColumnInfoService }, { token: i13.NavigationService }, { token: i14.SortService }, { token: i15.ScrollRequestService }, { token: i16.ExpandStateService }, { token: i17.OptionChangesService }, { token: i18.SelectionService }, { token: i19.LocalizationService }, { token: i20.ContextService }, { token: i21.RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeListComponent, isStandalone: true, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", rowReorderable: "rowReorderable", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange", rowReorder: "rowReorder" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-md": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+            BrowserSupportService,
+            LocalizationService,
+            ColumnInfoService,
+            ChangeNotificationService,
+            EditService,
+            PDFService,
+            SuspendService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.treelist'
+            },
+            FilterService,
+            ResponsiveService,
+            PagerContextService,
+            PagerNavigationService,
+            ExcelService,
+            ScrollSyncService,
+            ResizeService,
+            DomEventsService,
+            ColumnResizingService,
+            SinglePopupService,
+            DragAndDropService,
+            DragHintService,
+            DropCueService,
+            ColumnReorderService,
+            NavigationService,
+            FocusRoot,
+            IdService,
+            ScrollRequestService,
+            SortService,
+            ExpandStateService,
+            OptionChangesService,
+            SelectionService,
+            {
+                provide: DataBoundTreeComponent,
+                useExisting: forwardRef(() => TreeListComponent)
+            },
+            {
+                provide: ExpandableTreeComponent,
+                useExisting: forwardRef(() => TreeListComponent)
+            },
+            ContextService,
+            RowReorderService
+        ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoTreeList"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTreeListLocalizedMessages
-
             i18n-noRecords="kendo.treelist.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
@@ -1781,6 +1863,9 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             i18n-pagerItemsTotal="kendo.treelist.pagerItemsTotal|The label after the total items count in the TreeList pager"
             pagerItemsTotal="items total"
 
+            i18n-pagerInputLabel="kendo.treelist.pagerInputLabel|The text of the aria-label attribute applied to the input element for entering the page number"
+            pagerInputLabel="Type a page number"
+
             i18n-filterCellOperatorLabel="kendo.treelist.filterCellOperatorLabel|The label of the filter cell operators dropdown"
             filterCellOperatorLabel="{{ 'Filter cell operators for {columnName}' }}"
 
@@ -1901,8 +1986,8 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
 
-            i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
-            selectPage="Select page"
+            i18n-pagerSelectPage="kendo.treelist.pagerSelectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
+            pagerSelectPage="Select page"
 
             i18n-topToolbarLabel="kendo.treelist.topToolbarLabel|The label of the TreeList top toolbar"
             topToolbarLabel="Top toolbar"
@@ -1926,8 +2011,8 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [navigable]="navigable"
             class="k-toolbar k-grid-toolbar k-toolbar-md"
             [attr.aria-label]="messageFor('topToolbarLabel')"
-            [attr.aria-controls]="ariaRootId">
-        </kendo-treelist-toolbar>
+            [attr.aria-controls]="ariaRootId"></kendo-treelist-toolbar>
+        <ng-content select="kendo-toolbar"></ng-content>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="treegrid"
@@ -2092,18 +2177,41 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 </div>
             </ng-template>
         </div>
-        <kendo-treelist-pager
+        <kendo-pager
+            #pager
             *ngIf="showPager"
-            [template]="pagerTemplate"
+            class="k-grid-pager"
+            [navigable]="navigable"
             [pageSize]="pageSize"
             [total]="view.totalVisible"
-            [allCount]="view.total"
             [skip]="skip"
-            [navigable]="navigable"
-            [attr.aria-controls]="ariaRootId"
-            [options]="pageable"
+            [responsive]="normalizedPageableSettings.responsive && !pagerTemplate"
+            [buttonCount]="normalizedPageableSettings.buttonCount"
+            [info]="normalizedPageableSettings.info"
+            [pageSizeValues]="normalizedPageableSettings.pageSizes"
+            [previousNext]="normalizedPageableSettings.previousNext"
+            [type]="normalizedPageableSettings.type"
             (pageChange)="notifyPageChange('pager', $event)">
-        </kendo-treelist-pager>
+            <ng-template kendoPagerTemplate>
+                <ng-container 
+                    [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
+                    [ngTemplateOutletContext]="pager.templateContext"></ng-container>
+            </ng-template>
+            <kendo-pager-messages
+                [ariaLabel]="messageFor('pagerLabel')"
+                [firstPage]="messageFor('pagerFirstPage')"
+                [inputLabel]="messageFor('pagerInputLabel')"
+                [previousPage]="messageFor('pagerPreviousPage')"
+                [nextPage]="messageFor('pagerNextPage')"
+                [lastPage]="messageFor('pagerLastPage')"
+                [selectPage]="messageFor('pagerSelectPage')"
+                [page]="messageFor('pagerPage')"
+                [itemsPerPage]="messageFor('pagerItemsPerPage')"
+                [items]="messageFor('pagerItems')"
+                [of]="messageFor('pagerOf')"
+                [pageNumberInputTitle]="messageFor('pagerPageNumberInputTitle')">
+            </kendo-pager-messages>
+        </kendo-pager>
         <kendo-treelist-toolbar
             *ngIf="showBottomToolbar"
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
@@ -2121,8 +2229,40 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { kind: "component", type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeListComponent, decorators: [{
+
+        <ng-template #defaultPager>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
+                    [buttonCount]="normalizedPageableSettings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
+            </div>
+            <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
+                [pageSizes]="normalizedPageableSettings.pageSizes">
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="normalizedPageableSettings.info">
+            </kendo-pager-info>
+            <kendo-pager-messages
+                [ariaLabel]="messageFor('pagerLabel')"
+                [firstPage]="messageFor('pagerFirstPage')"
+                [inputLabel]="messageFor('pagerInputLabel')"
+                [previousPage]="messageFor('pagerPreviousPage')"
+                [nextPage]="messageFor('pagerNextPage')"
+                [lastPage]="messageFor('pagerLastPage')"
+                [selectPage]="messageFor('pagerSelectPage')"
+                [page]="messageFor('pagerPage')"
+                [itemsPerPage]="messageFor('pagerItemsPerPage')"
+                [items]="messageFor('pagerItems')"
+                [of]="messageFor('pagerOf')"
+                [pageNumberInputTitle]="messageFor('pagerPageNumberInputTitle')">
+            </kendo-pager-messages>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { kind: "component", type: i22.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i22.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i22.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i22.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i22.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i22.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i22.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i22.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i22.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2143,6 +2283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         FilterService,
                         ResponsiveService,
                         PagerContextService,
+                        PagerNavigationService,
                         ExcelService,
                         ScrollSyncService,
                         ResizeService,
@@ -2175,7 +2316,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: 'kendo-treelist',
                     template: `
         <ng-container kendoTreeListLocalizedMessages
-
             i18n-noRecords="kendo.treelist.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
@@ -2209,6 +2349,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             i18n-pagerItemsTotal="kendo.treelist.pagerItemsTotal|The label after the total items count in the TreeList pager"
             pagerItemsTotal="items total"
 
+            i18n-pagerInputLabel="kendo.treelist.pagerInputLabel|The text of the aria-label attribute applied to the input element for entering the page number"
+            pagerInputLabel="Type a page number"
+
             i18n-filterCellOperatorLabel="kendo.treelist.filterCellOperatorLabel|The label of the filter cell operators dropdown"
             filterCellOperatorLabel="{{ 'Filter cell operators for {columnName}' }}"
 
@@ -2329,8 +2472,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
 
-            i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
-            selectPage="Select page"
+            i18n-pagerSelectPage="kendo.treelist.pagerSelectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
+            pagerSelectPage="Select page"
 
             i18n-topToolbarLabel="kendo.treelist.topToolbarLabel|The label of the TreeList top toolbar"
             topToolbarLabel="Top toolbar"
@@ -2354,8 +2497,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [navigable]="navigable"
             class="k-toolbar k-grid-toolbar k-toolbar-md"
             [attr.aria-label]="messageFor('topToolbarLabel')"
-            [attr.aria-controls]="ariaRootId">
-        </kendo-treelist-toolbar>
+            [attr.aria-controls]="ariaRootId"></kendo-treelist-toolbar>
+        <ng-content select="kendo-toolbar"></ng-content>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="treegrid"
@@ -2520,18 +2663,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </div>
             </ng-template>
         </div>
-        <kendo-treelist-pager
+        <kendo-pager
+            #pager
             *ngIf="showPager"
-            [template]="pagerTemplate"
+            class="k-grid-pager"
+            [navigable]="navigable"
             [pageSize]="pageSize"
             [total]="view.totalVisible"
-            [allCount]="view.total"
             [skip]="skip"
-            [navigable]="navigable"
-            [attr.aria-controls]="ariaRootId"
-            [options]="pageable"
+            [responsive]="normalizedPageableSettings.responsive && !pagerTemplate"
+            [buttonCount]="normalizedPageableSettings.buttonCount"
+            [info]="normalizedPageableSettings.info"
+            [pageSizeValues]="normalizedPageableSettings.pageSizes"
+            [previousNext]="normalizedPageableSettings.previousNext"
+            [type]="normalizedPageableSettings.type"
             (pageChange)="notifyPageChange('pager', $event)">
-        </kendo-treelist-pager>
+            <ng-template kendoPagerTemplate>
+                <ng-container 
+                    [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
+                    [ngTemplateOutletContext]="pager.templateContext"></ng-container>
+            </ng-template>
+            <kendo-pager-messages
+                [ariaLabel]="messageFor('pagerLabel')"
+                [firstPage]="messageFor('pagerFirstPage')"
+                [inputLabel]="messageFor('pagerInputLabel')"
+                [previousPage]="messageFor('pagerPreviousPage')"
+                [nextPage]="messageFor('pagerNextPage')"
+                [lastPage]="messageFor('pagerLastPage')"
+                [selectPage]="messageFor('pagerSelectPage')"
+                [page]="messageFor('pagerPage')"
+                [itemsPerPage]="messageFor('pagerItemsPerPage')"
+                [items]="messageFor('pagerItems')"
+                [of]="messageFor('pagerOf')"
+                [pageNumberInputTitle]="messageFor('pagerPageNumberInputTitle')">
+            </kendo-pager-messages>
+        </kendo-pager>
         <kendo-treelist-toolbar
             *ngIf="showBottomToolbar"
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
@@ -2549,9 +2715,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
+
+        <ng-template #defaultPager>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
+                    [buttonCount]="normalizedPageableSettings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
+            </div>
+            <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
+                [pageSizes]="normalizedPageableSettings.pageSizes">
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="normalizedPageableSettings.info">
+            </kendo-pager-info>
+            <kendo-pager-messages
+                [ariaLabel]="messageFor('pagerLabel')"
+                [firstPage]="messageFor('pagerFirstPage')"
+                [inputLabel]="messageFor('pagerInputLabel')"
+                [previousPage]="messageFor('pagerPreviousPage')"
+                [nextPage]="messageFor('pagerNextPage')"
+                [lastPage]="messageFor('pagerLastPage')"
+                [selectPage]="messageFor('pagerSelectPage')"
+                [page]="messageFor('pagerPage')"
+                [itemsPerPage]="messageFor('pagerItemsPerPage')"
+                [items]="messageFor('pagerItems')"
+                [of]="messageFor('pagerOf')"
+                [pageNumberInputTitle]="messageFor('pagerPageNumberInputTitle')">
+            </kendo-pager-messages>
+        </ng-template>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, ToolbarComponent, DragTargetContainerDirective, DropTargetContainerDirective, TableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective, ListComponent, DraggableDirective, MarqueeDirective, TableBodyComponent, LoadingComponent, PagerComponent, IconWrapperComponent]
+                    imports: [LocalizedMessagesDirective, NgIf, NgTemplateOutlet, ToolbarComponent, DragTargetContainerDirective, DropTargetContainerDirective,
+                        TableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective, ListComponent, DraggableDirective, MarqueeDirective,
+                        TableBodyComponent, LoadingComponent, ...KENDO_PAGER, IconWrapperComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.BrowserSupportService }, { type: i0.ElementRef }, { type: i2.ChangeNotificationService }, { type: i3.EditService }, { type: i4.FilterService }, { type: i5.PDFService }, { type: i6.ResponsiveService }, { type: i0.Renderer2 }, { type: i7.ExcelService }, { type: i0.NgZone }, { type: i8.ScrollSyncService }, { type: i9.DomEventsService }, { type: i10.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i11.ColumnReorderService }, { type: i12.ColumnInfoService }, { type: i13.NavigationService }, { type: i14.SortService }, { type: i15.ScrollRequestService }, { type: i16.ExpandStateService }, { type: i17.OptionChangesService }, { type: i18.SelectionService }, { type: i19.LocalizationService }, { type: i20.ContextService }, { type: i21.RowReorderService }]; }, propDecorators: { ariaLabel: [{
                 type: Input,