@progress/kendo-angular-grid 17.0.0-develop.9 → 17.0.0

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

@@ -13,6 +13,7 @@ import { ColumnComponent, isColumnComponent } from './columns/column.component';
 import { isSpanColumnComponent } from './columns/span-column.component';
 import { isColumnGroupComponent, ColumnGroupComponent } from './columns/column-group.component';
 import { DetailTemplateDirective } from './rendering/details/detail-template.directive';
+import { normalize } from './common/pager-settings';
 import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers } from './utils';
 import { BrowserSupportService } from './layout/browser-support.service';
 import { DataResultIterator, DataCollection } from './data/data.collection';
@@ -30,8 +31,6 @@ import { syncRowsHeight } from './layout/row-sync';
 import { CELL_CONTEXT, EMPTY_CELL_CONTEXT } from './rendering/common/cell-context';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 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';
@@ -91,11 +90,11 @@ import { ColGroupComponent } from './rendering/common/col-group.component';
 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 { NgIf } from '@angular/common';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { ToolbarComponent as GridToolbarComponent } from './rendering/toolbar/toolbar.component';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { PagerTemplateDirective, PagerContextService, PagerNavigationService, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./selection/selection.service";
@@ -121,6 +120,7 @@ import * as i21 from "@progress/kendo-angular-l10n";
 import * as i22 from "./common/provider.service";
 import * as i23 from "./layout/sizing-options.service";
 import * as i24 from "./row-reordering/row-reorder.service";
+import * as i25 from "@progress/kendo-angular-pager";
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -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 %})).
      */
@@ -526,11 +291,14 @@ export class GridComponent {
             this._group = value;
         }
     }
-    /**
-     */
     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 +361,33 @@ 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;
+    get normalizedPageableSettings() {
+        return normalize(this.pageable);
+    }
+    /**
+     * 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 +441,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 +544,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 +570,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 +725,7 @@ export class GridComponent {
     get noScrollbarClass() {
         return this.scrollbarWidth === 0;
     }
+    detailTemplateChildren;
     get detailTemplate() {
         if (this._customDetailTemplate) {
             return this._customDetailTemplate;
@@ -779,6 +735,7 @@ export class GridComponent {
     set detailTemplate(detailTemplate) {
         this._customDetailTemplate = detailTemplate;
     }
+    cellLoadingTemplateChildren;
     get cellLoadingTemplate() {
         if (this._cellLoadingTemplate) {
             return this._customDetailTemplate;
@@ -788,6 +745,7 @@ export class GridComponent {
     set cellLoadingTemplate(cellLoadingTemplate) {
         this._cellLoadingTemplate = cellLoadingTemplate;
     }
+    loadingTemplateChildren;
     get loadingTemplate() {
         if (this._loadingTemplate) {
             return this._loadingTemplate;
@@ -797,6 +755,7 @@ export class GridComponent {
     set loadingTemplate(loadingTemplate) {
         this._loadingTemplate = loadingTemplate;
     }
+    statusBarTemplateChildren;
     get statusBarTemplate() {
         if (this._statusBarTemplate) {
             return this._statusBarTemplate;
@@ -806,6 +765,7 @@ export class GridComponent {
     set statusBarTemplate(statusBarTemplate) {
         this._statusBarTemplate = statusBarTemplate;
     }
+    noRecordsTemplateChildren;
     get noRecordsTemplate() {
         if (this._customNoRecordsTemplate) {
             return this._customNoRecordsTemplate;
@@ -815,6 +775,7 @@ export class GridComponent {
     set noRecordsTemplate(customNoRecordsTemplate) {
         this._customNoRecordsTemplate = customNoRecordsTemplate;
     }
+    pagerTemplateChildren;
     get pagerTemplate() {
         if (this._customPagerTemplate) {
             return this._customPagerTemplate;
@@ -824,6 +785,7 @@ export class GridComponent {
     set pagerTemplate(customPagerTemplate) {
         this._customPagerTemplate = customPagerTemplate;
     }
+    toolbarTemplateChildren;
     get toolbarTemplate() {
         if (this._customToolbarTemplate) {
             return this._customToolbarTemplate;
@@ -833,18 +795,40 @@ export class GridComponent {
     set toolbarTemplate(customToolbarTemplate) {
         this._customToolbarTemplate = customToolbarTemplate;
     }
+    columnMenuTemplates;
+    lockedHeader;
+    header;
+    footer = new QueryList();
+    ariaRoot;
+    dragTargetContainer;
+    dropTargetContainer;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
     get headerPadding() {
         if (isUniversal()) {
-            return "";
+            return '';
         }
         const padding = Math.max(0, this.scrollbarWidth) + 'px';
         const right = this.rtl ? 0 : padding;
         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 +847,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 +953,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 +1190,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();
@@ -1200,9 +1312,7 @@ export class GridComponent {
     /**
      * @hidden
      */
