@progress/kendo-angular-grid 19.0.0-develop.2 → 19.0.0-develop.21

package/esm2022/grid.component.mjs

@@ -6,7 +6,7 @@ import { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Inpu
 import { ZoneAwareEventEmitter } from './common/event-emitter';
 import { FormControl, FormGroup } from '@angular/forms';
 import { merge } from 'rxjs';
-import { map, tap, take, filter, switchMap, takeUntil } from 'rxjs/operators';
+import { map, tap, take, filter, switchMap, takeUntil, flatMap } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { ColumnComponent, isColumnComponent } from './columns/column.component';
@@ -14,7 +14,7 @@ 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, roundDown } from './utils';
+import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers, roundDown, recursiveColumnsFlatMap } from './utils';
 import { BrowserSupportService } from './layout/browser-support.service';
 import { DataResultIterator, DataCollection } from './data/data.collection';
 import { SelectionService } from './selection/selection.service';
@@ -72,7 +72,7 @@ import { ContextService } from './common/provider.service';
 import { LoadingTemplateDirective } from './rendering/loading-template.directive';
 import { SizingOptionsService } from './layout/sizing-options.service';
 import { DraggableDirective, WatermarkOverlayComponent, guid, shouldShowValidationUI } from '@progress/kendo-angular-common';
