@progress/kendo-angular-grid 17.0.0-develop.3 → 17.0.0-develop.30

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

@@ -92,7 +92,7 @@ import { GridTableDirective } from './rendering/grid-table.directive';
 import { TableDirective } from './column-resizing/table.directive';
 import { GroupPanelComponent } from './grouping/group-panel.component';
 import { PagerComponent } from './pager/pager.component';
-import { ToolbarComponent } from './rendering/toolbar/toolbar.component';
+import { ToolbarComponent as GridToolbarComponent } from './rendering/toolbar/toolbar.component';
 import { NgIf } from '@angular/common';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
@@ -145,315 +145,34 @@ const NOTIFY_DELAY = 500;
  * ```
  */
 export class GridComponent {
-    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService, rowReorderService) {
-        this.supportService = supportService;
-        this.selectionService = selectionService;
-        this.cellSelectionService = cellSelectionService;
-        this.wrapper = wrapper;
-        this.groupInfoService = groupInfoService;
-        this.groupsService = groupsService;
-        this.changeNotification = changeNotification;
-        this.detailsService = detailsService;
-        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.localization = localization;
-        this.ctx = ctx;
-        this.sizingService = sizingService;
-        this.rowReorderService = rowReorderService;
-        /**
-         * Defines the scroll mode used by the Grid.
-         *
-         * @default 'scrollable'
-         */
-        this.scrollable = 'scrollable';
-        /**
-         * Enables the [single-row selection](slug:grid_row_selection) of the Grid.
-         *
-         * @default false
-         */
-        this.selectable = false;
-        /**
-         * A function that defines how to track changes for the data rows.
-         * By default, the Grid tracks changes by the index of the data item.
-         * Edited rows are tracked by reference.
-         * [See example](slug:track_changes_grid)
-         */
-        this.trackBy = defaultTrackBy;
-        /**
-         * If set to `true`, the grid will render only the columns in the current viewport.
-         * @default false
-         */
-        this.virtualColumns = false;
-        /**
-         * @hidden
-         */
-        this.gridData = () => { return this.flatData; };
-        /**
-         * Enables the [filtering]({% slug filtering_grid %}) of the Grid columns that have their `field` option set.
-         * @default false
-         */
-        this.filterable = false;
-        /**
-         * Enables the [sorting]({% slug sorting_grid %}) of the Grid columns that have their `field` option set.
-         * @default false
-         */
-        this.sortable = false;
-        /**
-         * Configures the pager of the Grid ([see example](slug:paging_grid_settings)).
-         * @default false
-         */
-        this.pageable = false;
-        /**
-         * If set to `true`, the user can group the Grid by dragging the column header cells ([see example]({% slug grouping_grid %})).
-         * @default false
-         */
-        this.groupable = false;
-        /**
-         * Indicates whether the Grid columns will be resized during initialization so that
-         * they fit their headers and row content.
-         * 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_grid %}).
-         * @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_grid %})).
-         *
-         * @default false
-         */
-        this.resizable = false;
-        /**
-         * If set to `true`, the user can reorder columns by dragging their header cells
-         * ([see example]({% slug reordering_columns_grid %})).
-         *
-         * @default false
-         */
-        this.reorderable = false;
-        /**
-         * Specifies if the column menu of the columns will be displayed ([see example]({% slug columnmenu_grid %})).
-         *
-         * @default false
-         */
-        this.columnMenu = false;
-        /**
-         * Specifies if the header of the grid will be hidden. The header is visible by default.
-         * The header includes column headers and the [filter row](slug:filter_row).
-         * @default false
-         */
-        this.hideHeader = false;
-        /**
-         * Fires when the Grid 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 Grid is changed ([see example]({% slug paging_grid %})).
-         * You have to handle the event yourself and page the data.
-         */
-        this.pageChange = new EventEmitter();
-        /**
-         * Fires when the grouping of the Grid is changed.
-         * You have to handle the event yourself and group the data ([see example]({% slug grouping_grid %})).
-         */
-        this.groupChange = new ZoneAwareEventEmitter(this.ngZone);
-        /**
-         * Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})).
-         * You have to handle the event yourself and sort the data.
-         */
-        this.sortChange = new EventEmitter();
-        /**
-         * Fires when the user selects a Grid row.
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Fires when the user drops the dragged row and reordering is performed.
-         */
-        this.rowReorder = new EventEmitter();
-        /**
-         * Fires when the data state of the Grid is changed.
-         */
-        this.dataStateChange = new EventEmitter();
-        /**
-         * Fires when the user expands a group header.
-         */
-        this.groupExpand = new EventEmitter();
-        /**
-         * Fires when the user collapses a group header.
-         */
-        this.groupCollapse = new EventEmitter();
-        /**
-         * Fires when the user expands a master row.
-         */
-        this.detailExpand = new EventEmitter();
-        /**
-         * Fires when the user collapses a master row.
-         */
-        this.detailCollapse = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Edit** command button to edit a row
-         * ([see example])({% slug inline_editing_grid %}#toc-editing-records-1).
-         */
-        this.edit = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Cancel** command button to close a row
-         * ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
-         */
-        this.cancel = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Save** command button to save changes in a row
-         * ([see example]({% slug inline_editing_grid %}#toc-saving-records-1)).
-         */
-        this.save = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Remove** command button to remove a row
-         * ([see example]({% slug inline_editing_grid %}#toc-removing-records-1)).
-         */
-        this.remove = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Add** command button to add a new row
-         * ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
-         */
-        this.add = new EventEmitter();
-        /**
-         * Fires when the user leaves an edited cell ([see example](slug:editing_incell_grid)).
-         */
-        this.cellClose = new EventEmitter();
-        /**
-         * Fires when the user clicks a cell ([see example](slug:editing_incell_grid)).
-         */
-        this.cellClick = new ZoneAwareEventEmitter(this.ngZone);
-        /**
-         * 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 ZoneAwareEventEmitter(this.ngZone);
-        /**
-         * 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 changes the sticky state of the columns from the column menu.
-         */
-        this.columnStickyChange = new EventEmitter();
-        /**
-         * Fires when the user scrolls to the last record on the page and enables endless scrolling
-         * ([see example]({% slug scrollmmodes_grid %}#toc-endless-scrolling)).
-         * You have to handle the event yourself and page the data.
-         */
-        this.scrollBottom = new EventEmitter();
-        /**
-         * Fires when the grid 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();
-        /**
-         * A query list of all declared columns.
-         */
-        this.columns = new QueryList();
-        this.hostClass = true;
-        this.footer = new QueryList();
-        this.selectionDirective = false;
-        this.ariaRootId = `k-${guid()}`;
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this.columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
-            if (!isUniversal()) {
-                column.matchesMedia = this.matchesMedia(column);
-            }
-            return column.isVisible;
-        }));
-        this.view = new DataCollection(() => new DataResultIterator(this.data, this.skip, this.hasGroupFooters));
-        this.shouldGenerateColumns = true;
-        this.notifyTimeout = null;
-        this._sort = new Array();
-        this._group = new Array();
-        this._skip = 0;
-        this._data = [];
-        this.cachedWindowWidth = 0;
-        this._rowSelected = null;
-        this._isRowSelectable = null;
-        this._cellSelected = null;
-        this._rowReorderable = false;
-        this._navigable = [];
-        this._size = 'medium';
-        this._loading = false;
-        /**
-         * @hidden
-         */
-        this.blockArrowSelection = false;
-        this.rtl = false;
-        this._rowClass = () => null;
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.ctx.grid = this;
-        this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-        this.groupInfoService.registerColumnsContainer(() => this.columnList);
-        this.columnInfoService.init(this.columnsContainer, () => this.columnList);
-        this.columnVisibilityChangeSubscription = this.columnInfoService.visibilityChange.subscribe((changed) => {
-            this.columnVisibilityChange.emit(new ColumnVisibilityChangeEvent(changed));
-        });
-        this.columnLockedChangeSubscription = this.columnInfoService.lockedChange.subscribe((changed) => {
-            this.columnLockedChange.emit(new ColumnLockedChangeEvent(changed));
-        });
-        this.columnStickyChangeSubscription = this.columnInfoService.stickyChange.subscribe((changed) => {
-            this.columnStickyChange.emit(new ColumnStickyChangeEvent(changed));
-        });
-        this.groupExpandCollapseSubscription = handleExpandCollapseGroupsService(groupsService, this.groupExpand, this.groupCollapse, ({ group, groupIndex, parentGroup }) => ({ group, groupIndex, parentGroup }));
-        this.detailsServiceSubscription = handleExpandCollapseDetailsService(detailsService, this.detailExpand, this.detailCollapse, args => args);
-        this.filterSubscription = this.filterService.changes.subscribe(x => {
-            this.filterChange.emit(x);
-        });
-        this.sortSubscription = this.sortService.changes.subscribe(x => {
-            this.sortChange.emit(x);
-        });
-        this.attachStateChangesEmitter();
-        this.attachEditHandlers();
-        this.attachDomEventHandlers();
-        this.pdfSubscription = this.pdfService.exportClick.subscribe(this.emitPDFExportEvent.bind(this));
-        this.excelSubscription = this.excelService.exportClick.subscribe(this.saveAsExcel.bind(this));
-        this.columnsContainerChange();
-        this.handleColumnResize();
-        this.columnList = new ColumnList(this.columns);
-        this.columnReorderSubscription = this.columnReorderService
-            .changes.subscribe(this.reorder.bind(this));
-        this.columnRangeChangeSubscription = this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this));
-    }
+    supportService;
+    selectionService;
+    cellSelectionService;
+    wrapper;
+    groupInfoService;
+    groupsService;
+    changeNotification;
+    detailsService;
+    editService;
+    filterService;
+    pdfService;
+    responsiveService;
+    renderer;
+    excelService;
+    ngZone;
+    scrollSyncService;
+    domEvents;
+    columnResizingService;
+    changeDetectorRef;
+    columnReorderService;
+    columnInfoService;
+    navigationService;
+    sortService;
+    scrollRequestService;
+    localization;
+    ctx;
+    sizingService;
+    rowReorderService;
     /**
      * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
      * ([more information and example]({% slug binding_grid %})).
@@ -481,6 +200,29 @@ export class GridComponent {
     get hintText() {
         return this.rowReorderService.getDefaultHintText(this.columnList, this.flatData);
     }
+    /**
+     * Defines the page size used by the Grid pager.
+     * Required by the [paging]({% slug paging_grid %}) functionality.
+     */
+    pageSize;
+    /**
+     * Defines the height (in pixels) that is used when the `scrollable` option of the Grid is set.
+     * To set the height of the Grid, 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 Grid row (`tr`) element in the DOM.
+     * Required by the [virtual scrolling functionality]({% slug scrollmmodes_grid %}).
+     * Set the `rowHeight` option to the exact pixels as the height of the `tr` element appears in the DOM.
+     */
+    rowHeight;
+    /**
+     * Represent the actual height of each Grid detail row (`tr`) element in the DOM.
+     * Required by the [virtual scrolling functionality]({% slug scrollmmodes_grid %}).
+     * Set the `detailRowHeight` option to the exact pixels as the height of the detail Grid `tr` element appears in the DOM.
+     */
+    detailRowHeight;
     /**
      * Defines the number of records to be skipped by the pager.
      * Required by the [paging]({% slug paging_grid %}) functionality.
@@ -493,6 +235,18 @@ export class GridComponent {
             this._skip = this.rowReorderService.skip = value;
         }
     }
+    /**
+     * Defines the scroll mode used by the Grid.
+     *
+     * @default 'scrollable'
+     */
+    scrollable = 'scrollable';
+    /**
+     * Enables the [single-row selection](slug:grid_row_selection) of the Grid.
+     *
+     * @default false
+     */
+    selectable = false;
     /**
      * The descriptors by which the data will be sorted ([see example]({% slug sorting_grid %})).
      */
@@ -518,6 +272,17 @@ export class GridComponent {
     get size() {
         return this._size;
     }
+    /**
+     * A function that defines how to track changes for the data rows.
+     * By default, the Grid tracks changes by the index of the data item.
+     * Edited rows are tracked by reference.
+     * [See example](slug:track_changes_grid)
+     */
+    trackBy = defaultTrackBy;
+    /**
+     * The descriptor by which the data will be filtered ([see examples]({% slug filtering_grid %})).
+     */
+    filter;
     /**
      * The descriptors by which the data will be grouped ([see example]({% slug grouping_grid %})).
      */
@@ -531,6 +296,11 @@ export class GridComponent {
     get group() {
         return this._group;
     }
+    /**
+     * If set to `true`, the grid will render only the columns in the current viewport.
+     * @default false
+     */
+    virtualColumns = false;
     /**
      * @hidden
      */
@@ -593,6 +363,30 @@ export class GridComponent {
     get marqueeSelection() {
         return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
     }
+    /**
+     * @hidden
+     */
+    gridData = () => { return this.flatData; };
+    /**
+     * Enables the [filtering]({% slug filtering_grid %}) of the Grid columns that have their `field` option set.
+     * @default false
+     */
+    filterable = false;
+    /**
+     * Enables the [sorting]({% slug sorting_grid %}) of the Grid columns that have their `field` option set.
+     * @default false
+     */
+    sortable = false;
+    /**
+     * Configures the pager of the Grid ([see example](slug:paging_grid_settings)).
+     * @default false
+     */
+    pageable = false;
+    /**
+     * If set to `true`, the user can group the Grid by dragging the column header cells ([see example]({% slug grouping_grid %})).
+     * @default false
+     */
+    groupable = false;
     /**
      * Enables the [row reordering]({% slug reordering_rows_grid %}) of the Grid.
      * @default false
@@ -646,6 +440,15 @@ export class GridComponent {
     get navigatable() {
         return this.navigable;
     }
+    /**
+     * Indicates whether the Grid columns will be resized during initialization so that
+     * they fit their headers and row content.
+     * 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_grid %}).
+     * @default false
+     */
+    autoSize = false;
     /**
      * Defines a function that is executed for every data row in the component
      * ([see example](slug:styling_grid_rows)).
@@ -740,6 +543,20 @@ export class GridComponent {
             this.defaultSelection ? this.defaultSelection.stateToArray() : this.selectionDirective.stateToArray() :
             [];
     }
+    /**
+     * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells
+     * ([see example]({% slug resizing_columns_grid %})).
+     *
+     * @default false
+     */
+    resizable = false;
+    /**
+     * If set to `true`, the user can reorder columns by dragging their header cells
+     * ([see example]({% slug reordering_columns_grid %})).
+     *
+     * @default false
+     */
+    reorderable = false;
     /**
      * Specifies if the loading indicator of the Grid will be displayed ([see example]({% slug binding_grid %})).
      *
@@ -752,9 +569,146 @@ export class GridComponent {
     get loading() {
         return this._loading;
     }
+    /**
+     * Specifies if the column menu of the columns will be displayed ([see example]({% slug columnmenu_grid %})).
+     *
+     * @default false
+     */
+    columnMenu = false;
+    /**
+     * Specifies if the header of the grid will be hidden. The header is visible by default.
+     * The header includes column headers and the [filter row](slug:filter_row).
+     * @default false
+     */
+    hideHeader = false;
+    /**
+     * Fires when the Grid 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 Grid is changed ([see example]({% slug paging_grid %})).
+     * You have to handle the event yourself and page the data.
+     */
+    pageChange = new EventEmitter();
+    /**
+     * Fires when the grouping of the Grid is changed.
+     * You have to handle the event yourself and group the data ([see example]({% slug grouping_grid %})).
+     */
+    groupChange;
+    /**
+     * Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})).
+     * You have to handle the event yourself and sort the data.
+     */
+    sortChange = new EventEmitter();
+    /**
+     * Fires when the user selects a Grid row.
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Fires when the user drops the dragged row and reordering is performed.
+     */
+    rowReorder = new EventEmitter();
+    /**
+     * Fires when the data state of the Grid is changed.
+     */
+    dataStateChange = new EventEmitter();
+    /**
+     * Fires when the user expands a group header.
+     */
+    groupExpand = new EventEmitter();
+    /**
+     * Fires when the user collapses a group header.
+     */
+    groupCollapse = new EventEmitter();
+    /**
+     * Fires when the user expands a master row.
+     */
+    detailExpand = new EventEmitter();
+    /**
+     * Fires when the user collapses a master row.
+     */
+    detailCollapse = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Edit** command button to edit a row
+     * ([see example])({% slug inline_editing_grid %}#toc-editing-records-1).
+     */
+    edit = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Cancel** command button to close a row
+     * ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
+     */
+    cancel = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Save** command button to save changes in a row
+     * ([see example]({% slug inline_editing_grid %}#toc-saving-records-1)).
+     */
+    save = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Remove** command button to remove a row
+     * ([see example]({% slug inline_editing_grid %}#toc-removing-records-1)).
+     */
+    remove = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Add** command button to add a new row
+     * ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
+     */
+    add = new EventEmitter();
+    /**
+     * Fires when the user leaves an edited cell ([see example](slug:editing_incell_grid)).
+     */
+    cellClose = new EventEmitter();
+    /**
+     * Fires when the user clicks a cell ([see example](slug:editing_incell_grid)).
+     */
+    cellClick;
+    /**
+     * 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;
+    /**
+     * 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 changes the sticky state of the columns from the column menu.
+     */
+    columnStickyChange = new EventEmitter();
+    /**
+     * Fires when the user scrolls to the last record on the page and enables endless scrolling
+     * ([see example]({% slug scrollmmodes_grid %}#toc-endless-scrolling)).
+     * You have to handle the event yourself and page the data.
+     */
+    scrollBottom = new EventEmitter();
+    /**
+     * Fires when the grid 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();
+    /**
+     * A query list of all declared columns.
+     */
+    columns = new QueryList();
     get dir() {
         return this.direction;
     }
+    hostClass = true;
     get sizeSmallClass() {
         return this.size === 'small';
     }
@@ -770,6 +724,7 @@ export class GridComponent {
     get noScrollbarClass() {
         return this.scrollbarWidth === 0;
     }
+    detailTemplateChildren;
     get detailTemplate() {
         if (this._customDetailTemplate) {
             return this._customDetailTemplate;
@@ -779,6 +734,7 @@ export class GridComponent {
     set detailTemplate(detailTemplate) {
         this._customDetailTemplate = detailTemplate;
     }
+    cellLoadingTemplateChildren;
     get cellLoadingTemplate() {
         if (this._cellLoadingTemplate) {
             return this._customDetailTemplate;
@@ -788,6 +744,7 @@ export class GridComponent {
     set cellLoadingTemplate(cellLoadingTemplate) {
         this._cellLoadingTemplate = cellLoadingTemplate;
     }
+    loadingTemplateChildren;
     get loadingTemplate() {
         if (this._loadingTemplate) {
             return this._loadingTemplate;
@@ -797,6 +754,7 @@ export class GridComponent {
     set loadingTemplate(loadingTemplate) {
         this._loadingTemplate = loadingTemplate;
     }
+    statusBarTemplateChildren;
     get statusBarTemplate() {
         if (this._statusBarTemplate) {
             return this._statusBarTemplate;
@@ -806,6 +764,7 @@ export class GridComponent {
     set statusBarTemplate(statusBarTemplate) {
         this._statusBarTemplate = statusBarTemplate;
     }
+    noRecordsTemplateChildren;
     get noRecordsTemplate() {
         if (this._customNoRecordsTemplate) {
             return this._customNoRecordsTemplate;
@@ -815,6 +774,7 @@ export class GridComponent {
     set noRecordsTemplate(customNoRecordsTemplate) {
         this._customNoRecordsTemplate = customNoRecordsTemplate;
     }
+    pagerTemplateChildren;
     get pagerTemplate() {
         if (this._customPagerTemplate) {
             return this._customPagerTemplate;
@@ -824,6 +784,7 @@ export class GridComponent {
     set pagerTemplate(customPagerTemplate) {
         this._customPagerTemplate = customPagerTemplate;
     }
+    toolbarTemplateChildren;
     get toolbarTemplate() {
         if (this._customToolbarTemplate) {
             return this._customToolbarTemplate;
@@ -833,6 +794,13 @@ export class GridComponent {
     set toolbarTemplate(customToolbarTemplate) {
         this._customToolbarTemplate = customToolbarTemplate;
     }
+    columnMenuTemplates;
+    lockedHeader;
+    header;
+    footer = new QueryList();
+    ariaRoot;
+    dragTargetContainer;
+    dropTargetContainer;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -845,6 +813,21 @@ export class GridComponent {
         const left = this.rtl ? padding : 0;
         return `0 ${right} 0 ${left}`;
     }
+    columnMenuOptions;
+    columnList;
+    selectionDirective = false;
+    ariaRootId = `k-${guid()}`;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
+        if (!isUniversal()) {
+            column.matchesMedia = this.matchesMedia(column);
+        }
+        return column.isVisible;
+    }));
+    view = new DataCollection(() => new DataResultIterator(this.data, this.skip, this.hasGroupFooters));
     get hasGroupFooters() {
         return this.columnsContainer.hasGroupFooter;
     }
@@ -863,6 +846,31 @@ export class GridComponent {
     get navigation() {
         return this.navigationService;
     }
+    shouldGenerateColumns = true;
+    direction;
+    notifyTimeout = null;
+    _sort = new Array();
+    _group = new Array();
+    _skip = 0;
+    _data = [];
+    cachedWindowWidth = 0;
+    defaultSelection;
+    _rowSelected = null;
+    _isRowSelectable = null;
+    _cellSelected = null;
+    _customDetailTemplate;
+    _cellLoadingTemplate;
+    _loadingTemplate;
+    _statusBarTemplate;
+    _customNoRecordsTemplate;
+    _customPagerTemplate;
+    _customToolbarTemplate;
+    _rowReorderable = false;
+    leafViewportColumns;
+    viewportColumns;
+    _navigable = [];
+    _size = 'medium';
+    _loading = false;
     get isVirtual() {
         return this.scrollable === 'virtual';
     }
@@ -944,6 +952,105 @@ export class GridComponent {
     getHintSettings(type) {
         return this.rowReorderService[type];
     }
+    /**
+     * @hidden
+     */
+    blockArrowSelection = false;
+    selectionSubscription;
+    stateChangeSubscription;
+    groupExpandCollapseSubscription;
+    editServiceSubscription;
+    detailsServiceSubscription;
+    filterSubscription;
+    sortSubscription;
+    columnsChangeSubscription;
+    pdfSubscription;
+    excelSubscription;
+    columnsContainerChangeSubscription;
+    cellClickSubscription;
+    footerChangeSubscription;
+    columnResizingSubscription;
+    columnReorderSubscription;
+    detachElementEventHandlers;
+    localizationSubscription;
+    columnVisibilityChangeSubscription;
+    columnLockedChangeSubscription;
+    columnStickyChangeSubscription;
+    focusElementSubscription;
+    columnRangeChangeSubscription;
+    rowReorderSubscription;
+    rtl = false;
+    _rowSticky;
+    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService, rowReorderService) {
+        this.supportService = supportService;
+        this.selectionService = selectionService;
+        this.cellSelectionService = cellSelectionService;
+        this.wrapper = wrapper;
+        this.groupInfoService = groupInfoService;
+        this.groupsService = groupsService;
+        this.changeNotification = changeNotification;
+        this.detailsService = detailsService;
+        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.localization = localization;
+        this.ctx = ctx;
+        this.sizingService = sizingService;
+        this.rowReorderService = rowReorderService;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.ctx.grid = this;
+        this.groupChange = new ZoneAwareEventEmitter(this.ngZone);
+        this.cellClick = new ZoneAwareEventEmitter(this.ngZone);
+        this.columnResize = new ZoneAwareEventEmitter(this.ngZone);
+        this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+        this.groupInfoService.registerColumnsContainer(() => this.columnList);
+        this.columnInfoService.init(this.columnsContainer, () => this.columnList);
+        this.columnVisibilityChangeSubscription = this.columnInfoService.visibilityChange.subscribe((changed) => {
+            this.columnVisibilityChange.emit(new ColumnVisibilityChangeEvent(changed));
+        });
+        this.columnLockedChangeSubscription = this.columnInfoService.lockedChange.subscribe((changed) => {
+            this.columnLockedChange.emit(new ColumnLockedChangeEvent(changed));
+        });
+        this.columnStickyChangeSubscription = this.columnInfoService.stickyChange.subscribe((changed) => {
+            this.columnStickyChange.emit(new ColumnStickyChangeEvent(changed));
+        });
+        this.groupExpandCollapseSubscription = handleExpandCollapseGroupsService(groupsService, this.groupExpand, this.groupCollapse, ({ group, groupIndex, parentGroup }) => ({ group, groupIndex, parentGroup }));
+        this.detailsServiceSubscription = handleExpandCollapseDetailsService(detailsService, this.detailExpand, this.detailCollapse, args => args);
+        this.filterSubscription = this.filterService.changes.subscribe(x => {
+            this.filterChange.emit(x);
+        });
+        this.sortSubscription = this.sortService.changes.subscribe(x => {
+            this.sortChange.emit(x);
+        });
+        this.attachStateChangesEmitter();
+        this.attachEditHandlers();
+        this.attachDomEventHandlers();
+        this.pdfSubscription = this.pdfService.exportClick.subscribe(this.emitPDFExportEvent.bind(this));
+        this.excelSubscription = this.excelService.exportClick.subscribe(this.saveAsExcel.bind(this));
+        this.columnsContainerChange();
+        this.handleColumnResize();
+        this.columnList = new ColumnList(this.columns);
+        this.columnReorderSubscription = this.columnReorderService
+            .changes.subscribe(this.reorder.bind(this));
+        this.columnRangeChangeSubscription = this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this));
+    }
     /**
      * Expands the specified master row ([see example]({% slug hierarchy_grid %})).
      *
@@ -1082,6 +1189,10 @@ export class GridComponent {
         this.attachElementEventHandlers();
         this.updateNavigationMetadata();
         this.applyAutoSize();
+        const toolbarComponentWrapper = this.wrapper?.nativeElement?.querySelector('kendo-toolbar');
+        if (toolbarComponentWrapper) {
+            this.renderer.addClass(toolbarComponentWrapper, 'k-grid-toolbar');
+        }
     }
     ngAfterContentChecked() {
         this.columnsContainer.refresh();
@@ -1717,6 +1828,9 @@ export class GridComponent {
             if (this.rowSticky && this.groupable) {
                 throw new Error(GridConfigurationErrorMessages.incompatibleFeatures('sticky rows', 'grouping'));
             }
+            if (this.wrapper?.nativeElement?.querySelector('kendo-toolbar') && this.toolbarTemplate) {
+                console.warn(GridConfigurationErrorMessages.unsupportedToolbarConfig);
+            }
             validateColumnsField(this.columnList);
         }
     }
@@ -1920,6 +2034,7 @@ export class GridComponent {
             throw new Error(GridConfigurationErrorMessages.focusNavigable);
         }
     }
+    _rowClass = () => null;
     navigationMetadata() {
         const isVirtual = this.isVirtual;
         const pageSize = this.pageSize;
@@ -2030,54 +2145,53 @@ export class GridComponent {
         this.dragTargetContainer?.notify();
         this.dropTargetContainer?.notify();
     }
-}
-GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridComponent, deps: [{ token: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.SizingOptionsService }, { token: i24.RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
-GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", 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", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
-        BrowserSupportService,
-        LocalizationService,
-        ColumnInfoService,
-        SelectionService,
-        CellSelectionService,
-        DetailsService,
-        GroupsService,
-        GroupInfoService,
-        ChangeNotificationService,
-        EditService,
-        PDFService,
-        SuspendService,
-        {
-            provide: CELL_CONTEXT,
-            useValue: EMPTY_CELL_CONTEXT
-        },
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.grid'
-        },
-        FilterService,
-        ResponsiveService,
-        PagerContextService,
-        ExcelService,
-        ScrollSyncService,
-        ResizeService,
-        LocalDataChangesService,
-        DomEventsService,
-        ColumnResizingService,
-        SinglePopupService,
-        DragAndDropService,
-        DragHintService,
-        DropCueService,
-        ColumnReorderService,
-        NavigationService,
-        FocusRoot,
-        IdService,
-        CellSelectionAggregateService,
-        ScrollRequestService,
-        SortService,
-        ContextService,
-        SizingOptionsService,
-        RowReorderService,
-        ClipboardService
-    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { 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: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, deps: [{ token: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.SizingOptionsService }, { token: i24.RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", 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", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+            BrowserSupportService,
+            LocalizationService,
+            ColumnInfoService,
+            SelectionService,
+            CellSelectionService,
+            DetailsService,
+            GroupsService,
+            GroupInfoService,
+            ChangeNotificationService,
+            EditService,
+            PDFService,
+            SuspendService,
+            {
+                provide: CELL_CONTEXT,
+                useValue: EMPTY_CELL_CONTEXT
+            },
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.grid'
+            },
+            FilterService,
+            ResponsiveService,
+            PagerContextService,
+            ExcelService,
+            ScrollSyncService,
+            ResizeService,
+            LocalDataChangesService,
+            DomEventsService,
+            ColumnResizingService,
+            SinglePopupService,
+            DragAndDropService,
+            DragHintService,
+            DropCueService,
+            ColumnReorderService,
+            NavigationService,
+            FocusRoot,
+            IdService,
+            CellSelectionAggregateService,
+            ScrollRequestService,
+            SortService,
+            ContextService,
+            SizingOptionsService,
+            RowReorderService,
+            ClipboardService
+        ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { 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: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
             groupPanelEmpty="Drag a column header and drop it here to group by that column"
@@ -2330,13 +2444,13 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         >
         </ng-container>
         <kendo-grid-toolbar
-            class="k-toolbar k-grid-toolbar"
             *ngIf="showTopToolbar"
             [size]="size"
             [attr.aria-label]="messageFor('topToolbarLabel')"
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
+        <ng-content select="kendo-toolbar"></ng-content>
         <kendo-pager
             *ngIf="showTopPager"
             [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
@@ -2642,7 +2756,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-pager>
         <kendo-grid-toolbar
-            class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom"
+            class="k-grid-toolbar-bottom"
             *ngIf="showBottomToolbar"
             [size]="size"
             [navigable]="navigation.toolbarEnabled"
@@ -2661,8 +2775,9 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         </ng-template>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { 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: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { 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: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
                     encapsulation: ViewEncapsulation.None,
@@ -2967,13 +3082,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         >
         </ng-container>
         <kendo-grid-toolbar
-            class="k-toolbar k-grid-toolbar"
             *ngIf="showTopToolbar"
             [size]="size"
             [attr.aria-label]="messageFor('topToolbarLabel')"
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
+        <ng-content select="kendo-toolbar"></ng-content>
         <kendo-pager
             *ngIf="showTopPager"
             [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
@@ -3279,7 +3394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-pager>
         <kendo-grid-toolbar
-            class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom"
+            class="k-grid-toolbar-bottom"
             *ngIf="showBottomToolbar"
             [size]="size"
             [navigable]="navigation.toolbarEnabled"
@@ -3301,7 +3416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     `,
                     standalone: true,
                     imports: [
-                        LocalizedMessagesDirective, NgIf, ToolbarComponent, PagerComponent, GroupPanelComponent,
+                        LocalizedMessagesDirective, NgIf, GridToolbarComponent, PagerComponent, GroupPanelComponent,
                         TableDirective, GridTableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective,
                         ListComponent, DragTargetContainerDirective, DropTargetContainerDirective, DraggableDirective,
                         GridMarqueeDirective, FooterComponent, TableBodyComponent, LoadingComponent, StatusBarComponent,