-    messageFor(token) {
-        return this.localization.get(token);
-    }
+    messageFor = token => this.localization.get(token);
     /**
      * Switches the specified table row in the edit mode ([see example]({% slug inline_editing_grid %}#toc-editing-records-1)).
      *
@@ -1717,6 +1827,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 +2033,7 @@ export class GridComponent {
             throw new Error(GridConfigurationErrorMessages.focusNavigable);
         }
     }
+    _rowClass = () => null;
     navigationMetadata() {
         const isVirtual = this.isVirtual;
         const pageSize = this.pageSize;
@@ -2030,54 +2144,54 @@ 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,
+            PagerNavigationService,
+            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"
@@ -2115,6 +2229,9 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             i18n-pagerItemsPerPage="kendo.grid.pagerItemsPerPage|The label for the page size chooser in the Grid pager"
             pagerItemsPerPage="items per page"
 
+            i18n-pagerInputLabel="kendo.grid.pagerInputLabel|The text of the aria-label attribute applied to the input element for entering the page number"
+            pagerInputLabel="Type a page number"
+
             i18n-filter="kendo.grid.filter|The label of the filter cell or icon"
             filter="Filter"
 
@@ -2298,8 +2415,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             i18n-groupExpand="kendo.grid.groupExpand|The text of the title and aria-label attributes applied to the expand icon of group rows."
             groupExpand="Expand Group"
 
-            i18n-selectPage="kendo.grid.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
-            selectPage="Select page"
+            i18n-pagerSelectPage="kendo.grid.pagerSelectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
+            pagerSelectPage="Select page"
 
             i18n-topToolbarLabel="kendo.grid.topToolbarLabel|The label for the Grid top toolbar"
             topToolbarLabel="Top toolbar"
@@ -2336,18 +2453,42 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             [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'"
-            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            class="k-grid-pager-top k-pager"
-            [template]="pagerTemplate"
+            #topPager
+            [navigable]="navigation.pagerEnabled"
+            class="k-grid-pager k-grid-pager-top"
             [pageSize]="pageSize"
             [total]="view.total"
             [skip]="skip"
             [size]="size"
-            [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)">
+            <ng-template kendoPagerTemplate>
+                <ng-container
+                    [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
+                    [ngTemplateOutletContext]="topPager.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-grid-group-panel
             *ngIf="showGroupPanel"
@@ -2629,16 +2770,39 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         </kendo-grid-status-bar>
         <kendo-pager
             *ngIf="showBottomPager"
-            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
-            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            [template]="pagerTemplate"
+            #bottomPager
+            class="k-grid-pager"
+            [navigable]="navigation.pagerEnabled"
             [pageSize]="pageSize"
             [total]="view.total"
             [skip]="skip"
             [size]="size"
-            [options]="pageable"
-            class="k-pager"
+            [responsive]="normalizedPageableSettings.responsive && !pagerTemplate"
+            [buttonCount]="normalizedPageableSettings.buttonCount"
+            [info]="normalizedPageableSettings.info"
+            [pageSizeValues]="normalizedPageableSettings.pageSizes"
+            [previousNext]="normalizedPageableSettings.previousNext"
+            [type]="normalizedPageableSettings.type"
             (pageChange)="notifyPageChange('pager', $event)">
+            <ng-template kendoPagerTemplate>
+                <ng-container 
+                    [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
+                    [ngTemplateOutletContext]="bottomPager.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-grid-toolbar
             class="k-grid-toolbar-bottom"
@@ -2659,9 +2823,28 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             {{hintText}}
         </ng-template>
 
+        <ng-template #defaultPager>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons [size]="size" *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    [size]="size"
+                    *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
+                    [buttonCount]="normalizedPageableSettings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
+            </div>
+            <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
+                [size]="size"
+                [pageSizes]="normalizedPageableSettings.pageSizes">
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="normalizedPageableSettings.info">
+            </kendo-pager-info>
+        </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: 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]" }, { kind: "component", type: i25.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i25.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i25.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i25.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i25.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i25.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i25.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i25.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i25.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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,
@@ -2690,6 +2873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         FilterService,
                         ResponsiveService,
                         PagerContextService,
+                        PagerNavigationService,
                         ExcelService,
                         ScrollSyncService,
                         ResizeService,
@@ -2751,6 +2935,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             i18n-pagerItemsPerPage="kendo.grid.pagerItemsPerPage|The label for the page size chooser in the Grid pager"
             pagerItemsPerPage="items per page"
 
+            i18n-pagerInputLabel="kendo.grid.pagerInputLabel|The text of the aria-label attribute applied to the input element for entering the page number"
+            pagerInputLabel="Type a page number"
+
             i18n-filter="kendo.grid.filter|The label of the filter cell or icon"
             filter="Filter"
 
@@ -2934,8 +3121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             i18n-groupExpand="kendo.grid.groupExpand|The text of the title and aria-label attributes applied to the expand icon of group rows."
             groupExpand="Expand Group"
 
-            i18n-selectPage="kendo.grid.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
-            selectPage="Select page"
+            i18n-pagerSelectPage="kendo.grid.pagerSelectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
+            pagerSelectPage="Select page"
 
             i18n-topToolbarLabel="kendo.grid.topToolbarLabel|The label for the Grid top toolbar"
             topToolbarLabel="Top toolbar"
@@ -2972,18 +3159,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [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'"
-            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            class="k-grid-pager-top k-pager"
-            [template]="pagerTemplate"
+            #topPager
+            [navigable]="navigation.pagerEnabled"
+            class="k-grid-pager k-grid-pager-top"
             [pageSize]="pageSize"
             [total]="view.total"
             [skip]="skip"
             [size]="size"
-            [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)">
+            <ng-template kendoPagerTemplate>
+                <ng-container
+                    [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
+                    [ngTemplateOutletContext]="topPager.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-grid-group-panel
             *ngIf="showGroupPanel"
@@ -3265,16 +3476,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </kendo-grid-status-bar>
         <kendo-pager
             *ngIf="showBottomPager"
-            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
-            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            [template]="pagerTemplate"
+            #bottomPager
+            class="k-grid-pager"
+            [navigable]="navigation.pagerEnabled"
             [pageSize]="pageSize"
             [total]="view.total"
             [skip]="skip"
             [size]="size"
-            [options]="pageable"
-            class="k-pager"
+            [responsive]="normalizedPageableSettings.responsive && !pagerTemplate"
+            [buttonCount]="normalizedPageableSettings.buttonCount"
+            [info]="normalizedPageableSettings.info"
+            [pageSizeValues]="normalizedPageableSettings.pageSizes"
+            [previousNext]="normalizedPageableSettings.previousNext"
+            [type]="normalizedPageableSettings.type"
             (pageChange)="notifyPageChange('pager', $event)">
+            <ng-template kendoPagerTemplate>
+                <ng-container 
+                    [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
+                    [ngTemplateOutletContext]="bottomPager.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-grid-toolbar
             class="k-grid-toolbar-bottom"
@@ -3295,15 +3529,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             {{hintText}}
         </ng-template>
 
+        <ng-template #defaultPager>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons [size]="size" *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    [size]="size"
+                    *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
+                    [buttonCount]="normalizedPageableSettings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
+            </div>
+            <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
+                [size]="size"
+                [pageSizes]="normalizedPageableSettings.pageSizes">
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="normalizedPageableSettings.info">
+            </kendo-pager-info>
+        </ng-template>
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
                     standalone: true,
                     imports: [
-                        LocalizedMessagesDirective, NgIf, ToolbarComponent, PagerComponent, GroupPanelComponent,
+                        LocalizedMessagesDirective, NgIf, GridToolbarComponent, GroupPanelComponent,
                         TableDirective, GridTableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective,
                         ListComponent, DragTargetContainerDirective, DropTargetContainerDirective, DraggableDirective,
                         GridMarqueeDirective, FooterComponent, TableBodyComponent, LoadingComponent, StatusBarComponent,
-                        IconWrapperComponent, WatermarkOverlayComponent
+                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: i1.BrowserSupportService }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i0.ElementRef }, { type: i4.GroupInfoService }, { type: i5.GroupsService }, { type: i6.ChangeNotificationService }, { type: i7.DetailsService }, { type: i8.EditService }, { type: i9.FilterService }, { type: i10.PDFService }, { type: i11.ResponsiveService }, { type: i0.Renderer2 }, { type: i12.ExcelService }, { type: i0.NgZone }, { type: i13.ScrollSyncService }, { type: i14.DomEventsService }, { type: i15.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i16.ColumnReorderService }, { type: i17.ColumnInfoService }, { type: i18.NavigationService }, { type: i19.SortService }, { type: i20.ScrollRequestService }, { type: i21.LocalizationService }, { type: i22.ContextService }, { type: i23.SizingOptionsService }, { type: i24.RowReorderService }]; }, propDecorators: { data: [{