-import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
+import { AdaptiveService, DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
 import { RowReorderService } from './row-reordering/row-reorder.service';
 import { StatusBarTemplateDirective } from './aggregates/status-bar-template.directive';
 import { CellSelectionAggregateService } from './aggregates/selection-aggregate.service';
@@ -96,6 +96,10 @@ import { LocalizedMessagesDirective } from './localization/localized-messages.di
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { PagerTemplateDirective, PagerContextService, PagerNavigationService, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import { RowspanService } from './rendering/rowspan.service';
+import { AdaptiveGridService } from './common/adaptiveness.service';
+import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.component';
+import { ColumnMenuService } from './column-menu/column-menu.service';
+import { MenuTabbingService } from './filtering/menu/menu-tabbing.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./selection/selection.service";
@@ -120,8 +124,10 @@ import * as i20 from "./scrolling/scroll-request.service";
 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";
+import * as i24 from "@progress/kendo-angular-utils";
+import * as i25 from "./common/adaptiveness.service";
+import * as i26 from "./row-reordering/row-reorder.service";
+import * as i27 from "@progress/kendo-angular-pager";
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -173,6 +179,8 @@ export class GridComponent {
     localization;
     ctx;
     sizingService;
+    adaptiveService;
+    adaptiveGridService;
     rowReorderService;
     /**
      * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
@@ -240,6 +248,10 @@ export class GridComponent {
      * Set the `rowHeight` option to the exact pixels as the height of the `tr` element appears in the DOM.
      */
     rowHeight;
+    /**
+     * Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
+     */
+    adaptiveMode = 'none';
     /**
      * Represent the actual height of each Grid detail row (`tr`) element in the DOM.
      * Required by the [virtual scrolling functionality]({% slug scrollmmodes_grid %}).
@@ -384,6 +396,26 @@ export class GridComponent {
     get marqueeSelection() {
         return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
     }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     *
+     * The `isOpen` property is used to determine if a Grid Popup or ActionSheet is open.
+     */
+    get isOpen() {
+        return isPresent(this.adaptiveGridService.popupRef) || this.isActionSheetExpanded;
+    }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return Boolean(this.adaptiveRenderer?.actionSheet?.expanded);
+    }
     /**
      * @hidden
      */
@@ -437,8 +469,8 @@ export class GridComponent {
         return this._rowReorderable;
     }
     /**
-     * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
-     * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
+     * When the keyboard navigation is enabled, the user can use dedicated shortcuts to interact with the Grid.
+     * By default, navigation is enabled. To disable it altogether, and include the Grid content in the normal tab sequence, set the property to `false`.
      * To enable navigation through separate Grid sections only, provide a [`GridNavigableSection`]({% slug api_grid_gridnavigablesection %}) array.
      */
     set navigable(value) {
@@ -455,20 +487,6 @@ export class GridComponent {
     get navigable() {
         return this._navigable;
     }
-    /**
-     * @hidden
-     *
-     * An alias for `navigable` for users who migrate from Kendo UI for jQuery.
-     */
-    set navigatable(value) {
-        this.navigable = value;
-    }
-    /**
-     * @hidden
-     */
-    get navigatable() {
-        return this.navigable;
-    }
     /**
      * Indicates whether the Grid columns will be resized during initialization so that
      * they fit their headers and row content.
@@ -572,6 +590,21 @@ export class GridComponent {
             this.defaultSelection ? this.defaultSelection.stateToArray() : this.selectionDirective.stateToArray() :
             [];
     }
+    /**
+     * The current Grid `GridState` objects. Contains the information about data operations and column state, required
+     * to store and restore the Grid state.
+     */
+    get currentState() {
+        return {
+            filter: this.filter,
+            group: this.group,
+            sort: this.sort,
+            skip: this.skip,
+            take: this.pageSize,
+            columnsState: this.columns.toArray().flatMap(recursiveColumnsFlatMap),
+            currentData: structuredClone(this.data)
+        };
+    }
     /**
      * 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 %})).
@@ -610,6 +643,31 @@ export class GridComponent {
      * @default false
      */
     hideHeader = false;
+    /**
+     * Specifies if the currently inactive toolbar tools will be visible. Applicable when the toolbar is configured using the <kendo-toolbar> component. By default, such tools are hidden.
+     *
+     * @default false
+     */
+    showInactiveTools = false;
+    /**
+     * A function which determines if a specific row is expanded.
+     */
+    set isDetailExpanded(callback) {
+        this.detailsService.userCallback = callback;
+    }
+    get isDetailExpanded() {
+        return this.detailsService.userCallback;
+    }
+    /**
+     * A function which determines if a specific group row is expanded.
+     */
+    set isGroupExpanded(callback) {
+        this.groupsService.userCallback = callback;
+        this.groupable = isPresent(callback);
+    }
+    get isGroupExpanded() {
+        return this.groupsService.userCallback;
+    }
     /**
      * Fires when the Grid filter is modified through the UI.
      * You have to handle the event yourself and filter the data.
@@ -642,6 +700,10 @@ export class GridComponent {
      * Fires when the data state of the Grid is changed.
      */
     dataStateChange = new EventEmitter();
+    /**
+     * Fires when the data or columns state of the Grid is changed.
+     */
+    gridStateChange = new EventEmitter();
     /**
      * Fires when the user expands a group header.
      */
@@ -846,6 +908,10 @@ export class GridComponent {
     dragTargetContainer;
     dropTargetContainer;
     dialogContainer;
+    /**
+     * @hidden
+     */
+    adaptiveRenderer;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -888,6 +954,12 @@ export class GridComponent {
     get navigation() {
         return this.navigationService;
     }
+    /**
+     * @hidden
+     */
+    get flatData() {
+        return isArray(this.data) ? this.data : this.data.data;
+    }
     shouldGenerateColumns = true;
     direction;
     notifyTimeout = null;
@@ -910,7 +982,7 @@ export class GridComponent {
     _rowReorderable = false;
     leafViewportColumns;
     viewportColumns;
-    _navigable = [];
+    _navigable = ['table', 'pager', 'toolbar'];
     _size = 'medium';
     _loading = false;
     get isVirtual() {
@@ -998,6 +1070,7 @@ export class GridComponent {
      * @hidden
      */
     blockArrowSelection = false;
+    undoRedoService;
     selectionSubscription;
     stateChangeSubscription;
     groupExpandCollapseSubscription;
@@ -1023,7 +1096,7 @@ export class GridComponent {
     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) {
+    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, adaptiveService, adaptiveGridService, rowReorderService) {
         this.supportService = supportService;
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
@@ -1051,6 +1124,8 @@ export class GridComponent {
         this.localization = localization;
         this.ctx = ctx;
         this.sizingService = sizingService;
+        this.adaptiveService = adaptiveService;
+        this.adaptiveGridService = adaptiveGridService;
         this.rowReorderService = rowReorderService;
         const isValid = validatePackage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
@@ -1169,6 +1244,7 @@ export class GridComponent {
         }
         this.initSelectionService();
         this.updateNavigationMetadata();
+        this.currentState.currentData = this.data;
     }
     ngOnChanges(changes) {
         if (isChanged("data", changes)) {
@@ -1250,6 +1326,12 @@ export class GridComponent {
         if (this.selectionSubscription) {
             this.selectionSubscription.unsubscribe();
         }
+        if (this.rowReorderSubscription) {
+            this.rowReorderSubscription.unsubscribe();
+        }
+        if (this.columnReorderSubscription) {
+            this.columnReorderSubscription.unsubscribe();
+        }
         if (this.stateChangeSubscription) {
             this.stateChangeSubscription.unsubscribe();
         }
@@ -1372,6 +1454,12 @@ export class GridComponent {
         const target = isNaN(columnIndex) ? row : `${row} td[data-kendo-grid-column-index="${columnIndex}"]`;
         this.focusEditElement(target);
     }
+    /**
+     * @hidden
+     */
+    handleReorderEvents(ev, evType) {
+        this.rowReorderService[evType](ev);
+    }
     /**
      * Closes the editor for a given row ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
      *
@@ -1465,6 +1553,44 @@ export class GridComponent {
     saveAsExcel() {
         this.excelService.save(this);
     }
+    /**
+     * Applies the provided `GridState` object to the Grid.
+     */
+    loadState(state) {
+        if (state.columnsState) {
+            this.traverseColumns(this.columns, (column) => {
+                const columnState = state.columnsState.find((col) => col.id === column.id);
+                if (columnState) {
+                    column.width = columnState.width;
+                    column.hidden = columnState.hidden;
+                    column.locked = columnState.locked;
+                    column.sticky = columnState.sticky;
+                    column.orderIndex = columnState.orderIndex;
+                }
+            });
+            this.columns.reset(this.columns.toArray());
+            this.columnsContainer.refresh();
+        }
+        this.sort = state.sort;
+        this.group = state.group;
+        this.filter = state.filter;
+        this.group = state.group;
+        this.skip = state.skip;
+        this.pageSize = state.take;
+        this.data = state.currentData;
+        this.changeNotification.notify();
+        this.changeDetectorRef.detectChanges();
+    }
+    traverseColumns(columns, callback) {
+        columns.forEach((column) => {
+            if (column.isColumnGroup || column.isSpanColumn) {
+                this.traverseColumns(column.children, callback);
+            }
+            else {
+                callback(column);
+            }
+        });
+    }
     /**
      * Applies the minimum possible width for the specified column,
      * so that the whole text fits without wrapping. This method expects the Grid
@@ -1615,7 +1741,7 @@ export class GridComponent {
             return;
         }
         if (isSpanColumnComponent(target) && !options.before) {
-            target = target.childColumns.last;
+            target = target.children.last;
         }
         this.reorder({
             before: options.before,
@@ -1623,37 +1749,6 @@ export class GridComponent {
             target: target
         });
     }
-    /**
-     * A function which determines if a specific row is expanded.
-     */
-    set isDetailExpanded(callback) {
-        this.detailsService.userCallback = callback;
-    }
-    get isDetailExpanded() {
-        return this.detailsService.userCallback;
-    }
-    /**
-     * A function which determines if a specific group row is expanded.
-     */
-    set isGroupExpanded(callback) {
-        this.groupsService.userCallback = callback;
-        this.groupable = isPresent(callback);
-    }
-    get isGroupExpanded() {
-        return this.groupsService.userCallback;
-    }
-    /**
-     * @hidden
-     */
-    handleReorderEvents(ev, evType) {
-        this.rowReorderService[evType](ev);
-    }
-    /**
-     * @hidden
-     */
-    get flatData() {
-        return isArray(this.data) ? this.data : this.data.data;
-    }
     /**
      * @hidden
      */
@@ -1707,7 +1802,7 @@ export class GridComponent {
         let toSkip = 1;
         // Possible only when called from the API.
         if (source.isSpanColumn) {
-            toSkip += source.childColumns.length;
+            toSkip += source.children.length;
         }
         let i = 0;
         while (i < expandedColumns.length) {
@@ -1903,7 +1998,13 @@ export class GridComponent {
                     this.blockArrowSelection = true;
                 }
                 this.dataStateChange.emit(x);
+                this.gridStateChange.emit({ ...x, columnsState: this.currentState.columnsState, currentData: this.currentState.currentData });
+                if (this.undoRedoService) {
+                    this.undoRedoService.originalEvent = x;
+                }
             });
+        this.stateChangeSubscription.add(merge(this.columnReorder, this.columnResize, this.columnVisibilityChange, this.columnLockedChange, this.columnStickyChange).pipe(flatMap(() => this.ngZone.onStable.pipe(take(1))))
+            .subscribe(() => this.ngZone.run(() => this.gridStateChange.emit(this.currentState))));
     }
     attachEditHandlers() {
         if (!this.editService) {
@@ -2196,8 +2297,8 @@ export class GridComponent {
         this.dragTargetContainer?.notify();
         this.dropTargetContainer?.notify();
     }
-    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", gridResizable: "gridResizable", 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", "class.k-grid-resizable": "this.isResizable", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
+    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.AdaptiveService }, { token: i25.AdaptiveGridService }, { token: i26.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", adaptiveMode: "adaptiveMode", 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", gridResizable: "gridResizable", rowReorderable: "rowReorderable", navigable: "navigable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", showInactiveTools: "showInactiveTools", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", gridStateChange: "gridStateChange", 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", "class.k-grid-resizable": "this.isResizable", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
             BrowserSupportService,
             LocalizationService,
             ColumnInfoService,
@@ -2243,8 +2344,11 @@ export class GridComponent {
             SizingOptionsService,
             RowReorderService,
             ClipboardService,
-            RowspanService
-        ], 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: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+            RowspanService,
+            AdaptiveGridService,
+            ColumnMenuService,
+            MenuTabbingService
+        ], 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: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, 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"
@@ -2375,6 +2479,21 @@ export class GridComponent {
             i18n-filterClearButton="kendo.grid.filterClearButton|The text of the clear filter button"
             filterClearButton="Clear"
 
+            i18n-sortClearButton="kendo.grid.sortClearButton|The text of the clear sort button located in the Sort Toolbar Tool and adaptive Sort Toolbar Tool"
+            sortClearButton="Clear sorting"
+
+            i18n-adaptiveCloseButtonTitle="kendo.grid.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
+
+            i18n-adaptiveBackButtonTitle="kendo.grid.adaptiveBackButtonTitle|The title of the Back button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveBackButtonTitle="Back"
+
+            i18n-filterClearAllButton="kendo.grid.filterClearAllButton|The text of the clear all filters button located in the Filter Toolbar Tool and adaptive Filter Toolbar Tool"
+            filterClearAllButton="Clear all filters"
+
+            i18n-sortDoneButton="kendo.grid.sortDoneButton|The text of the done sort button"
+            sortDoneButton="Done"
+
             i18n-filterAndLogic="kendo.grid.filterAndLogic|The text of the And filter logic"
             filterAndLogic="And"
 
@@ -2396,6 +2515,18 @@ export class GridComponent {
             i18n-columns="kendo.grid.columns|The text for the Grid Column Chooser and Column Chooser toolbar tool"
             columns="Columns"
 
+            i18n-columns="kendo.grid.columnsSubtitle|The subtitle for the adaptive Grid Column Chooser and Column Chooser toolbar tool"
+            columnsSubtitle="Selected fields are visible"
+
+            i18n-columns="kendo.grid.adaptiveFilterTitle|The title that is displayed in the adaptive Filter Toolbar Tool and Filter Menu"
+            adaptiveFilterTitle="Filter by"
+
+            i18n-columns="kendo.grid.adaptiveFilterOperatorsTitle|The title that is displayed in the Operators Action Sheet"
+            adaptiveFilterOperatorsTitle="Operators"
+
+            i18n-columns="kendo.grid.adaptiveSortTitle|The title that is displayed in the adaptive Sort Toolbar Tool"
+            adaptiveSortTitle="Sort by"
+
             i18n-lock="kendo.grid.lock|The text shown in the column menu for the lock item"
             lock="Lock"
 
@@ -2483,6 +2614,27 @@ export class GridComponent {
             i18n-bottomToolbarLabel="kendo.grid.bottomToolbarLabel|The label for the Grid bottom toolbar"
             bottomToolbarLabel="Bottom toolbar"
 
+            i18n-editToolbarToolText="kendo.grid.editToolbarToolText|The text for the Grid Edit toolbar tool"
+            editToolbarToolText="Edit"
+
+            i18n-saveToolbarToolText="kendo.grid.saveToolbarToolText|The text for the Grid Save toolbar tool"
+            saveToolbarToolText="Save"
+
+            i18n-addToolbarToolText="kendo.grid.addToolbarToolText|The text for the Grid Add toolbar tool"
+            addToolbarToolText="Add"
+
+            i18n-cancelToolbarToolText="kendo.grid.cancelToolbarToolText|The text for the Grid Cancel toolbar tool"
+            cancelToolbarToolText="Cancel"
+
+            i18n-removeToolbarToolText="kendo.grid.removeToolbarToolText|The text for the Grid Remove toolbar tool"
+            removeToolbarToolText="Delete"
+
+            i18n-excelExportToolbarToolText="kendo.grid.excelExportToolbarToolText|The text for the Grid Excel export toolbar tool"
+            excelExportToolbarToolText="Excel Export"
+
+            i18n-pdfExportToolbarToolText="kendo.grid.pdfExportToolbarToolText|The text for the Grid PDF export toolbar tool"
+            pdfExportToolbarToolText="PDF Export"
+
             i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
             groupPanelLabel="Group panel"
 
@@ -2519,9 +2671,12 @@ export class GridComponent {
             i18n-removeConfirmationDialogRejectText="kendo.grid.removeConfirmationDialogRejectText|The text of the built-in remove item confirmation Dialog reject action button"
             removeConfirmationDialogRejectText="No"
 
-            i18n-externalEditingTitle="kendo.grid.externalEditingTitle|The title of the built-in external editing form container"
+            i18n-externalEditingTitle="kendo.grid.externalEditingTitle|The title of the built-in external editing form container when editing an item"
             externalEditingTitle="Edit"
 
+            i18n-externalEditingAddTitle="kendo.grid.externalEditingAddTitle|The title of the built-in external editing form container when adding a new item"
+            externalEditingAddTitle="Add"
+
             i18n-externalEditingSaveText="kendo.grid.externalEditingSaveText|The text of the external editing form Save button"
             externalEditingSaveText="Save"
 
@@ -2934,9 +3089,11 @@ export class GridComponent {
             </kendo-pager-info>
         </ng-template>
         <div #dialogContainer></div>
-        
+
+        <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
+
         <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: 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", "cursorStyle", "hintContext"], 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", "totalColumnsCount"] }, { 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 });
+    `, 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", "cursorStyle", "hintContext"], 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", "totalColumnsCount"] }, { 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: i27.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i27.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i27.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i27.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i27.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i27.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i27.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i27.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i27.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -2989,7 +3146,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SizingOptionsService,
                         RowReorderService,
                         ClipboardService,
-                        RowspanService
+                        RowspanService,
+                        AdaptiveGridService,
+                        ColumnMenuService,
+                        MenuTabbingService
                     ],
                     selector: 'kendo-grid',
                     template: `
@@ -3123,6 +3283,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-filterClearButton="kendo.grid.filterClearButton|The text of the clear filter button"
             filterClearButton="Clear"
 
+            i18n-sortClearButton="kendo.grid.sortClearButton|The text of the clear sort button located in the Sort Toolbar Tool and adaptive Sort Toolbar Tool"
+            sortClearButton="Clear sorting"
+
+            i18n-adaptiveCloseButtonTitle="kendo.grid.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
+
+            i18n-adaptiveBackButtonTitle="kendo.grid.adaptiveBackButtonTitle|The title of the Back button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveBackButtonTitle="Back"
+
+            i18n-filterClearAllButton="kendo.grid.filterClearAllButton|The text of the clear all filters button located in the Filter Toolbar Tool and adaptive Filter Toolbar Tool"
+            filterClearAllButton="Clear all filters"
+
+            i18n-sortDoneButton="kendo.grid.sortDoneButton|The text of the done sort button"
+            sortDoneButton="Done"
+
             i18n-filterAndLogic="kendo.grid.filterAndLogic|The text of the And filter logic"
             filterAndLogic="And"
 
@@ -3144,6 +3319,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-columns="kendo.grid.columns|The text for the Grid Column Chooser and Column Chooser toolbar tool"
             columns="Columns"
 
+            i18n-columns="kendo.grid.columnsSubtitle|The subtitle for the adaptive Grid Column Chooser and Column Chooser toolbar tool"
+            columnsSubtitle="Selected fields are visible"
+
+            i18n-columns="kendo.grid.adaptiveFilterTitle|The title that is displayed in the adaptive Filter Toolbar Tool and Filter Menu"
+            adaptiveFilterTitle="Filter by"
+
+            i18n-columns="kendo.grid.adaptiveFilterOperatorsTitle|The title that is displayed in the Operators Action Sheet"
+            adaptiveFilterOperatorsTitle="Operators"
+
+            i18n-columns="kendo.grid.adaptiveSortTitle|The title that is displayed in the adaptive Sort Toolbar Tool"
+            adaptiveSortTitle="Sort by"
+
             i18n-lock="kendo.grid.lock|The text shown in the column menu for the lock item"
             lock="Lock"
 
@@ -3231,6 +3418,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-bottomToolbarLabel="kendo.grid.bottomToolbarLabel|The label for the Grid bottom toolbar"
             bottomToolbarLabel="Bottom toolbar"
 
+            i18n-editToolbarToolText="kendo.grid.editToolbarToolText|The text for the Grid Edit toolbar tool"
+            editToolbarToolText="Edit"
+
+            i18n-saveToolbarToolText="kendo.grid.saveToolbarToolText|The text for the Grid Save toolbar tool"
+            saveToolbarToolText="Save"
+
+            i18n-addToolbarToolText="kendo.grid.addToolbarToolText|The text for the Grid Add toolbar tool"
+            addToolbarToolText="Add"
+
+            i18n-cancelToolbarToolText="kendo.grid.cancelToolbarToolText|The text for the Grid Cancel toolbar tool"
+            cancelToolbarToolText="Cancel"
+
+            i18n-removeToolbarToolText="kendo.grid.removeToolbarToolText|The text for the Grid Remove toolbar tool"
+            removeToolbarToolText="Delete"
+
+            i18n-excelExportToolbarToolText="kendo.grid.excelExportToolbarToolText|The text for the Grid Excel export toolbar tool"
+            excelExportToolbarToolText="Excel Export"
+
+            i18n-pdfExportToolbarToolText="kendo.grid.pdfExportToolbarToolText|The text for the Grid PDF export toolbar tool"
+            pdfExportToolbarToolText="PDF Export"
+
             i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
             groupPanelLabel="Group panel"
 
@@ -3267,9 +3475,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-removeConfirmationDialogRejectText="kendo.grid.removeConfirmationDialogRejectText|The text of the built-in remove item confirmation Dialog reject action button"
             removeConfirmationDialogRejectText="No"
 
-            i18n-externalEditingTitle="kendo.grid.externalEditingTitle|The title of the built-in external editing form container"
+            i18n-externalEditingTitle="kendo.grid.externalEditingTitle|The title of the built-in external editing form container when editing an item"
             externalEditingTitle="Edit"
 
+            i18n-externalEditingAddTitle="kendo.grid.externalEditingAddTitle|The title of the built-in external editing form container when adding a new item"
+            externalEditingAddTitle="Add"
+
             i18n-externalEditingSaveText="kendo.grid.externalEditingSaveText|The text of the external editing form Save button"
             externalEditingSaveText="Save"
 
@@ -3682,7 +3893,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </kendo-pager-info>
         </ng-template>
         <div #dialogContainer></div>
-        
+
+        <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
+
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
                     standalone: true,
@@ -3691,10 +3904,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TableDirective, GridTableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective,
                         ListComponent, DragTargetContainerDirective, DropTargetContainerDirective, DraggableDirective,
                         GridMarqueeDirective, FooterComponent, TableBodyComponent, LoadingComponent, StatusBarComponent,
-                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet
+                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet, AdaptiveRendererComponent
                     ]
                 }]
-        }], 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: [{
+        }], 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.AdaptiveService }, { type: i25.AdaptiveGridService }, { type: i26.RowReorderService }]; }, propDecorators: { data: [{
                 type: Input
             }], pageSize: [{
                 type: Input
@@ -3702,6 +3915,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], rowHeight: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], detailRowHeight: [{
                 type: Input
             }], skip: [{
@@ -3736,8 +3951,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], navigable: [{
                 type: Input
-            }], navigatable: [{
-                type: Input
             }], autoSize: [{
                 type: Input
             }], rowClass: [{
@@ -3760,6 +3973,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], hideHeader: [{
                 type: Input
+            }], showInactiveTools: [{
+                type: Input
+            }], isDetailExpanded: [{
+                type: Input
+            }], isGroupExpanded: [{
+                type: Input
             }], filterChange: [{
                 type: Output
             }], pageChange: [{
@@ -3774,6 +3993,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], dataStateChange: [{
                 type: Output
+            }], gridStateChange: [{
+                type: Output
             }], groupExpand: [{
                 type: Output
             }], groupCollapse: [{
@@ -3898,8 +4119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dialogContainer: [{
                 type: ViewChild,
                 args: ['dialogContainer', { read: ViewContainerRef }]
-            }], isDetailExpanded: [{
-                type: Input
-            }], isGroupExpanded: [{
-                type: Input
+            }], adaptiveRenderer: [{
+                type: ViewChild,
+                args: [AdaptiveRendererComponent]
             }] } });