@progress/kendo-angular-grid 19.3.0-develop.23 → 19.3.0-develop.24

package/fesm2022/progress-kendo-angular-grid.mjs

@@ -6,7 +6,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ElementRef, ViewContainerRef, ViewEncapsulation, inject, Injector, NgModule } from '@angular/core';
 import { merge, of, Subject, zip as zip$1, from, Subscription, interval, fromEvent, Observable, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, isPresent as isPresent$1, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, closest as closest$1, hasObservers, ResizeSensorComponent, closestInScope as closestInScope$1, isFocusable as isFocusable$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, PreventableEvent as PreventableEvent$1, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, closest as closest$1, hasObservers, ResizeSensorComponent, closestInScope as closestInScope$1, isFocusable as isFocusable$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, PreventableEvent as PreventableEvent$1, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
@@ -14,7 +14,7 @@ import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltR
 import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, tap, throttleTime, debounceTime, distinctUntilChanged, skip, auditTime, bufferCount, flatMap } from 'rxjs/operators';
 import * as i1$2 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import * as i52 from '@progress/kendo-angular-pager';
+import * as i53 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService, PagerTemplateDirective, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import { orderBy, isCompositeFilterDescriptor, groupBy, process, filterBy } from '@progress/kendo-data-query';
 import { NgFor, NgIf, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgClass, NgStyle, NgSwitchDefault, KeyValuePipe } from '@angular/common';
@@ -26,16 +26,16 @@ import * as i1$6 from '@progress/kendo-angular-buttons';
 import { ChipListComponent, ChipComponent, ButtonComponent, Button, KENDO_BUTTON, ButtonDirective } from '@progress/kendo-angular-buttons';
 import * as i1$5 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';
-import * as i4 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
 import * as i2$1 from '@progress/kendo-angular-utils';
 import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
-import * as i4$1 from '@progress/kendo-angular-inputs';
+import * as i4 from '@progress/kendo-angular-inputs';
 import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_CHECKBOX } from '@progress/kendo-angular-inputs';
 import * as i5 from '@progress/kendo-angular-dateinputs';
 import { DatePickerComponent, DatePickerCustomMessagesComponent, KENDO_DATEPICKER, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dateinputs';
-import * as i53 from '@progress/kendo-angular-toolbar';
-import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
+import * as i54 from '@progress/kendo-angular-toolbar';
+import { ToolBarToolComponent, KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { TabStripComponent, TabStripTabComponent, TabTitleDirective, TabContentDirective } from '@progress/kendo-angular-layout';
 import { saveAs } from '@progress/kendo-file-saver';
@@ -45,7 +45,7 @@ import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponen
 import { validatePackage } from '@progress/kendo-licensing';
 import { ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective } from '@progress/kendo-angular-navigation';
 import * as i3 from '@progress/kendo-angular-label';
-import { KENDO_LABELS } from '@progress/kendo-angular-label';
+import { KENDO_LABELS, LabelDirective } from '@progress/kendo-angular-label';
 import * as i1$7 from '@progress/kendo-angular-dialog';
 import { DialogContentBase, DialogActionsComponent, WindowContainerDirective, DialogService, DialogContainerService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
 import { AIPromptComponent, AIPromptCustomMessagesComponent, PromptViewComponent, OutputViewComponent, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective } from '@progress/kendo-angular-conversational-ui';
@@ -758,6 +758,7 @@ const isNavigable = element => !element.disabled && (isButton(element) || isNavi
  */
 class DefaultFocusableElement {
     renderer;
+    ctx;
     get enabled() {
         return this.focusable && !this.focusable.disabled;
     }
@@ -766,8 +767,9 @@ class DefaultFocusableElement {
     }
     element;
     focusable;
-    constructor(host, renderer) {
+    constructor(host, renderer, ctx) {
         this.renderer = renderer;
+        this.ctx = ctx;
         this.element = host.nativeElement;
         this.focusable = findFocusable(this.element, false) || this.element;
     }
@@ -775,7 +777,17 @@ class DefaultFocusableElement {
         return this.canFocus() && isNavigable(this.element);
     }
     toggle(active) {
-        this.renderer.setAttribute(this.focusable, 'tabIndex', active ? '0' : '-1');
+        if (this.ctx.grid?.isStacked) {
+            if (active) {
+                this.renderer.setAttribute(this.focusable, 'tabindex', '0');
+            }
+            else {
+                this.renderer.removeAttribute(this.focusable, 'tabindex');
+            }
+        }
+        else {
+            this.renderer.setAttribute(this.focusable, 'tabindex', active ? '0' : '-1');
+        }
     }
     focus() {
         if (this.focusable) {
@@ -944,7 +956,7 @@ class FocusableDirective {
     }
     ngAfterViewInit() {
         if (!this.element && this.ctx.navigable) {
-            this.element = new DefaultFocusableElement(this.hostElement, this.renderer);
+            this.element = new DefaultFocusableElement(this.hostElement, this.renderer, this.ctx);
         }
         if (this.group && this.element) {
             this.toggle(this.group.isActive);
@@ -1057,7 +1069,7 @@ class NavigationCursor {
     set metadata(value) {
         this._metadata = value;
         if (isPresent(value)) {
-            const newActiveCol = value.hasDetailTemplate ? 1 : 0;
+            const newActiveCol = value.hasDetailTemplate && !this.metadata.isStacked ? 1 : 0;
             const shouldChange = this.activeRow < value.headerRows && this.activeCol === 0;
             if (shouldChange && newActiveCol !== this.activeCol) {
                 this.activeCol = newActiveCol;
@@ -1177,6 +1189,9 @@ class NavigationCursor {
             (this.metadata.hasDetailTemplate && (!row || !row.groupItem) ? 1 : 0);
     }
     offsetCol(offset) {
+        if (this.metadata.isStacked) {
+            return false;
+        }
         const prevRow = this.model.findRow(this.virtualRow);
         const lastIndex = this.lastCellIndex(prevRow);
         const virtualCol = this.virtualCol;
@@ -1256,6 +1271,9 @@ class NavigationCursor {
         if (!cell && (this.metadata.virtualColumns || this.metadata.hasDetailTemplate)) {
             return this.activate(this.virtualRow + offset, this.virtualCol);
         }
+        if (!cell) {
+            return false;
+        }
         this.virtualRow = cell.rowIndex;
         return this.activate(this.virtualRow, cell.colIndex);
     }
@@ -2186,16 +2204,16 @@ const GridConfigurationErrorMessages = {
 /**
  * @hidden
  */
-const isSpanColumn = column => column.isSpanColumn;
+const isSpanColumn = column => column?.isSpanColumn;
 /**
  * @hidden
  */
-const isCheckboxColumn = column => column.isCheckboxColumn;
+const isCheckboxColumn = column => column?.isCheckboxColumn;
 /**
  * @hidden
  */
-const isRowReorderColumn = column => column.isRowReorderColumn;
-const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
+const isRowReorderColumn = column => column?.isRowReorderColumn;
+const isColumnContainer = column => column?.isColumnGroup || isSpanColumn(column);
 let columnId = 0;
 /**
  * The base class for the column components of the Grid.
@@ -2804,7 +2822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * @hidden
  */
 function isColumnComponent(column) {
-    return isPresent(column.field);
+    return isPresent(column?.field);
 }
 /**
  * Represents a column in the Grid.
@@ -3554,7 +3572,12 @@ class NavigationService {
         // Closing the editor will not always trigger focusout in Firefox.
         // To get around this, we ensure that the cell is closed after editing.
         this.editService.changes.pipe(filter(e => e.action !== 'edit' && this.mode === 2 /* NavigationMode.Content */), filter((e) => e.action === 'cellClose' && !e.prevented), switchMap(onStable))
-            .subscribe(() => this.leaveCell()));
+            .subscribe((e) => {
+            const isInStackedCell = closest(e.originalEvent?.target, (el) => hasClasses$1(el, 'k-grid-stack-content'));
+            if (!isInStackedCell) {
+                this.leaveCell();
+            }
+        }));
         this.subs.add(this.pagerContextService.pageChange
             .subscribe(() => this.cursor.reset(0, 0)));
         this.subs.add(this.domEvents.keydown
@@ -3736,7 +3759,7 @@ class NavigationService {
             success = fwd ? this.cursor.moveDown(1) : this.cursor.moveUp(1);
             if (success) {
                 const row = this.cursor.row;
-                const colIdx = fwd ? 0 : this.cursor.lastCellIndex(row);
+                const colIdx = fwd || this.isStackedMode ? 0 : this.cursor.lastCellIndex(row);
                 this.cursor.reset(row.index, colIdx);
             }
         }
@@ -3754,6 +3777,12 @@ class NavigationService {
         if (!cell) {
             return;
         }
+        if (this.tableCellEntered && this.isStackedMode) {
+            this.stackedCellEntered = true;
+        }
+        else {
+            this.tableCellEntered = true;
+        }
         const group = cell.focusGroup;
         const focusable = group && group.canFocus();
         this.mode = focusable ? 2 /* NavigationMode.Content */ : 1 /* NavigationMode.Cursor */;
@@ -3761,6 +3790,9 @@ class NavigationService {
         if (focusable) {
             this.activateRow();
             group.focus();
+            if (this.isStackedMode && this.stackedFocusedCellIndex === -1) {
+                this.stackedFocusedCellIndex = 0;
+            }
         }
     }
     leaveCell() {
@@ -3768,11 +3800,22 @@ class NavigationService {
         if (!cell) {
             return;
         }
+        if (this.tableCellEntered) {
+            if (this.stackedCellEntered) {
+                this.stackedCellEntered = false;
+            }
+            else {
+                this.tableCellEntered = false;
+            }
+        }
         const group = cell.focusGroup;
         const focusable = group && group.canFocus();
         if (!focusable) {
             this.deactivateElements();
         }
+        if (this.isStackedMode && this.stackedFocusedCellIndex > -1) {
+            this.stackedFocusedCellIndex = -1;
+        }
         this.mode = 1 /* NavigationMode.Cursor */;
         this.cursor.announce();
     }
@@ -3787,11 +3830,11 @@ class NavigationService {
             .forEach(cell => cell.focusGroup && cell.focusGroup.activate());
     }
     moveCursorFwd() {
-        this.lastCellRowIndex = this.activeCell.rowIndex;
+        this.lastCellRowIndex = this.activeCell?.rowIndex;
         return this.ctx.localization.rtl ? this.cursor.moveLeft() : this.cursor.moveRight();
     }
     moveCursorBwd() {
-        this.lastCellRowIndex = this.activeCell.rowIndex;
+        this.lastCellRowIndex = this.activeCell?.rowIndex;
         return this.ctx.localization.rtl ? this.cursor.moveRight() : this.cursor.moveLeft();
     }
     onCursorKeydown(args) {
@@ -3931,6 +3974,15 @@ class NavigationService {
                 break;
             case Keys.Enter:
             case Keys.F2: {
+                if (this.stackedCellEntered) {
+                    if (args.keyCode === Keys.F2 && row.dataRowIndex > -1) {
+                        this.zone.run(() => {
+                            this.editService.beginEdit(row.dataRowIndex);
+                        });
+                        this.enterCell();
+                    }
+                    break;
+                }
                 const groupItem = row.groupItem;
                 if (groupItem) {
                     this.zone.run(() => this.groupsService.toggleRow(groupItem));
@@ -3939,6 +3991,11 @@ class NavigationService {
                     this.zone.run(() => this.detailsService.toggleRow(row.dataRowIndex, row.dataItem));
                 }
                 else {
+                    if (args.keyCode === Keys.F2 && row.dataRowIndex > -1) {
+                        this.zone.run(() => {
+                            this.editService.beginEdit(row.dataRowIndex);
+                        });
+                    }
                     this.enterCell();
                     if (!this.cursor.cell.focusGroup.isNavigable()) {
                         preventDefault = true;
@@ -3946,6 +4003,17 @@ class NavigationService {
                 }
                 break;
             }
+            case Keys.Backspace:
+            case Keys.Delete:
+                if (this.activeRow && this.activeRow.dataRowIndex >= 0 && this.activeRow.dataItem) {
+                    if (!row.groupItem && !this.cursor.cell.detailExpandCell) {
+                        this.zone.run(() => {
+                            this.editService.remove(this.activeRow.dataRowIndex);
+                        });
+                        preventDefault = true;
+                    }
+                }
+                break;
             default:
                 if (!args.ctrlKey && !args.altKey && isPrintableCharacter(args.key)) {
                     this.enterCell();
@@ -3969,6 +4037,13 @@ class NavigationService {
         }
         const confirm = !args.defaultPrevented && args.keyCode === Keys.Enter && isTextInput(args.target);
         if (args.keyCode === Keys.Escape || args.keyCode === Keys.F2 || confirm) {
+            if (this.tableCellEntered && args.keyCode === Keys.F2 && this.activeRow.dataRowIndex > -1) {
+                this.zone.run(() => {
+                    this.editService.beginEdit(this.activeRow.dataRowIndex);
+                });
+                this.enterCell();
+                return;
+            }
             this.leaveCell();
             this.cursor.reset();
             args.stopPropagation();
@@ -4037,6 +4112,12 @@ class NavigationService {
         this.cursor.announce();
     }
     onKeydown(args) {
+        if (this.isStackedMode) {
+            this.handleStackedKeydown(args);
+            if (args.defaultPrevented) {
+                return;
+            }
+        }
         if (this.mode === 1 /* NavigationMode.Cursor */) {
             this.onCursorKeydown(args);
         }
@@ -4125,12 +4206,80 @@ class NavigationService {
         const offset = direction === 'Up' ? Math.abs(this.lastCellRowIndex - this.activeRowIndex) : (this.activeRowIndex + cellRowspan - this.lastCellRowIndex - 1);
         return offset;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: i52.PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: ColumnResizingService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    get isStackedMode() {
+        return this.ctx?.grid?.isStacked;
+    }
+    handleStackedKeydown(args) {
+        const target = args.target;
+        const stackedCell = closest(target, (el) => hasClasses$1(el, 'k-grid-stack-cell'));
+        const tableCell = closest(target, (el) => hasClasses$1(el, 'k-table-td'));
+        const isInStackedCell = closest(target, (el) => hasClasses$1(el, 'k-grid-stack-content'));
+        if (!stackedCell || !tableCell) {
+            return;
+        }
+        if (args.keyCode === Keys.Tab) {
+            this.handleStackedTabNavigation(args);
+        }
+        else if (args.keyCode === Keys.Backspace || args.keyCode === Keys.Delete) {
+            if (this.activeRow && this.activeRow.dataRowIndex >= 0 && this.activeRow.dataItem) {
+                const row = this.cursor.row;
+                if (!row.groupItem && !this.cursor.cell.detailExpandCell) {
+                    this.zone.run(() => {
+                        this.editService.remove(this.activeRow.dataRowIndex);
+                    });
+                    args.preventDefault();
+                }
+            }
+        }
+        else if (isInStackedCell && (args.keyCode === Keys.Enter || args.keyCode === Keys.Escape)) {
+            this.editService.closeCell(args);
+            this.activeCell.focusGroup.activate();
+            this.activeCell.focusGroup.focusableChildren[this.stackedFocusedCellIndex]?.focus();
+            args.preventDefault();
+        }
+    }
+    stackedFocusedCellIndex = -1;
+    tableCellEntered = false;
+    stackedCellEntered = false;
+    handleStackedTabNavigation(args) {
+        if (!isPresent$1(this.activeCell.focusGroup)) {
+            return;
+        }
+        if (this.stackedFocusedCellIndex === -1) {
+            return;
+        }
+        const stackedCells = this.activeCell.focusGroup.focusableChildren;
+        let nextIndex;
+        if (args.shiftKey) {
+            nextIndex = this.stackedFocusedCellIndex - 1;
+            if (nextIndex < 0) {
+                nextIndex = stackedCells.length - 1;
+            }
+        }
+        else {
+            nextIndex = this.stackedFocusedCellIndex + 1;
+            if (nextIndex >= stackedCells.length) {
+                nextIndex = 0;
+            }
+        }
+        let nextStackedCell = stackedCells[nextIndex];
+        if (nextStackedCell) {
+            if (nextStackedCell.hasFocus() || (isDocumentAvailable() && document.activeElement === nextStackedCell.hostElement.nativeElement)) {
+                // next cell is already focused (as a focusable child of the previous one), skip to the next one
+                nextIndex = args.shiftKey ? this.stackedFocusedCellIndex - 2 : this.stackedFocusedCellIndex + 2;
+                nextStackedCell = stackedCells[nextIndex];
+            }
+            nextStackedCell.focus();
+            this.stackedFocusedCellIndex = nextIndex;
+            args.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: i53.PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: ColumnResizingService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DomEventsService }, { type: i52.PagerContextService }, { type: ScrollRequestService }, { type: GroupsService }, { type: DetailsService }, { type: FocusRoot }, { type: EditService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: ColumnResizingService }, { type: FocusableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DomEventsService }, { type: i53.PagerContextService }, { type: ScrollRequestService }, { type: GroupsService }, { type: DetailsService }, { type: FocusRoot }, { type: EditService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: ColumnResizingService }, { type: FocusableDirective, decorators: [{
                     type: Optional
                 }] }]; } });
 
@@ -4495,12 +4644,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * @hidden
  */
 class ColGroupComponent {
+    ctx;
     columns = [];
     groups = [];
     detailTemplate;
     sort = new Array();
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    getColumnWidth(column) {
+        return this.isStacked ? '100%' : `${column.width}px`;
+    }
     get columnsToRender() {
-        return columnsToRender(this.columns);
+        return this.isStacked ? [new ColumnBase()] : columnsToRender(this.columns);
+    }
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
     }
     trackBy(index) {
         return index;
@@ -4518,13 +4677,13 @@ class ColGroupComponent {
     sortDescriptor(field) {
         return this.sort.find(item => item.field === field) || { field };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColGroupComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColGroupComponent, isStandalone: true, selector: "[kendoGridColGroup]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", sort: "sort" }, ngImport: i0, template: `
     <ng-container>
         <col [class.k-group-col]="true" *ngFor="let g of groups" />
-        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef"/>
+        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef && !isStacked"/>
         <col *ngFor="let column of columnsToRender; trackBy: trackBy;"
-            [style.width.px]="column.width"
+            [style.width]="getColumnWidth(column)"
             [class.k-sorted]="isSorted(getColumnComponent(column))"/>
     </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -4536,16 +4695,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
     <ng-container>
         <col [class.k-group-col]="true" *ngFor="let g of groups" />
-        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef"/>
+        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef && !isStacked"/>
         <col *ngFor="let column of columnsToRender; trackBy: trackBy;"
-            [style.width.px]="column.width"
+            [style.width]="getColumnWidth(column)"
             [class.k-sorted]="isSorted(getColumnComponent(column))"/>
     </ng-container>
     `,
                     standalone: true,
                     imports: [NgFor, NgIf]
                 }]
-        }], propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { columns: [{
                 type: Input
             }], groups: [{
                 type: Input
@@ -4817,6 +4976,7 @@ class ColumnsContainer {
     lockedLeafColumns = new QueryList();
     nonLockedLeafColumns = new QueryList();
     totalLevels = 0;
+    isStacked = false;
     changes = new EventEmitter();
     leafColumnsToRender = [];
     lockedColumnsToRender = [];
@@ -4825,6 +4985,7 @@ class ColumnsContainer {
     hasGroupFooter = false;
     hasFooter = false;
     unlockedWidth = 0;
+    totalColumnsWidth = 0;
     constructor(columns) {
         this.columns = columns;
     }
@@ -4868,6 +5029,7 @@ class ColumnsContainer {
                 else {
                     column.leafIndex = leafIndex++;
                 }
+                this.totalColumnsWidth += column.width || 0;
             }
             containerColumns.push(column);
             allColumns.push(column);
@@ -4907,7 +5069,7 @@ class ColumnInfoService {
         return this.columnsContainer.nonLockedLeafColumns;
     }
     get isLocked() {
-        return this.lockedLeafColumns.length > 0;
+        return this.lockedLeafColumns.length > 0 && !this.columnsContainer.isStacked;
     }
     get totalLevels() {
         return this.columnsContainer.totalLevels;
@@ -5597,6 +5759,9 @@ class GroupHeaderComponent {
             this.caretAltDownIcon;
         return icon;
     }
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: GroupsService }, { token: GroupInfoService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GroupHeaderComponent, isStandalone: true, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass", "class.k-table-group-row": "this.tableGroupRowClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!skipGroupDecoration">
@@ -5626,7 +5791,7 @@ class GroupHeaderComponent {
                             [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
-                    {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
+                        {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
                     </ng-container>
                     <ng-template
                         [templateContext]="{
@@ -5642,8 +5807,24 @@ class GroupHeaderComponent {
                     </ng-template>
                 </ng-container>
             </p>
+            <div class="k-grid-column-template" *ngIf="isStacked">
+                <ng-container *ngFor="let column of groupHeaderColumns; let index = index">
+                    <div class="k-column-template-item" *ngIf="column.groupHeaderColumnTemplateRef">
+                        <ng-template [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
+                            [ngTemplateOutletContext]="{
+                                group: item.data,
+                                aggregates: item.data?.aggregates,
+                                value: item.data?.value,
+                                field: item.data?.field,
+                                index: item.index,
+                                $implicit: item.data
+                                }">
+                        </ng-template>
+                    </div>
+                </ng-container>
+            </div>
         </td>
-        <ng-container *ngIf="hasGroupHeaderColumn">
+        <ng-container *ngIf="hasGroupHeaderColumn && !isStacked">
             <td *ngFor="let column of groupHeaderColumns; let index = index"
                 role="gridcell"
                 class="k-table-td"
@@ -5701,7 +5882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
-                    {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
+                        {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
                     </ng-container>
                     <ng-template
                         [templateContext]="{
@@ -5717,8 +5898,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-template>
                 </ng-container>
             </p>
+            <div class="k-grid-column-template" *ngIf="isStacked">
+                <ng-container *ngFor="let column of groupHeaderColumns; let index = index">
+                    <div class="k-column-template-item" *ngIf="column.groupHeaderColumnTemplateRef">
+                        <ng-template [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
+                            [ngTemplateOutletContext]="{
+                                group: item.data,
+                                aggregates: item.data?.aggregates,
+                                value: item.data?.value,
+                                field: item.data?.field,
+                                index: item.index,
+                                $implicit: item.data
+                                }">
+                        </ng-template>
+                    </div>
+                </ng-container>
+            </div>
         </td>
-        <ng-container *ngIf="hasGroupHeaderColumn">
+        <ng-container *ngIf="hasGroupHeaderColumn && !isStacked">
             <td *ngFor="let column of groupHeaderColumns; let index = index"
                 role="gridcell"
                 class="k-table-td"
@@ -8893,7 +9090,7 @@ class StringFilterMenuInputComponent {
                 [ngModel]="currentFilter?.value ?? null">
             </kendo-textbox>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterMenuInputComponent, decorators: [{
             type: Component,
@@ -10655,7 +10852,7 @@ class FilterMenuContainerComponent {
                 </div>
             </div>
         </form>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
@@ -11378,7 +11575,7 @@ class StringFilterCellComponent extends StringFilterComponent {
                 [ngModel]="currentFilter?.value ?? null"
             ></kendo-textbox>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterCellComponent, decorators: [{
             type: Component,
@@ -11696,6 +11893,9 @@ class FilterRowComponent {
         const colIndex = this.lockedColumnsCount + columnIndex;
         return this.detailTemplate?.templateRef ? colIndex + 1 : colIndex;
     }
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterRowComponent, isStandalone: true, selector: "[kendoGridFilterRow]", inputs: { columns: "columns", filter: "filter", groups: "groups", detailTemplate: "detailTemplate", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
         <td
@@ -11705,7 +11905,7 @@ class FilterRowComponent {
         </td>
         <td
             class="k-table-td k-hierarchy-cell"
-            *ngIf="detailTemplate?.templateRef"
+            *ngIf="detailTemplate?.templateRef && !isStacked"
             role="presentation">
         </td>
         <td *ngFor="let column of columns; let columnIndex = index"
@@ -11735,7 +11935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </td>
         <td
             class="k-table-td k-hierarchy-cell"
-            *ngIf="detailTemplate?.templateRef"
+            *ngIf="detailTemplate?.templateRef && !isStacked"
             role="presentation">
         </td>
         <td *ngFor="let column of columns; let columnIndex = index"
@@ -12598,13 +12798,13 @@ class ToolbarToolBase {
         this.clickSub.unsubscribe();
     }
     onClick(_e) { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolBase, deps: [{ token: i53.ToolBarButtonComponent }, { token: 'command' }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolBase, deps: [{ token: i54.ToolBarButtonComponent }, { token: 'command' }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarToolBase, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolBase, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: i53.ToolBarButtonComponent }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i54.ToolBarButtonComponent }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['command']
                 }] }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
@@ -12783,7 +12983,7 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
     get buttonElement() {
         return this.host.getButton();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i2.PopupService }, { token: i53.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i53.RefreshService }, { token: AdaptiveGridService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i2.PopupService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i54.RefreshService }, { token: AdaptiveGridService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, decorators: [{
@@ -12792,7 +12992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridColumnChooserTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i2.PopupService }, { type: i53.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i53.RefreshService }, { type: AdaptiveGridService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i2.PopupService }, { type: i54.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i54.RefreshService }, { type: AdaptiveGridService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
                 type: Input
             }], allowHideAll: [{
                 type: Input
@@ -15730,11 +15930,14 @@ const createTable = (colGroups, headers, bodies, footers, size) => {
     for (let idx = 1; idx < colGroups.length; idx++) {
         appendNodes(colGroup, colGroups[idx].querySelectorAll('col'));
     }
-    const header = createTableElement(headers);
     const body = createTableElement(bodies);
-    setFirstCellClass(header, headers);
+    let header;
+    if (headers.length > 0) {
+        header = createTableElement(headers);
+        setFirstCellClass(header, headers);
+    }
     table.appendChild(colGroup);
-    table.appendChild(header);
+    header && table.appendChild(header);
     table.appendChild(body);
     if (footers.length) {
         const footer = createTableElement(footers);
@@ -15751,17 +15954,23 @@ const exportElement = (wrapper, size) => {
     let result;
     if (content) {
         const colGroups = [content.querySelector('colgroup')];
-        const headers = [query.header().querySelector('thead')];
         const bodies = [content.querySelector('tbody')];
+        const header = query.header();
         const footer = query.footer();
+        const headers = [];
         const footers = [];
+        if (header) {
+            headers.push(header.querySelector('thead'));
+        }
         if (footer) {
             footers.push(footer.querySelector('tfoot'));
         }
         const lockedContent = query.content(true);
         if (lockedContent) {
+            if (headers.length > 0) {
+                headers.unshift(query.header(true).querySelector('thead'));
+            }
             colGroups.unshift(lockedContent.querySelector('colgroup'));
-            headers.unshift(query.header(true).querySelector('thead'));
             bodies.unshift(lockedContent.querySelector('tbody'));
             if (footer) {
                 footers.unshift(query.footer(true).querySelector('tfoot'));
@@ -15920,7 +16129,9 @@ class PDFComponent extends PDFExportComponent {
             const overlayContent = overlayQuery.content();
             overlayContent.scrollTop = content.scrollTop;
             overlayContent.scrollLeft = content.scrollLeft;
-            overlayQuery.header().scrollLeft = query.header().scrollLeft;
+            if (!this.ctx?.grid?.isStacked) {
+                overlayQuery.header().scrollLeft = query.header().scrollLeft;
+            }
             const footer = query.footer();
             if (footer) {
                 overlayQuery.footer().scrollLeft = footer.scrollLeft;
@@ -17331,7 +17542,7 @@ class CellSelectionService {
     nonSelectableRows = new Map();
     get enableMarquee() {
         const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
-        if (!this.settings || checkboxOnly) {
+        if (!this.settings || checkboxOnly || this.settings.isStacked) {
             return false;
         }
         const selectableSettings = this.settings.selectable;
@@ -17367,7 +17578,7 @@ class CellSelectionService {
         this.settings = settings;
         this.currentSelection = [];
         this.nonSelectableRows = new Map();
-        if (settings.selectable && settings.selectable.enabled !== false) {
+        if (settings.selectable && settings.selectable.enabled !== false && !settings.isStacked) {
             const iterator = this.getIterator();
             let item = iterator.next();
             while (!item.done) {
@@ -17391,7 +17602,7 @@ class CellSelectionService {
         }
     }
     isCellSelected(item, col) {
-        if (this.settings && this.active) {
+        if (this.settings && this.active && !this.settings.isStacked) {
             const selectedCellArgs = this.settings.cellSelected({ dataItem: item.data, index: item.index }, col, col.leafIndex);
             return this.options.enabled && selectedCellArgs.selected && !this.nonSelectableRows.has(item.index);
         }
@@ -17402,6 +17613,9 @@ class CellSelectionService {
             this.dragging = false;
             return;
         }
+        if (this.settings.isStacked) {
+            return;
+        }
         let ev;
         const ctrlKey = event.ctrlKey || event.metaKey;
         if (this.options.mode === "single" && ctrlKey && this.isCellSelected(item, item.column)) {
@@ -17757,7 +17971,7 @@ class SelectAllCheckboxDirective {
                 return undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i4$1.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i4.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
@@ -17766,7 +17980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i4$1.CheckBoxComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i4.CheckBoxComponent, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -18124,6 +18338,9 @@ class HeaderComponent {
     get leafColumns() {
         return this._leafColumns;
     }
+    get isStacked() {
+        return this.contextService.grid?.isStacked;
+    }
     isReorderable(column) {
         return this.reorderable && column.reorderable;
     }
@@ -18226,7 +18443,7 @@ class HeaderComponent {
             </th>
             <th class="k-hierarchy-cell k-header k-table-th"
                 role="presentation"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStacked"
             >
             </th>
             <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
@@ -18450,7 +18667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </th>
             <th class="k-hierarchy-cell k-header k-table-th"
                 role="presentation"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStacked"
             >
             </th>
             <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
@@ -18718,6 +18935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class FooterComponent {
     columnInfoService;
+    ctx;
     columns = [];
     groups = [];
     detailTemplate;
@@ -18731,15 +18949,16 @@ class FooterComponent {
     }
     hostClass = true;
     hostRole = 'rowgroup';
-    constructor(columnInfoService) {
+    constructor(columnInfoService, ctx) {
         this.columnInfoService = columnInfoService;
+        this.ctx = ctx;
     }
     get columnsToRender() {
         return columnsToRender(this.columns || []);
     }
     // Number of unlocked columns in the next table, if any
     get unlockedColumnsCount() {
-        return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
+        return this.totalColumnsCount - (this.isStacked ? 0 : this.lockedColumnsCount) - this.columns.length;
     }
     trackByIndex(index) {
         return index;
@@ -18758,47 +18977,78 @@ class FooterComponent {
     isColumnGroupComponent(column) {
         return isColumnGroupComponent(column);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [{ token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [{ token: ColumnInfoService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
     <ng-container>
         <tr
             class="k-footer-template"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
                 [totalColumns]="totalColumns"
             >
-            <td
-                class="k-table-td k-group-cell k-table-group-td"
-                role="presentation"
-                *ngFor="let g of groups">
-            </td>
+            <ng-container *ngIf="!isStacked">
+                <td
+                    class="k-table-td k-group-cell k-table-group-td"
+                    role="presentation"
+                    *ngFor="let g of groups">
+                </td>
+            </ng-container>
             <td
                 role="presentation"
                 class="k-table-td k-hierarchy-cell"
-                *ngIf="detailTemplate?.templateRef">
+                *ngIf="detailTemplate?.templateRef && !isStacked">
             </td>
-            <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
-                <td *ngIf="!isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
+            <ng-container *ngIf="!isStacked">
+                <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
+                    <td *ngIf="!isColumnGroupComponent(column)"
+                        kendoGridLogicalCell
+                        class="k-table-td"
+                            [logicalRowIndex]="logicalRowIndex"
+                            [logicalColIndex]="logicalColumnIndex(column)"
+                            role="gridcell"
+                            aria-selected="false"
+                        [class.k-grid-footer-sticky]="column.sticky"
+                        [ngClass]="column.footerClass"
+                        [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
+                        <ng-template
+                            [templateContext]="{
+                                templateRef: column.footerTemplateRef,
+                                columnIndex: column.leafIndex,
+                                column: column,
+                                $implicit: column
+                            }">
+                        </ng-template>
+                    </td>
+                </ng-container>
+            </ng-container>
+
+            <ng-container *ngIf="isStacked">
+                <td kendoGridLogicalCell
                     class="k-table-td"
-                        [logicalRowIndex]="logicalRowIndex"
-                        [logicalColIndex]="logicalColumnIndex(column)"
-                        role="gridcell"
-                        aria-selected="false"
-                    [class.k-grid-footer-sticky]="column.sticky"
-                    [ngClass]="column.footerClass"
-                    [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
-                    <ng-template
-                        [templateContext]="{
-                            templateRef: column.footerTemplateRef,
-                            columnIndex: column.leafIndex,
-                            column: column,
-                            $implicit: column
-                        }">
-                    </ng-template>
+                    [logicalRowIndex]="logicalRowIndex"
+                    [logicalColIndex]="detailTemplate ? 1 : 0"
+                    role="gridcell"
+                    aria-selected="false">
+                    <div class="k-grid-column-template">
+                        <ng-container *ngFor="let column of columnsToRender; trackBy: trackByIndex;">
+                            <div class="k-column-template-item" *ngIf="column.footerTemplateRef">
+                                <ng-template
+                                    [templateContext]="{
+                                        templateRef: column.footerTemplateRef,
+                                        columnIndex: column.leafIndex,
+                                        column: column,
+                                        $implicit: column
+                                    }">
+                                </ng-template>
+                            </div>
+                        </ng-container>
+                    </div>
                 </td>
             </ng-container>
         </tr>
@@ -18815,40 +19065,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             class="k-footer-template"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
                 [totalColumns]="totalColumns"
             >
-            <td
-                class="k-table-td k-group-cell k-table-group-td"
-                role="presentation"
-                *ngFor="let g of groups">
-            </td>
+            <ng-container *ngIf="!isStacked">
+                <td
+                    class="k-table-td k-group-cell k-table-group-td"
+                    role="presentation"
+                    *ngFor="let g of groups">
+                </td>
+            </ng-container>
             <td
                 role="presentation"
                 class="k-table-td k-hierarchy-cell"
-                *ngIf="detailTemplate?.templateRef">
+                *ngIf="detailTemplate?.templateRef && !isStacked">
             </td>
-            <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
-                <td *ngIf="!isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
+            <ng-container *ngIf="!isStacked">
+                <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
+                    <td *ngIf="!isColumnGroupComponent(column)"
+                        kendoGridLogicalCell
+                        class="k-table-td"
+                            [logicalRowIndex]="logicalRowIndex"
+                            [logicalColIndex]="logicalColumnIndex(column)"
+                            role="gridcell"
+                            aria-selected="false"
+                        [class.k-grid-footer-sticky]="column.sticky"
+                        [ngClass]="column.footerClass"
+                        [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
+                        <ng-template
+                            [templateContext]="{
+                                templateRef: column.footerTemplateRef,
+                                columnIndex: column.leafIndex,
+                                column: column,
+                                $implicit: column
+                            }">
+                        </ng-template>
+                    </td>
+                </ng-container>
+            </ng-container>
+
+            <ng-container *ngIf="isStacked">
+                <td kendoGridLogicalCell
                     class="k-table-td"
-                        [logicalRowIndex]="logicalRowIndex"
-                        [logicalColIndex]="logicalColumnIndex(column)"
-                        role="gridcell"
-                        aria-selected="false"
-                    [class.k-grid-footer-sticky]="column.sticky"
-                    [ngClass]="column.footerClass"
-                    [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
-                    <ng-template
-                        [templateContext]="{
-                            templateRef: column.footerTemplateRef,
-                            columnIndex: column.leafIndex,
-                            column: column,
-                            $implicit: column
-                        }">
-                    </ng-template>
+                    [logicalRowIndex]="logicalRowIndex"
+                    [logicalColIndex]="detailTemplate ? 1 : 0"
+                    role="gridcell"
+                    aria-selected="false">
+                    <div class="k-grid-column-template">
+                        <ng-container *ngFor="let column of columnsToRender; trackBy: trackByIndex;">
+                            <div class="k-column-template-item" *ngIf="column.footerTemplateRef">
+                                <ng-template
+                                    [templateContext]="{
+                                        templateRef: column.footerTemplateRef,
+                                        columnIndex: column.leafIndex,
+                                        column: column,
+                                        $implicit: column
+                                    }">
+                                </ng-template>
+                            </div>
+                        </ng-container>
+                    </div>
                 </td>
             </ng-container>
         </tr>
@@ -18857,7 +19135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [LogicalRowDirective, NgFor, NgIf, LogicalCellDirective, NgClass, NgStyle, TemplateContextDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: ColumnInfoService }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: ColumnInfoService }, { type: ContextService }]; }, propDecorators: { columns: [{
                 type: Input
             }], groups: [{
                 type: Input
@@ -19146,7 +19424,7 @@ class SelectionCheckboxDirective {
             this.renderer.setProperty(this.el.nativeElement, 'checked', isSelected);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i4$1.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i4.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
@@ -19155,7 +19433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectionCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i4$1.CheckBoxComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i4.CheckBoxComponent, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -19255,6 +19533,8 @@ class CellComponent {
     editService;
     idService;
     ctx;
+    detailsService;
+    localization;
     cellContext;
     get commandCellClass() {
         return this.isCommand(this.column);
@@ -19266,11 +19546,14 @@ class CellComponent {
         return isRowReorderColumn(this.column) ? this.ctx.localization.get('dragRowHandleLabel') : undefined;
     }
     column;
+    columns;
     columnIndex;
     isNew = false;
     isLoading = false;
     isVirtual = false;
     loadingTemplate;
+    detailTemplate;
+    item;
     set rowIndex(index) {
         this._rowIndex = index;
         this.updateCellContext();
@@ -19280,12 +19563,42 @@ class CellComponent {
     }
     dataItem;
     reorderIcon = reorderIcon;
-    get isEdited() {
-        if (!(this.editService.isEditing() || this.isNew) || !this.isColumnEditable) {
+    minusIcon = minusIcon;
+    plusIcon = plusIcon;
+    detailButtonIconName(viewItem) {
+        return viewItem.isExpanded ? 'minus' : 'plus';
+    }
+    detailButtonSvgIcon(viewItem) {
+        return viewItem.isExpanded ? this.minusIcon : this.plusIcon;
+    }
+    detailButtonText(viewItem) {
+        return viewItem.isExpanded ? this.localization.get('detailCollapse') : this.localization.get('detailExpand');
+    }
+    toggleRow(index, dataItem) {
+        this.detailsService.toggleRow(index, dataItem);
+        return false;
+    }
+    get stackedRowClass() {
+        const columnsLength = this.ctx.grid.stackedColumns?.columns.length;
+        if (this.ctx.grid.stackedColumns.areDefault && columnsLength > 1) {
+            return `k-grid-cols-${columnsLength}`;
+        }
+    }
+    get stackedRowStyle() {
+        const columnsWidths = this.ctx.grid.stackedColumns.columns.map(c => c.width).join(' ');
+        if (!this.ctx.grid.stackedColumns.areDefault && columnsWidths) {
+            return {
+                'grid-template-columns': `${columnsWidths}`
+            };
+        }
+    }
+    isEdited(column) {
+        const currentColumn = column || this.column;
+        if (!(this.editService.isEditing() || this.isNew) || !this.isColumnEditable(column)) {
             return false;
         }
-        const editContext = this.editService.columnContext(this.rowIndex, this.column);
-        return this.isFieldEditable(editContext, this.column);
+        const editContext = this.editService.columnContext(this.rowIndex, currentColumn);
+        return this.isFieldEditable(editContext, currentColumn);
     }
     get showLoading() {
         return this.isVirtual && this.isLoading;
@@ -19293,13 +19606,22 @@ class CellComponent {
     get formGroup() {
         return this.editService.context(this.rowIndex).group;
     }
-    get templateContext() {
+    getTemplateContext(column) {
+        this._templateContext.isNew = this.isNew;
+        this._templateContext.column = column || this.column;
+        this._templateContext.dataItem = this.dataItem;
+        this._templateContext.rowIndex = this.rowIndex;
+        this._templateContext.columnIndex = this.columnIndex;
+        this._templateContext.$implicit = this.dataItem;
         return this._templateContext;
     }
-    get editTemplateContext() {
+    get isStackedLayoutMode() {
+        return this.ctx.grid?.isStacked;
+    }
+    getEditTemplateContext(column) {
         this._editTemplateContext.$implicit = this.formGroup;
         this._editTemplateContext.isNew = this.isNew;
-        this._editTemplateContext.column = this.column;
+        this._editTemplateContext.column = column || this.column;
         this._editTemplateContext.dataItem = this.dataItem;
         this._editTemplateContext.formGroup = this.formGroup;
         this._editTemplateContext.rowIndex = this.rowIndex;
@@ -19317,11 +19639,13 @@ class CellComponent {
         }
         return undefined;
     }
-    get isBoundColumn() {
-        return this.column.field && !this.column.templateRef;
+    isBoundColumn(column) {
+        const currentColumn = column || this.column;
+        return currentColumn.field && !currentColumn.templateRef;
     }
-    get isCheckboxColumn() {
-        return isCheckboxColumn(this.column) && !this.column.templateRef;
+    isCheckboxColumn(column) {
+        const currentColumn = column || this.column;
+        return isCheckboxColumn(currentColumn) && !currentColumn.templateRef;
     }
     get selectionCheckboxId() {
         return this.idService.selectionCheckboxId(this.rowIndex);
@@ -19335,37 +19659,36 @@ class CellComponent {
     get children() {
         return columnsToRender([this.column]);
     }
-    get isRowReorderColumn() {
-        return isRowReorderColumn(this.column) && !this.column.templateRef;
+    isRowReorderColumn(column) {
+        const currentColumn = column || this.column;
+        return isRowReorderColumn(currentColumn) && !currentColumn.templateRef;
     }
-    get isRowSelectable() {
-        return this.column.rowSelectable(this._rowIndex);
+    isRowSelectable(column) {
+        const currentColumn = column || this.column;
+        return currentColumn.rowSelectable(this._rowIndex);
     }
     _rowIndex;
-    get isColumnEditable() {
-        if (!this.column || this.isCommand(this.column)) {
+    isColumnEditable(column) {
+        const currentColumn = column || this.column;
+        if (!currentColumn || this.isCommand(currentColumn)) {
             return false;
         }
-        return this.column.editable !== false;
+        return currentColumn.editable !== false;
     }
     _templateContext = {};
     _editTemplateContext = {};
     _rowReorderTemplateContext = {};
-    constructor(editService, idService, ctx, cellContext) {
+    constructor(editService, idService, ctx, detailsService, localization, cellContext) {
         this.editService = editService;
         this.idService = idService;
         this.ctx = ctx;
+        this.detailsService = detailsService;
+        this.localization = localization;
         this.cellContext = cellContext;
     }
     ngDoCheck() {
         this.updateCellContext();
     }
-    ngOnChanges() {
-        this.updateTemplateContext();
-    }
-    ngAfterContentChecked() {
-        this.updateTemplateContext();
-    }
     isCommand(column) {
         return column instanceof CommandColumnComponent;
     }
@@ -19383,203 +19706,423 @@ class CellComponent {
             this.cellContext.rowIndex = this._rowIndex;
         }
     }
-    updateTemplateContext() {
-        if (!this.column.templateRef) {
-            return;
-        }
-        const context = this._templateContext;
-        context.isNew = this.isNew;
-        context.column = this.column;
-        context.dataItem = this.dataItem;
-        context.rowIndex = this.rowIndex;
-        context.columnIndex = this.columnIndex;
-        context.$implicit = this.dataItem;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: IdService }, { token: ContextService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, usesOnChanges: true, ngImport: i0, template: `
-        <ng-container [ngSwitch]="isEdited">
-            <ng-container *ngSwitchCase="false">
-                <ng-container *ngIf="!showLoading; else loading">
-                    <ng-template *ngIf="column.templateRef"
-                        [ngTemplateOutlet]="column.templateRef"
-                        [ngTemplateOutletContext]="templateContext">
-                    </ng-template>
-                    <ng-container *ngIf="isSpanColumn">
-                        <ng-container *ngFor="let childColumn of children">
-                            {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: IdService }, { token: ContextService }, { token: DetailsService }, { token: i1$2.LocalizationService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columns: "columns", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", detailTemplate: "detailTemplate", item: "item", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
+        <ng-container *ngIf="isStackedLayoutMode">
+            <div class="k-grid-stack-row"
+                [ngClass]="stackedRowClass"
+                [ngStyle]="stackedRowStyle">
+                <div class="k-grid-stack-cell" *ngFor="let col of columns"
+                    [class.k-grid-stack-edit-cell]="isEdited(col)"
+                    [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
+                    [class.k-command-cell]="isCommand(col)"
+                    kendoGridFocusable>
+                    <div class="k-grid-stack-header">
+                        <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
+                            {{col.displayTitle}}
                         </ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
-                    <ng-container *ngIf="isCheckboxColumn && !isNew">
-                        <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
-                            <kendo-checkbox
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}">
-                            </kendo-checkbox>
+
+                        <ng-template #headerTemplate
+                            [templateContext]="{
+                                templateRef: col.headerTemplateRef,
+                                columnIndex: col.leafIndex,
+                                column: col,
+                                $implicit: col
+                            }">
+                        </ng-template>
+                    </div>
+                    <div class="k-grid-stack-content">
+                        <ng-container *ngIf="!isEdited(col)">
+                            <ng-container *ngIf="!col.templateRef; else template">
+                                <ng-container *ngIf="isBoundColumn(col)">{{ dataItem | valueOf: col.field: col.format}}</ng-container>
+                                <ng-container *ngIf="isCheckboxColumn(col) && !isNew">
+                                    <ng-container *ngIf="isRowSelectable(col); else nonSelectableRow">
+                                        <kendo-checkbox
+                                            [kendoGridSelectionCheckbox]="rowIndex"
+                                            [attr.id]="selectionCheckboxId"
+                                            [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                            [title]="selectionCheckboxLabel">
+                                        </kendo-checkbox>
+                                    </ng-container>
+                                    <ng-template #nonSelectableRow>
+                                        <kendo-checkbox *ngIf="col.showDisabledCheckbox"
+                                            [kendoGridSelectionCheckbox]="rowIndex"
+                                            [attr.id]="selectionCheckboxId"
+                                            [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                            [title]="selectionCheckboxLabel"
+                                            [disabled]="true"
+                                        ></kendo-checkbox>
+                                    </ng-template>
+                                </ng-container>
+                                <ng-container *ngIf="isRowReorderColumn(col) && !isNew">
+                                    <kendo-icon-wrapper *ngIf="!col.dragHandleTemplate?.first"
+                                        name="reorder"
+                                        [svgIcon]="reorderIcon">
+                                    </kendo-icon-wrapper>
+                                    <ng-template *ngIf="col.dragHandleTemplate?.first"
+                                        [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
+                                        [ngTemplateOutletContext]="rowReorderTemplateContext">
+                                    </ng-template>
+                                </ng-container>
+                            </ng-container>
+                            <ng-template #template
+                                [ngTemplateOutlet]="col.templateRef"
+                                [ngTemplateOutletContext]="getTemplateContext(col)">
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="isEdited(col)">
+                            <ng-container [ngSwitch]="col.editor" *ngIf="!col.editTemplateRef">
+                                <kendo-numerictextbox
+                                    *ngSwitchCase="'numeric'"
+                                    [format]="format"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-numerictextbox>
+
+                                <kendo-datepicker
+                                    *ngSwitchCase="'date'"
+                                    [format]="format"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-datepicker>
+
+                                <kendo-checkbox
+                                    *ngSwitchCase="'boolean'"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-checkbox>
+
+                                <kendo-textbox
+                                    *ngSwitchDefault
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-textbox>
+                            </ng-container>
+                            <ng-template *ngIf="col.editTemplateRef"
+                                [ngTemplateOutlet]="col.editTemplateRef"
+                                [ngTemplateOutletContext]="getEditTemplateContext(col)">
+                            </ng-template>
                         </ng-container>
-                        <ng-template #nonSelectableRow>
-                            <kendo-checkbox *ngIf="column.showDisabledCheckbox"
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                [disabled]="true"
-                            ></kendo-checkbox>
+                    </div>
+                </div>
+                <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)">
+                    <div class="k-grid-stack-content">
+                        <button kendoButton
+                            fillMode="flat"
+                            themeColor="primary"
+                            [icon]="detailButtonIconName(item)"
+                            [svgIcon]="detailButtonSvgIcon(item)"
+                            (click)="toggleRow($any(item).index, item.data)">
+                            {{ detailButtonText(item) }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+
+        <ng-container *ngIf="!isStackedLayoutMode">
+            <ng-container [ngSwitch]="isEdited()">
+                <ng-container *ngSwitchCase="false">
+                    <ng-container *ngIf="!showLoading; else loading">
+                        <ng-template *ngIf="column.templateRef"
+                            [ngTemplateOutlet]="column.templateRef"
+                            [ngTemplateOutletContext]="getTemplateContext()">
                         </ng-template>
+                        <ng-container *ngIf="isSpanColumn">
+                            <ng-container *ngFor="let childColumn of children">
+                                {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+                            </ng-container>
+                        </ng-container>
+                        <ng-container *ngIf="isBoundColumn()">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
+                        <ng-container *ngIf="isCheckboxColumn() && !isNew">
+                            <ng-container *ngIf="isRowSelectable(); else nonSelectableRow">
+                                <kendo-checkbox
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                    [title]="selectionCheckboxLabel">
+                                </kendo-checkbox>
+                            </ng-container>
+                            <ng-template #nonSelectableRow>
+                                <kendo-checkbox *ngIf="column.showDisabledCheckbox"
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                    [title]="selectionCheckboxLabel"
+                                    [disabled]="true"
+                                ></kendo-checkbox>
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="isRowReorderColumn() && !isNew">
+                            <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
+                                name="reorder"
+                                [svgIcon]="reorderIcon">
+                            </kendo-icon-wrapper>
+                            <ng-template *ngIf="column.dragHandleTemplate?.first"
+                                [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
+                                [ngTemplateOutletContext]="rowReorderTemplateContext">
+                            </ng-template>
+                        </ng-container>
                     </ng-container>
-                    <ng-container *ngIf="isRowReorderColumn && !isNew">
-                        <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
-                            name="reorder"
-                            [svgIcon]="reorderIcon">
-                        </kendo-icon-wrapper>
-                        <ng-template *ngIf="column.dragHandleTemplate?.first"
-                            [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
-                            [ngTemplateOutletContext]="rowReorderTemplateContext">
+                    <ng-template #loading>
+                        <ng-template
+                            *ngIf="loadingTemplate"
+                            [ngTemplateOutlet]="loadingTemplate"
+                            [ngTemplateOutletContext]="{$implicit: column}">
                         </ng-template>
-                    </ng-container>
+                        <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
+                    </ng-template>
                 </ng-container>
-                <ng-template #loading>
+                <ng-container *ngSwitchCase="true">
                     <ng-template
-                        *ngIf="loadingTemplate"
-                        [ngTemplateOutlet]="loadingTemplate"
-                        [ngTemplateOutletContext]="{$implicit: column}">
+                        *ngIf="column.editTemplateRef"
+                        [ngTemplateOutlet]="column.editTemplateRef"
+                        [ngTemplateOutletContext]="getEditTemplateContext()">
                     </ng-template>
-                    <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
-                </ng-template>
-            </ng-container>
-            <ng-container *ngSwitchCase="true">
-                <ng-template
-                    *ngIf="column.editTemplateRef"
-                    [ngTemplateOutlet]="column.editTemplateRef"
-                    [ngTemplateOutletContext]="editTemplateContext">
-                </ng-template>
-                <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
-                    <kendo-numerictextbox
-                        *ngSwitchCase="'numeric'"
-                        [format]="format"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-numerictextbox>
-
-                    <kendo-datepicker
-                        *ngSwitchCase="'date'"
-                        [format]="format"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-datepicker>
-
-                    <kendo-checkbox
-                        *ngSwitchCase="'boolean'"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-checkbox>
-
-                    <kendo-textbox
-                        *ngSwitchDefault
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-textbox>
+                    <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
+                        <kendo-numerictextbox
+                            *ngSwitchCase="'numeric'"
+                            [format]="format"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-numerictextbox>
+
+                        <kendo-datepicker
+                            *ngSwitchCase="'date'"
+                            [format]="format"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-datepicker>
+
+                        <kendo-checkbox
+                            *ngSwitchCase="'boolean'"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-checkbox>
+
+                        <kendo-textbox
+                            *ngSwitchDefault
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-textbox>
+                    </ng-container>
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridCell]',
                     template: `
-        <ng-container [ngSwitch]="isEdited">
-            <ng-container *ngSwitchCase="false">
-                <ng-container *ngIf="!showLoading; else loading">
-                    <ng-template *ngIf="column.templateRef"
-                        [ngTemplateOutlet]="column.templateRef"
-                        [ngTemplateOutletContext]="templateContext">
-                    </ng-template>
-                    <ng-container *ngIf="isSpanColumn">
-                        <ng-container *ngFor="let childColumn of children">
-                            {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+        <ng-container *ngIf="isStackedLayoutMode">
+            <div class="k-grid-stack-row"
+                [ngClass]="stackedRowClass"
+                [ngStyle]="stackedRowStyle">
+                <div class="k-grid-stack-cell" *ngFor="let col of columns"
+                    [class.k-grid-stack-edit-cell]="isEdited(col)"
+                    [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
+                    [class.k-command-cell]="isCommand(col)"
+                    kendoGridFocusable>
+                    <div class="k-grid-stack-header">
+                        <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
+                            {{col.displayTitle}}
                         </ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
-                    <ng-container *ngIf="isCheckboxColumn && !isNew">
-                        <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
-                            <kendo-checkbox
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}">
-                            </kendo-checkbox>
+
+                        <ng-template #headerTemplate
+                            [templateContext]="{
+                                templateRef: col.headerTemplateRef,
+                                columnIndex: col.leafIndex,
+                                column: col,
+                                $implicit: col
+                            }">
+                        </ng-template>
+                    </div>
+                    <div class="k-grid-stack-content">
+                        <ng-container *ngIf="!isEdited(col)">
+                            <ng-container *ngIf="!col.templateRef; else template">
+                                <ng-container *ngIf="isBoundColumn(col)">{{ dataItem | valueOf: col.field: col.format}}</ng-container>
+                                <ng-container *ngIf="isCheckboxColumn(col) && !isNew">
+                                    <ng-container *ngIf="isRowSelectable(col); else nonSelectableRow">
+                                        <kendo-checkbox
+                                            [kendoGridSelectionCheckbox]="rowIndex"
+                                            [attr.id]="selectionCheckboxId"
+                                            [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                            [title]="selectionCheckboxLabel">
+                                        </kendo-checkbox>
+                                    </ng-container>
+                                    <ng-template #nonSelectableRow>
+                                        <kendo-checkbox *ngIf="col.showDisabledCheckbox"
+                                            [kendoGridSelectionCheckbox]="rowIndex"
+                                            [attr.id]="selectionCheckboxId"
+                                            [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                            [title]="selectionCheckboxLabel"
+                                            [disabled]="true"
+                                        ></kendo-checkbox>
+                                    </ng-template>
+                                </ng-container>
+                                <ng-container *ngIf="isRowReorderColumn(col) && !isNew">
+                                    <kendo-icon-wrapper *ngIf="!col.dragHandleTemplate?.first"
+                                        name="reorder"
+                                        [svgIcon]="reorderIcon">
+                                    </kendo-icon-wrapper>
+                                    <ng-template *ngIf="col.dragHandleTemplate?.first"
+                                        [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
+                                        [ngTemplateOutletContext]="rowReorderTemplateContext">
+                                    </ng-template>
+                                </ng-container>
+                            </ng-container>
+                            <ng-template #template
+                                [ngTemplateOutlet]="col.templateRef"
+                                [ngTemplateOutletContext]="getTemplateContext(col)">
+                            </ng-template>
                         </ng-container>
-                        <ng-template #nonSelectableRow>
-                            <kendo-checkbox *ngIf="column.showDisabledCheckbox"
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                [disabled]="true"
-                            ></kendo-checkbox>
+                        <ng-container *ngIf="isEdited(col)">
+                            <ng-container [ngSwitch]="col.editor" *ngIf="!col.editTemplateRef">
+                                <kendo-numerictextbox
+                                    *ngSwitchCase="'numeric'"
+                                    [format]="format"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-numerictextbox>
+
+                                <kendo-datepicker
+                                    *ngSwitchCase="'date'"
+                                    [format]="format"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-datepicker>
+
+                                <kendo-checkbox
+                                    *ngSwitchCase="'boolean'"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-checkbox>
+
+                                <kendo-textbox
+                                    *ngSwitchDefault
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-textbox>
+                            </ng-container>
+                            <ng-template *ngIf="col.editTemplateRef"
+                                [ngTemplateOutlet]="col.editTemplateRef"
+                                [ngTemplateOutletContext]="getEditTemplateContext(col)">
+                            </ng-template>
+                        </ng-container>
+                    </div>
+                </div>
+                <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)">
+                    <div class="k-grid-stack-content">
+                        <button kendoButton
+                            fillMode="flat"
+                            themeColor="primary"
+                            [icon]="detailButtonIconName(item)"
+                            [svgIcon]="detailButtonSvgIcon(item)"
+                            (click)="toggleRow($any(item).index, item.data)">
+                            {{ detailButtonText(item) }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+
+        <ng-container *ngIf="!isStackedLayoutMode">
+            <ng-container [ngSwitch]="isEdited()">
+                <ng-container *ngSwitchCase="false">
+                    <ng-container *ngIf="!showLoading; else loading">
+                        <ng-template *ngIf="column.templateRef"
+                            [ngTemplateOutlet]="column.templateRef"
+                            [ngTemplateOutletContext]="getTemplateContext()">
                         </ng-template>
+                        <ng-container *ngIf="isSpanColumn">
+                            <ng-container *ngFor="let childColumn of children">
+                                {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+                            </ng-container>
+                        </ng-container>
+                        <ng-container *ngIf="isBoundColumn()">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
+                        <ng-container *ngIf="isCheckboxColumn() && !isNew">
+                            <ng-container *ngIf="isRowSelectable(); else nonSelectableRow">
+                                <kendo-checkbox
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                    [title]="selectionCheckboxLabel">
+                                </kendo-checkbox>
+                            </ng-container>
+                            <ng-template #nonSelectableRow>
+                                <kendo-checkbox *ngIf="column.showDisabledCheckbox"
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                    [title]="selectionCheckboxLabel"
+                                    [disabled]="true"
+                                ></kendo-checkbox>
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="isRowReorderColumn() && !isNew">
+                            <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
+                                name="reorder"
+                                [svgIcon]="reorderIcon">
+                            </kendo-icon-wrapper>
+                            <ng-template *ngIf="column.dragHandleTemplate?.first"
+                                [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
+                                [ngTemplateOutletContext]="rowReorderTemplateContext">
+                            </ng-template>
+                        </ng-container>
                     </ng-container>
-                    <ng-container *ngIf="isRowReorderColumn && !isNew">
-                        <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
-                            name="reorder"
-                            [svgIcon]="reorderIcon">
-                        </kendo-icon-wrapper>
-                        <ng-template *ngIf="column.dragHandleTemplate?.first"
-                            [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
-                            [ngTemplateOutletContext]="rowReorderTemplateContext">
+                    <ng-template #loading>
+                        <ng-template
+                            *ngIf="loadingTemplate"
+                            [ngTemplateOutlet]="loadingTemplate"
+                            [ngTemplateOutletContext]="{$implicit: column}">
                         </ng-template>
-                    </ng-container>
+                        <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
+                    </ng-template>
                 </ng-container>
-                <ng-template #loading>
+                <ng-container *ngSwitchCase="true">
                     <ng-template
-                        *ngIf="loadingTemplate"
-                        [ngTemplateOutlet]="loadingTemplate"
-                        [ngTemplateOutletContext]="{$implicit: column}">
+                        *ngIf="column.editTemplateRef"
+                        [ngTemplateOutlet]="column.editTemplateRef"
+                        [ngTemplateOutletContext]="getEditTemplateContext()">
                     </ng-template>
-                    <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
-                </ng-template>
-            </ng-container>
-            <ng-container *ngSwitchCase="true">
-                <ng-template
-                    *ngIf="column.editTemplateRef"
-                    [ngTemplateOutlet]="column.editTemplateRef"
-                    [ngTemplateOutletContext]="editTemplateContext">
-                </ng-template>
-                <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
-                    <kendo-numerictextbox
-                        *ngSwitchCase="'numeric'"
-                        [format]="format"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-numerictextbox>
-
-                    <kendo-datepicker
-                        *ngSwitchCase="'date'"
-                        [format]="format"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-datepicker>
-
-                    <kendo-checkbox
-                        *ngSwitchCase="'boolean'"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-checkbox>
-
-                    <kendo-textbox
-                        *ngSwitchDefault
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-textbox>
+                    <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
+                        <kendo-numerictextbox
+                            *ngSwitchCase="'numeric'"
+                            [format]="format"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-numerictextbox>
+
+                        <kendo-datepicker
+                            *ngSwitchCase="'date'"
+                            [format]="format"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-datepicker>
+
+                        <kendo-checkbox
+                            *ngSwitchCase="'boolean'"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-checkbox>
+
+                        <kendo-textbox
+                            *ngSwitchDefault
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-textbox>
+                    </ng-container>
                 </ng-container>
             </ng-container>
         </ng-container>
     `,
                     standalone: true,
-                    imports: [NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, FocusableDirective, SelectionCheckboxDirective,
-                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent]
+                    imports: [NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, FocusableDirective, SelectionCheckboxDirective, TemplateContextDirective,
+                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent, NgClass, NgStyle, ButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: IdService }, { type: ContextService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: EditService }, { type: IdService }, { type: ContextService }, { type: DetailsService }, { type: i1$2.LocalizationService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -19598,6 +20141,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.aria-label']
             }], column: [{
                 type: Input
+            }], columns: [{
+                type: Input
             }], columnIndex: [{
                 type: Input
             }], isNew: [{
@@ -19608,6 +20153,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], loadingTemplate: [{
                 type: Input
+            }], detailTemplate: [{
+                type: Input
+            }], item: [{
+                type: Input
             }], rowIndex: [{
                 type: Input
             }], dataItem: [{
@@ -19705,8 +20254,8 @@ class TableBodyComponent {
                 allColumnsCount += column.colspan - 1;
             }
         });
-        const contentColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumnsCount;
-        const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumns.length;
+        const contentColumnsCount = this.totalColumnsCount - (this.isStackedMode ? 0 : this.lockedColumnsCount) - allColumnsCount;
+        const headerFooterColumnsCount = this.totalColumnsCount - (this.isStackedMode ? 0 : this.lockedColumnsCount) - allColumns.length;
         return item && item.type === 'data' ? contentColumnsCount : headerFooterColumnsCount;
     }
     isAriaSelected(item, column) {
@@ -19777,10 +20326,10 @@ class TableBodyComponent {
     }
     logicalRowIndex(rowIndex) {
         let pos = this.skip + rowIndex;
-        if (this.hasDetailTemplate) {
+        if (this.hasDetailTemplate && !this.isStackedMode) {
             pos *= 2;
         }
-        const absoluteRowIndex = 1 + pos;
+        const absoluteRowIndex = this.isStackedMode ? pos : 1 + pos;
         const addRowOffset = this.editService.hasNewItem ? 1 : 0;
         const filterRowOffset = hasFilterRow(this.filterable) ? 1 : 0;
         const headerRowCount = this.columnInfoService.totalLevels + filterRowOffset + addRowOffset;
@@ -19843,6 +20392,9 @@ class TableBodyComponent {
     isEditingRow(index) {
         return this.editService.isEditing() && this.editService.hasEdited(index);
     }
+    get isStackedMode() {
+        return this.ctx.grid?.isStacked;
+    }
     get hasGroupHeaderColumn() {
         return this.columnsContainer.hasGroupHeaderColumn;
     }
@@ -19886,7 +20438,8 @@ class TableBodyComponent {
             if (!selectionEnabled) {
                 return;
             }
-            const isCellFocused = closest(target, matchesNodeName('td'))?.classList.contains('k-focus');
+            const cellComparer = this.isStackedMode ? closest(target, matchesNodeName('td')) : closest(target, (el) => { matchesNodeName('td') && hasClasses(el, 'k-grid-stack-content'); });
+            const isCellFocused = cellComparer?.classList.contains('k-focus');
             const isShiftOrCtrlPressed = eventArg.shiftKey || eventArg.ctrlKey || eventArg.metaKey;
             if (isCellFocused && !isShiftOrCtrlPressed) {
                 eventArg.preventDefault();
@@ -19898,7 +20451,7 @@ class TableBodyComponent {
         if (!gridTbody) {
             return;
         }
-        const cell = closest(currentTarget, (el) => {
+        let cell = closest(currentTarget, (el) => {
             if (!matchesNodeName('td')(el)) {
                 return false;
             }
@@ -19916,11 +20469,30 @@ class TableBodyComponent {
         if (cell && !hasClasses(cell, NON_DATA_CELL_CLASSES) &&
             !hasClasses(row, NON_DATA_ROW_CLASSES) &&
             body === element && !gridElement) {
+            const isCellTarget = hasClasses(currentTarget, 'k-grid-stack-cell');
+            if (this.isStackedMode) {
+                cell = closest(currentTarget, (el) => {
+                    if (!closestInScope(target, matchesClasses('k-grid-stack-row'), cell)) {
+                        return false;
+                    }
+                    const parentRow = isCellTarget ? currentTarget : el.parentElement;
+                    return (parentRow && hasClasses(parentRow, 'k-grid-stack-cell'));
+                });
+                if (isCellTarget) {
+                    cell = findElement(currentTarget, (el) => hasClasses(el, 'k-grid-stack-content'));
+                }
+                if (cell) {
+                    row = cell.parentElement.parentElement;
+                }
+            }
             this.editService.preventCellClose();
-            const focusable = target !== cell && isFocusableWithTabKey(target, false);
-            if (!focusable && !matchesNodeName('label')(target) && !hasClasses(target, IGNORE_TARGET_CLASSSES) &&
-                !closestInScope(target, matchesClasses(IGNORE_CONTAINER_CLASSES), cell)) {
+            const focusable = (!isCellTarget && target !== cell) && isFocusableWithTabKey(target, false);
+            const ignoreContainer = isCellTarget ? true : !closestInScope(target, matchesClasses(IGNORE_CONTAINER_CLASSES), cell);
+            if (!focusable && !matchesNodeName('label')(target) && !hasClasses(target, IGNORE_TARGET_CLASSSES) && ignoreContainer) {
                 const args = this.cellClickArgs(cell, row, eventArg);
+                if (!args) {
+                    return;
+                }
                 if (selectionEnabled && !this.isRowSelectable({ index: args.rowIndex, dataItem: args.dataItem })) {
                     return;
                 }
@@ -19951,15 +20523,19 @@ class TableBodyComponent {
         }));
     }
     cellKeydownHandler(args) {
-        if (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) {
+        if (args.keyCode === Keys.Enter || args.keyCode === Keys.Space || (this.navigationService.tableCellEntered && args.keyCode === Keys.F2)) {
             this.clickHandler(args);
         }
     }
     cellClickArgs(cell, row, eventArg) {
-        const index = columnCellIndex(cell, row.cells);
+        const cells = this.isStackedMode ? row.querySelectorAll('.k-grid-stack-cell > .k-grid-stack-content') : row.cells;
+        const index = columnCellIndex(cell, cells);
+        if (!isPresent(index)) {
+            return;
+        }
         const column = this.columns.toArray()[index];
-        const columnIndex = this.lockedColumnsCount + index;
-        let rowIndex = row.getAttribute('data-kendo-grid-item-index');
+        const columnIndex = (this.isStackedMode ? 0 : this.lockedColumnsCount) + index;
+        let rowIndex = (this.isStackedMode ? row.parentElement.parentElement : row).getAttribute('data-kendo-grid-item-index');
         rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
         const dataItem = rowIndex === -1 ? this.editService.newDataItem : this.rowsToRender.find(item => +item.index === rowIndex && item.type === 'data')?.data;
         const isEditedColumn = this.editService.isEditedColumn(rowIndex, column);
@@ -20012,7 +20588,7 @@ class TableBodyComponent {
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount()"
                 [totalColumns]="totalColumns">
@@ -20020,32 +20596,48 @@ class TableBodyComponent {
                 <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStackedMode"
                 kendoGridLogicalCell
                     [logicalRowIndex]="addRowLogicalIndex()"
                     [logicalColIndex]="0"
                     aria-selected="false"
                 >
             </td>
-            <td *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;"
-                class="k-table-td"
-                kendoGridCell
-                    [rowIndex]="-1"
-                    [columnIndex]="lockedColumnsCount + columnIndex"
-                    [isNew]="true"
-                    [column]="column"
-                    [dataItem]="newDataItem"
-                [class.k-grid-content-sticky]="column.sticky"
-                [ngClass]="column.cssClass"
-                [style.left]="column.sticky ? '0' : undefined"
-                [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
-                [attr.colspan]="column.colspan"
-                [attr.role]="column.tableCellsRole"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="addRowLogicalIndex()"
-                    [logicalColIndex]="logicalColIndex(column)"
-                    [colSpan]="column.colspan">
-            </td>
+            <ng-container *ngIf="isStackedMode; else columnsTemplate">
+                <td *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;"
+                    class="k-table-td"
+                    kendoGridCell
+                        [rowIndex]="-1"
+                        [columnIndex]="0"
+                        [isNew]="true"
+                        [columns]="allColumns"
+                        [dataItem]="newDataItem"
+                    kendoGridLogicalCell
+                        [logicalRowIndex]="addRowLogicalIndex()"
+                        [logicalColIndex]="0">
+                </td>
+            </ng-container>
+            <ng-template #columnsTemplate>
+                <td *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;"
+                    class="k-table-td"
+                    kendoGridCell
+                        [rowIndex]="-1"
+                        [columnIndex]="lockedColumnsCount + columnIndex"
+                        [isNew]="true"
+                        [column]="column"
+                        [dataItem]="newDataItem"
+                    [class.k-grid-content-sticky]="column.sticky"
+                    [ngClass]="column.cssClass"
+                    [style.left]="column.sticky ? '0' : undefined"
+                    [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
+                    [attr.colspan]="column.colspan"
+                    [attr.role]="column.tableCellsRole"
+                    kendoGridLogicalCell
+                        [logicalRowIndex]="addRowLogicalIndex()"
+                        [logicalColIndex]="logicalColIndex(column)"
+                        [colSpan]="column.colspan">
+                </td>
+            </ng-template>
         </tr>
     </ng-container>
     <tr *ngIf="!rowsToRender?.length" class="k-grid-norecords" role="row">
@@ -20075,7 +20667,7 @@ class TableBodyComponent {
                 [totalColumnsCount]="totalColumnsCount"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
@@ -20085,7 +20677,7 @@ class TableBodyComponent {
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
@@ -20093,9 +20685,9 @@ class TableBodyComponent {
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
-            [class.k-expanded]="item.isExpanded"
+            [class.k-expanded]="item.isExpanded && !isStackedMode"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
-            [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
+            [attr.aria-selected]="(lockedColumnsCount < 1 || isStackedMode) ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)"
             [class.k-highlighted]="item.isHighlighted">
@@ -20103,7 +20695,7 @@ class TableBodyComponent {
                 <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStackedMode"
                 kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalColIndex]="0"
@@ -20122,18 +20714,42 @@ class TableBodyComponent {
                         [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
                 </a>
             </td>
-            <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
-                <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
-                    kendoGridCell
+            <ng-container *ngIf="isStackedMode; else columnsTemplate">
+                <td kendoGridCell
+                    [rowIndex]="$any(item).index"
+                    [detailTemplate]="detailTemplate"
+                    [item]="item"
+                    [columnIndex]="0"
+                    [attr.data-kendo-grid-column-index]="0"
+                    [columns]="columns"
+                    [dataItem]="item.data"
+                    [isLoading]="isLoading"
+                    [isVirtual]="isVirtual"
+                    [loadingTemplate]="cellLoadingTemplate"
+                    kendoGridLogicalCell
+                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                    [logicalColIndex]="0"
+                    [dataRowIndex]="$any(item).index"
+                    [dataItem]="item.data"
+                    [colIndex]="0"
+                    class="k-table-td"
+                    [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag">
+                </td>
+            </ng-container>
+            <ng-template #columnsTemplate>
+                <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
+                    <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
+                        kendoGridCell
                         [rowIndex]="$any(item).index"
                         [columnIndex]="lockedColumnsCount + columnIndex"
                         [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
                         [column]="column"
+                        [columns]="allColumns"
                         [dataItem]="item.data"
                         [isLoading]="isLoading"
                         [isVirtual]="isVirtual"
                         [loadingTemplate]="cellLoadingTemplate"
-                    kendoGridLogicalCell
+                        kendoGridLogicalCell
                         [logicalRowIndex]="logicalRowIndex(rowIndex)"
                         [logicalColIndex]="logicalColIndex(column)"
                         [dataRowIndex]="$any(item).index"
@@ -20146,50 +20762,75 @@ class TableBodyComponent {
                         [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
                         [class.k-grid-content-sticky]="column.sticky"
                         [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                    [ngClass]="column.cssClass"
-                    [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
-                    [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
-                    [attr.colspan]="column.colspan"
-                    [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
-                    [class.k-highlighted]="item.cells[lockedColumnsCount + columnIndex]?.isHighlighted">
-                </td>
-            </ng-container>
+                        [ngClass]="column.cssClass"
+                        [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
+                        [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
+                        [attr.colspan]="column.colspan"
+                        [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
+                        [class.k-highlighted]="item.cells[lockedColumnsCount + columnIndex]?.isHighlighted">
+                    </td>
+                </ng-container>
+            </ng-template>
         </tr>
         <tr *ngIf="item.showDetailRow"
             class="k-detail-row"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
-                [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
+                [logicalRowIndex]="isStackedMode ? logicalRowIndex(rowIndex) : logicalRowIndex(rowIndex) + 1"
                 [logicalSlaveRow]="false"
                 [logicalCellsCount]="1">
-            <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
-            <td class="k-hierarchy-cell k-table-td"></td>
-            <td class="k-detail-cell k-table-td"
-                [attr.colspan]="columnsSpan"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
-                    [logicalColIndex]="0"
-                    [dataRowIndex]="$any(item).index"
-                    [dataItem]="item.data"
-                    [colIndex]="0"
-                    [colSpan]="allColumnsSpan + 1"
-                    role="gridcell" aria-selected="false">
-                <ng-template
-                    [ngTemplateOutlet]="detailTemplate.templateRef"
-                    [ngTemplateOutletContext]="{
-                        dataItem: item.data,
-                        rowIndex: $any(item).index,
-                        $implicit: item.data
-                    }">
-                </ng-template>
-            </td>
+                <ng-container *ngIf="!isStackedMode">
+                    <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
+                    <td class="k-hierarchy-cell k-table-td"></td>
+                    <td class="k-detail-cell k-table-td"
+                        [attr.colspan]="columnsSpan"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
+                            [logicalColIndex]="0"
+                            [dataRowIndex]="$any(item).index"
+                            [dataItem]="item.data"
+                            [colIndex]="0"
+                            [colSpan]="allColumnsSpan + 1"
+                            role="gridcell" aria-selected="false">
+                        <ng-template
+                            [ngTemplateOutlet]="detailTemplate.templateRef"
+                            [ngTemplateOutletContext]="{
+                                dataItem: item.data,
+                                rowIndex: $any(item).index,
+                                $implicit: item.data
+                            }">
+                        </ng-template>
+                    </td>
+                </ng-container>
+                <ng-container *ngIf="isStackedMode">
+                    <td class="k-detail-cell k-table-td"
+                        [attr.colspan]="columnsSpan"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                            [logicalColIndex]="0"
+                            [dataRowIndex]="$any(item).index"
+                            [dataItem]="item.data"
+                            [colIndex]="0"
+                            [colSpan]="allColumnsSpan + 1"
+                            role="gridcell"
+                            aria-selected="false">
+                        <ng-template
+                            [ngTemplateOutlet]="detailTemplate.templateRef"
+                            [ngTemplateOutletContext]="{
+                                dataItem: item.data,
+                                rowIndex: $any(item).index,
+                                $implicit: item.data
+                            }">
+                        </ng-template>
+                    </td>
+                </ng-container>
         </tr>
         <tr *ngIf="item.type === 'footer'"
             class="k-group-footer"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
@@ -20197,33 +20838,61 @@ class TableBodyComponent {
                 <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStackedMode"
                 kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalColIndex]="0"
                     aria-selected="false">
             </td>
-            <td kendoGridLogicalCell
+
+            <ng-container *ngIf="!isStackedMode">
+                <td kendoGridLogicalCell
+                        [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                        [logicalColIndex]="logicalColIndex(column)"
+                    [attr.data-skip]="skipGroupDecoration"
+                    class="k-table-td"
+                    *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
+                    <ng-template
+                        [templateContext]="{
+                            templateRef: $any(column).groupFooterTemplateRef,
+                            group: $any(item.data),
+                            field: $any(column).field,
+                            column: column,
+                            aggregates: $any(item.data)?.aggregates,
+                            $implicit: $any(item.data)?.aggregates
+                        }">
+                    </ng-template>
+               </td>
+            </ng-container>
+
+            <ng-container *ngIf="isStackedMode">
+                <td kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="logicalColIndex(column)"
-                [attr.data-skip]="skipGroupDecoration"
-                class="k-table-td"
-                *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
-                <ng-template
-                    [templateContext]="{
-                        templateRef: $any(column).groupFooterTemplateRef,
-                        group: $any(item.data),
-                        field: $any(column).field,
-                        column: column,
-                        aggregates: $any(item.data)?.aggregates,
-                        $implicit: $any(item.data)?.aggregates
-                    }">
-                </ng-template>
-           </td>
+                    [logicalColIndex]="hasDetailTemplate ? 1 : 0"
+                    [attr.data-skip]="skipGroupDecoration"
+                    class="k-table-td">
+                    <div class="k-grid-column-template">
+                        <ng-container *ngFor="let col of footerColumns">
+                            <div class="k-column-template-item" *ngIf="$any(col).groupFooterTemplateRef">
+                                <ng-template
+                                    [templateContext]="{
+                                        templateRef: $any(col).groupFooterTemplateRef,
+                                        group: $any(item.data),
+                                        field: $any(col).field,
+                                        column: col,
+                                        aggregates: $any(item.data)?.aggregates,
+                                        $implicit: $any(item.data)?.aggregates
+                                    }">
+                                </ng-template>
+                            </div>
+                        </ng-container>
+                    </div>
+                </td>
+            </ng-container>
         </tr>
     </ng-container>
     <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "component", type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "component", type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columns", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "detailTemplate", "item", "rowIndex", "dataItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
@@ -20234,7 +20903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount()"
                 [totalColumns]="totalColumns">
@@ -20242,32 +20911,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStackedMode"
                 kendoGridLogicalCell
                     [logicalRowIndex]="addRowLogicalIndex()"
                     [logicalColIndex]="0"
                     aria-selected="false"
                 >
             </td>
-            <td *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;"
-                class="k-table-td"
-                kendoGridCell
-                    [rowIndex]="-1"
-                    [columnIndex]="lockedColumnsCount + columnIndex"
-                    [isNew]="true"
-                    [column]="column"
-                    [dataItem]="newDataItem"
-                [class.k-grid-content-sticky]="column.sticky"
-                [ngClass]="column.cssClass"
-                [style.left]="column.sticky ? '0' : undefined"
-                [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
-                [attr.colspan]="column.colspan"
-                [attr.role]="column.tableCellsRole"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="addRowLogicalIndex()"
-                    [logicalColIndex]="logicalColIndex(column)"
-                    [colSpan]="column.colspan">
-            </td>
+            <ng-container *ngIf="isStackedMode; else columnsTemplate">
+                <td *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;"
+                    class="k-table-td"
+                    kendoGridCell
+                        [rowIndex]="-1"
+                        [columnIndex]="0"
+                        [isNew]="true"
+                        [columns]="allColumns"
+                        [dataItem]="newDataItem"
+                    kendoGridLogicalCell
+                        [logicalRowIndex]="addRowLogicalIndex()"
+                        [logicalColIndex]="0">
+                </td>
+            </ng-container>
+            <ng-template #columnsTemplate>
+                <td *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;"
+                    class="k-table-td"
+                    kendoGridCell
+                        [rowIndex]="-1"
+                        [columnIndex]="lockedColumnsCount + columnIndex"
+                        [isNew]="true"
+                        [column]="column"
+                        [dataItem]="newDataItem"
+                    [class.k-grid-content-sticky]="column.sticky"
+                    [ngClass]="column.cssClass"
+                    [style.left]="column.sticky ? '0' : undefined"
+                    [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
+                    [attr.colspan]="column.colspan"
+                    [attr.role]="column.tableCellsRole"
+                    kendoGridLogicalCell
+                        [logicalRowIndex]="addRowLogicalIndex()"
+                        [logicalColIndex]="logicalColIndex(column)"
+                        [colSpan]="column.colspan">
+                </td>
+            </ng-template>
         </tr>
     </ng-container>
     <tr *ngIf="!rowsToRender?.length" class="k-grid-norecords" role="row">
@@ -20297,7 +20982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [totalColumnsCount]="totalColumnsCount"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
@@ -20307,7 +20992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
@@ -20315,9 +21000,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
-            [class.k-expanded]="item.isExpanded"
+            [class.k-expanded]="item.isExpanded && !isStackedMode"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
-            [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
+            [attr.aria-selected]="(lockedColumnsCount < 1 || isStackedMode) ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)"
             [class.k-highlighted]="item.isHighlighted">
@@ -20325,7 +21010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStackedMode"
                 kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalColIndex]="0"
@@ -20344,18 +21029,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
                 </a>
             </td>
-            <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
-                <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
-                    kendoGridCell
+            <ng-container *ngIf="isStackedMode; else columnsTemplate">
+                <td kendoGridCell
+                    [rowIndex]="$any(item).index"
+                    [detailTemplate]="detailTemplate"
+                    [item]="item"
+                    [columnIndex]="0"
+                    [attr.data-kendo-grid-column-index]="0"
+                    [columns]="columns"
+                    [dataItem]="item.data"
+                    [isLoading]="isLoading"
+                    [isVirtual]="isVirtual"
+                    [loadingTemplate]="cellLoadingTemplate"
+                    kendoGridLogicalCell
+                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                    [logicalColIndex]="0"
+                    [dataRowIndex]="$any(item).index"
+                    [dataItem]="item.data"
+                    [colIndex]="0"
+                    class="k-table-td"
+                    [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag">
+                </td>
+            </ng-container>
+            <ng-template #columnsTemplate>
+                <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
+                    <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
+                        kendoGridCell
                         [rowIndex]="$any(item).index"
                         [columnIndex]="lockedColumnsCount + columnIndex"
                         [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
                         [column]="column"
+                        [columns]="allColumns"
                         [dataItem]="item.data"
                         [isLoading]="isLoading"
                         [isVirtual]="isVirtual"
                         [loadingTemplate]="cellLoadingTemplate"
-                    kendoGridLogicalCell
+                        kendoGridLogicalCell
                         [logicalRowIndex]="logicalRowIndex(rowIndex)"
                         [logicalColIndex]="logicalColIndex(column)"
                         [dataRowIndex]="$any(item).index"
@@ -20368,50 +21077,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
                         [class.k-grid-content-sticky]="column.sticky"
                         [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                    [ngClass]="column.cssClass"
-                    [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
-                    [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
-                    [attr.colspan]="column.colspan"
-                    [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
-                    [class.k-highlighted]="item.cells[lockedColumnsCount + columnIndex]?.isHighlighted">
-                </td>
-            </ng-container>
+                        [ngClass]="column.cssClass"
+                        [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
+                        [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
+                        [attr.colspan]="column.colspan"
+                        [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
+                        [class.k-highlighted]="item.cells[lockedColumnsCount + columnIndex]?.isHighlighted">
+                    </td>
+                </ng-container>
+            </ng-template>
         </tr>
         <tr *ngIf="item.showDetailRow"
             class="k-detail-row"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
-                [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
+                [logicalRowIndex]="isStackedMode ? logicalRowIndex(rowIndex) : logicalRowIndex(rowIndex) + 1"
                 [logicalSlaveRow]="false"
                 [logicalCellsCount]="1">
-            <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
-            <td class="k-hierarchy-cell k-table-td"></td>
-            <td class="k-detail-cell k-table-td"
-                [attr.colspan]="columnsSpan"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
-                    [logicalColIndex]="0"
-                    [dataRowIndex]="$any(item).index"
-                    [dataItem]="item.data"
-                    [colIndex]="0"
-                    [colSpan]="allColumnsSpan + 1"
-                    role="gridcell" aria-selected="false">
-                <ng-template
-                    [ngTemplateOutlet]="detailTemplate.templateRef"
-                    [ngTemplateOutletContext]="{
-                        dataItem: item.data,
-                        rowIndex: $any(item).index,
-                        $implicit: item.data
-                    }">
-                </ng-template>
-            </td>
+                <ng-container *ngIf="!isStackedMode">
+                    <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
+                    <td class="k-hierarchy-cell k-table-td"></td>
+                    <td class="k-detail-cell k-table-td"
+                        [attr.colspan]="columnsSpan"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
+                            [logicalColIndex]="0"
+                            [dataRowIndex]="$any(item).index"
+                            [dataItem]="item.data"
+                            [colIndex]="0"
+                            [colSpan]="allColumnsSpan + 1"
+                            role="gridcell" aria-selected="false">
+                        <ng-template
+                            [ngTemplateOutlet]="detailTemplate.templateRef"
+                            [ngTemplateOutletContext]="{
+                                dataItem: item.data,
+                                rowIndex: $any(item).index,
+                                $implicit: item.data
+                            }">
+                        </ng-template>
+                    </td>
+                </ng-container>
+                <ng-container *ngIf="isStackedMode">
+                    <td class="k-detail-cell k-table-td"
+                        [attr.colspan]="columnsSpan"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                            [logicalColIndex]="0"
+                            [dataRowIndex]="$any(item).index"
+                            [dataItem]="item.data"
+                            [colIndex]="0"
+                            [colSpan]="allColumnsSpan + 1"
+                            role="gridcell"
+                            aria-selected="false">
+                        <ng-template
+                            [ngTemplateOutlet]="detailTemplate.templateRef"
+                            [ngTemplateOutletContext]="{
+                                dataItem: item.data,
+                                rowIndex: $any(item).index,
+                                $implicit: item.data
+                            }">
+                        </ng-template>
+                    </td>
+                </ng-container>
         </tr>
         <tr *ngIf="item.type === 'footer'"
             class="k-group-footer"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
@@ -20419,29 +21153,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStackedMode"
                 kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalColIndex]="0"
                     aria-selected="false">
             </td>
-            <td kendoGridLogicalCell
+
+            <ng-container *ngIf="!isStackedMode">
+                <td kendoGridLogicalCell
+                        [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                        [logicalColIndex]="logicalColIndex(column)"
+                    [attr.data-skip]="skipGroupDecoration"
+                    class="k-table-td"
+                    *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
+                    <ng-template
+                        [templateContext]="{
+                            templateRef: $any(column).groupFooterTemplateRef,
+                            group: $any(item.data),
+                            field: $any(column).field,
+                            column: column,
+                            aggregates: $any(item.data)?.aggregates,
+                            $implicit: $any(item.data)?.aggregates
+                        }">
+                    </ng-template>
+               </td>
+            </ng-container>
+
+            <ng-container *ngIf="isStackedMode">
+                <td kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="logicalColIndex(column)"
-                [attr.data-skip]="skipGroupDecoration"
-                class="k-table-td"
-                *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
-                <ng-template
-                    [templateContext]="{
-                        templateRef: $any(column).groupFooterTemplateRef,
-                        group: $any(item.data),
-                        field: $any(column).field,
-                        column: column,
-                        aggregates: $any(item.data)?.aggregates,
-                        $implicit: $any(item.data)?.aggregates
-                    }">
-                </ng-template>
-           </td>
+                    [logicalColIndex]="hasDetailTemplate ? 1 : 0"
+                    [attr.data-skip]="skipGroupDecoration"
+                    class="k-table-td">
+                    <div class="k-grid-column-template">
+                        <ng-container *ngFor="let col of footerColumns">
+                            <div class="k-column-template-item" *ngIf="$any(col).groupFooterTemplateRef">
+                                <ng-template
+                                    [templateContext]="{
+                                        templateRef: $any(col).groupFooterTemplateRef,
+                                        group: $any(item.data),
+                                        field: $any(col).field,
+                                        column: col,
+                                        aggregates: $any(item.data)?.aggregates,
+                                        $implicit: $any(item.data)?.aggregates
+                                    }">
+                                </ng-template>
+                            </div>
+                        </ng-container>
+                    </div>
+                </td>
+            </ng-container>
         </tr>
     </ng-container>
     <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
@@ -21236,8 +21998,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1754484419,
-    version: '19.3.0-develop.23',
+    publishDate: 1754485381,
+    version: '19.3.0-develop.24',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -22149,11 +22911,12 @@ class NavigationMetadata {
     gridElement;
     virtualColumns;
     columns;
+    isStacked;
     get maxLogicalRowIndex() {
         const dataRows = this.hasDetailTemplate ? this.dataRows * 2 : this.dataRows;
         return this.headerRows + dataRows - 1;
     }
-    constructor(dataRows, headerRows, isVirtual, hasPager, hasDetailTemplate, gridElement, virtualColumns, columns) {
+    constructor(dataRows, headerRows, isVirtual, hasPager, hasDetailTemplate, gridElement, virtualColumns, columns, isStacked) {
         this.dataRows = dataRows;
         this.headerRows = headerRows;
         this.isVirtual = isVirtual;
@@ -22162,6 +22925,7 @@ class NavigationMetadata {
         this.gridElement = gridElement;
         this.virtualColumns = virtualColumns;
         this.columns = columns;
+        this.isStacked = isStacked;
     }
 }
 
@@ -22300,10 +23064,12 @@ const dropIndicatorClasses = ['k-drop-hint', 'k-drop-hint-h'];
 /**
  * @hidden
  */
-const defaultSelectors = {
-    handle: '.k-table-td.k-drag-cell',
-    dragTarget: '.k-master-row',
-    dropTarget: '.k-master-row'
+const getDefaultSelectors = (isStacked) => {
+    return {
+        handle: isStacked ? '.k-grid-stack-cell.k-drag-cell' : '.k-table-td.k-drag-cell',
+        dragTarget: '.k-master-row',
+        dropTarget: '.k-master-row'
+    };
 };
 const getDocument = element => element?.ownerDocument.documentElement;
 const getWindow = element => element?.ownerDocument.defaultView;
@@ -22314,7 +23080,7 @@ const getWindow = element => element?.ownerDocument.defaultView;
 class RowReorderService {
     renderer;
     hintElement = null;
-    defaultSelectors = defaultSelectors;
+    defaultSelectors = getDefaultSelectors;
     hintText = '';
     skip;
     dropIndicator;
@@ -23613,7 +24379,6 @@ class ListComponent {
     columnsEndIdx;
     viewportColumnsWidth;
     scrollLeft = 0;
-    recalculateRowspan = true;
     observer;
     get lockedLeafColumns() {
         return this.columns.lockedLeafColumns;
@@ -23622,7 +24387,7 @@ class ListComponent {
         return this.columns.nonLockedLeafColumns;
     }
     get nonLockedColumnsToRender() {
-        if (this.virtualColumns && !this.pdfService.exporting) {
+        if (this.virtualColumns && !this.pdfService.exporting && !this.isStacked) {
             return this.viewportColumns;
         }
         return this.nonLockedLeafColumns;
@@ -23635,13 +24400,13 @@ class ListComponent {
         return expandColumns(this.lockedLeafColumns.toArray()).reduce((prev, curr) => prev + (curr.width || 0), groupCellsWidth);
     }
     get nonLockedWidth() {
-        if ((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) {
+        if (((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) && !this.isStacked) {
             return sumColumnWidths(expandColumns(this.nonLockedColumnsToRender.toArray()));
         }
         return undefined;
     }
     get isLocked() {
-        return this.lockedLeafColumns.length > 0;
+        return this.lockedLeafColumns.length > 0 && !this.isStacked;
     }
     rtl = false;
     columnUpdateFrame;
@@ -23818,6 +24583,12 @@ class ListComponent {
             this.updateColumnViewport(startIdx, endIdx);
         }
     }
+    /**
+     * @hidden
+     */
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
+    }
     detailExpand({ index, expand }) {
         if (expand) {
             this.rowHeightService.expandDetail(index);
@@ -24129,7 +24900,7 @@ class ListComponent {
             }
         ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "lockedContainer", first: true, predicate: ["lockedContainer"], descendants: true }, { propertyName: "lockedTable", first: true, predicate: ["lockedTable"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "resizeSensors", predicate: ResizeSensorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth" tabindex="-1"
+        *ngIf="isLocked && !isStacked" [style.width.px]="lockedWidth" tabindex="-1"
         [kendoEventsOutsideAngular]="{
             keydown: lockedKeydown,
             scroll: lockedScroll,
@@ -24232,7 +25003,7 @@ class ListComponent {
         <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
-        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+        <div *ngIf="virtualColumns && !isStacked" class="k-width-container" role="presentation">
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
@@ -24250,7 +25021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-grid-list',
                     template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth" tabindex="-1"
+        *ngIf="isLocked && !isStacked" [style.width.px]="lockedWidth" tabindex="-1"
         [kendoEventsOutsideAngular]="{
             keydown: lockedKeydown,
             scroll: lockedScroll,
@@ -24353,7 +25124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
-        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+        <div *ngIf="virtualColumns && !isStacked" class="k-width-container" role="presentation">
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
@@ -25001,11 +25772,11 @@ class GridMessages extends ComponentMessages {
      */
     columnsReset;
     /**
-     * Sets the title for the expand icon of detail rows.
+     * Sets the title for the expand icon of detail rows. Applies also to the expand button text in stacked mode.
      */
     detailExpand;
     /**
-     * Sets the title for the collapse icon of detail rows.
+     * Sets the title for the collapse icon of detail rows. Applies also to the collapse button text in stacked mode.
      */
     detailCollapse;
     /**
@@ -25942,7 +26713,7 @@ class FormFormFieldComponent {
                 <kendo-formerror *ngFor="let err of control?.formControl?.errors | keyvalue">{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
             </ng-container>
         </kendo-formfield>
-    `, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i3.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { kind: "component", type: i4$1.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i4$1.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4$1.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i4$1.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }] });
+    `, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i3.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { kind: "component", type: i4.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i4.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i4.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFormFieldComponent, decorators: [{
             type: Component,
@@ -26099,7 +26870,7 @@ class FormComponent {
                 </button>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFormFieldComponent, selector: "kendo-form-formfield", inputs: ["control", "floatingLabel", "showError"] }, { kind: "component", type: i1$6.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFormFieldComponent, selector: "kendo-form-formfield", inputs: ["control", "floatingLabel", "showError"] }, { kind: "component", type: i1$6.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -27970,9 +28741,7 @@ class AiAssistantComponent {
             prompt: this.lastMessage,
             output: responseContentStart.concat(responseContentBody).join(''),
         };
-        if (this.promptOutputs[0].id === this.loadingOutput.id) {
-            this.promptOutputs.splice(0, 1);
-        }
+        this.deleteDummyLoadingOutput();
         this.promptOutputs.unshift(output);
         this.aiToolDirective.responseSuccess.emit(response);
     }
@@ -27982,9 +28751,15 @@ class AiAssistantComponent {
             prompt: this.lastMessage,
             output: error.message
         };
+        this.deleteDummyLoadingOutput();
         this.promptOutputs.unshift(output);
         this.aiToolDirective.responseError.emit(error);
     }
+    deleteDummyLoadingOutput() {
+        if (this.promptOutputs[0].id === this.loadingOutput.id) {
+            this.promptOutputs.splice(0, 1);
+        }
+    }
     unsubscribeCurrentRequest() {
         if (this.currentRequestSubscription) {
             this.currentRequestSubscription.unsubscribe();
@@ -28342,7 +29117,7 @@ class AIAssistantToolbarDirective extends ToolbarToolBase {
     get buttonElement() {
         return this.host.getButton();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, deps: [{ token: i1$7.WindowService }, { token: i53.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i53.RefreshService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, deps: [{ token: i1$7.WindowService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i54.RefreshService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIAssistantToolbarDirective, isStandalone: true, selector: "[kendoGridAIAssistantTool]", inputs: { requestUrl: "requestUrl", requestOptions: "requestOptions", aiWindowSettings: "aiWindowSettings", aiPromptSettings: "aiPromptSettings" }, outputs: { promptRequest: "promptRequest", cancelRequest: "cancelRequest", responseSuccess: "responseSuccess", responseError: "responseError", close: "close", open: "open" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, decorators: [{
@@ -28351,7 +29126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridAIAssistantTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$7.WindowService }, { type: i53.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i53.RefreshService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { requestUrl: [{
+        }], ctorParameters: function () { return [{ type: i1$7.WindowService }, { type: i54.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i54.RefreshService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { requestUrl: [{
                 type: Input
             }], requestOptions: [{
                 type: Input
@@ -28385,7 +29160,7 @@ const handleExpandCollapseGroupsService = (service, expandEmitter, collapseEmitt
     .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
 const handleExpandCollapseDetailsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ dataItem }) => isPresent(dataItem)))
     .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
-const isInEditedCell = (element, gridElement) => closest(element, matchesClasses('k-grid-edit-cell')) &&
+const isInEditedCell = (element, gridElement, isStacked = false) => (closest(element, matchesClasses('k-grid-edit-cell')) || (isStacked && closest(element, matchesClasses('k-grid-stack-edit-cell')))) &&
     closest(element, matchesNodeName('kendo-grid')) === gridElement;
 const NOTIFY_DELAY = 500;
 /**
@@ -28632,7 +29407,7 @@ class GridComponent {
      * @hidden
      */
     get isLocked() {
-        return this.lockedLeafColumns.length > 0;
+        return (this.lockedLeafColumns.length > 0 && !this.isStacked);
     }
     /**
      * @hidden
@@ -28658,7 +29433,9 @@ class GridComponent {
      * @hidden
      */
     get showGroupPanel() {
-        return this.groupable && this.groupable.enabled !== false;
+        const isGroupable = this.groupable && this.groupable.enabled !== false;
+        const isGrouped = this.group?.length > 0;
+        return this.isStacked ? isGroupable && isGrouped : isGroupable;
     }
     /**
      * @hidden
@@ -28936,6 +29713,12 @@ class GridComponent {
     get isGroupExpanded() {
         return this.groupsService.userCallback;
     }
+    /**
+     * Sets the Grid data layout display mode.
+     *
+     * @default 'columns'
+     */
+    dataLayoutMode = 'columns';
     /**
      * Fires when the Grid data is filtered through the UI and the filter descriptor changes.
      */
@@ -29063,8 +29846,11 @@ class GridComponent {
     get sizeMediumClass() {
         return this.size === 'medium' || !this.size;
     }
+    get stackedClass() {
+        return this.dataLayoutMode === 'stacked';
+    }
     get lockedClasses() {
-        return this.lockedLeafColumns.length > 0;
+        return this.lockedLeafColumns.length > 0 && !this.isStacked;
     }
     get virtualClasses() {
         return this.isVirtual;
@@ -29288,6 +30074,12 @@ class GridComponent {
     get isScrollable() {
         return this.scrollable !== 'none';
     }
+    /**
+     * @hidden
+     */
+    get isStacked() {
+        return typeof this.dataLayoutMode === 'string' ? this.dataLayoutMode !== 'columns' : this.dataLayoutMode.mode !== 'columns';
+    }
     get visibleColumns() {
         return this.columnsContainer.allColumns;
     }
@@ -29325,11 +30117,14 @@ class GridComponent {
         return this.nonLockedLeafColumns;
     }
     get lockedWidth() {
+        if (this.isStacked) {
+            return 0;
+        }
         const groupCellsWidth = this.group.length * GROUP_CELL_WIDTH;
         return expandColumns(this.lockedLeafColumns.toArray()).reduce((prev, curr) => prev + (curr.width || 0), groupCellsWidth);
     }
     get nonLockedWidth() {
-        if ((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) {
+        if (((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) && !this.isStacked) {
             return !this.virtualColumns ? this.columnsContainer.unlockedWidth :
                 this.leafViewportColumns.reduce((acc, column) => acc + (column.width || 0), 0);
         }
@@ -29355,7 +30150,7 @@ class GridComponent {
      * @hidden
      */
     getDefaultSelectors(type) {
-        return this.rowReorderService.defaultSelectors[type];
+        return this.rowReorderService.defaultSelectors(this.isStacked)[type];
     }
     /**
      * @hidden
@@ -29466,6 +30261,7 @@ class GridComponent {
         this.columnReorderSubscription = this.columnReorderService
             .changes.subscribe(this.reorder.bind(this));
         this.columnRangeChangeSubscription = this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this));
+        this.columnsContainer.isStacked = this.isStacked;
     }
     /**
      * Expands the master row at the specified data row index ([see example]({% slug hierarchy_grid %})).
@@ -29586,6 +30382,15 @@ class GridComponent {
                 }
             }
         }
+        if (isChanged$1('dataLayoutMode', changes)) {
+            if (this.isStacked) {
+                this.generateStackedColumns();
+            }
+            else {
+                this.stackedColumns = { columns: [], areDefault: false };
+            }
+            this.columnsContainer.isStacked = this.isStacked;
+        }
     }
     ngAfterContentInit() {
         this.shouldGenerateColumns = !this.columns.length;
@@ -29612,6 +30417,7 @@ class GridComponent {
         if (this.navigable.length) {
             this.navigationService.init(this.navigationMetadata(), this.navigable);
         }
+        this.isStacked && this.generateStackedColumns();
     }
     ngOnDestroy() {
         if (this.selectionSubscription) {
@@ -29782,7 +30588,7 @@ class GridComponent {
     editCell(rowIndex, column, group) {
         const instance = this.columnInstance(column);
         this.editService.editCell(rowIndex, instance, group);
-        this.focusEditElement('.k-grid-edit-cell');
+        this.focusEditElement(this.isStacked ? '.k-grid-stack-edit-cell' : '.k-grid-edit-cell');
     }
     /**
      * Closes the current cell in edit mode and fires the [`cellClose`]({% slug api_grid_gridcomponent %}#toc-cellclose) event.
@@ -30163,7 +30969,8 @@ class GridComponent {
             isRowSelectable: this.isRowSelectable,
             selectable: this.selectable,
             view: this.view,
-            columns: cellSelectionMode ? this.columnList.toArray() : undefined
+            columns: cellSelectionMode ? this.columnList.toArray() : undefined,
+            isStacked: this.isStacked
         });
         if (!this.selectionDirective && !this.selectableSettings.enabled) {
             this.defaultSelection.reset();
@@ -30217,7 +31024,7 @@ class GridComponent {
             if (this.lockedLeafColumns.length && !this.nonLockedLeafColumns.length) {
                 console.warn(GridConfigurationErrorMessages.nonLockedColumnPresent);
             }
-            if ((locked || this.virtualColumns) && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
+            if (!this.isStacked && (locked || this.virtualColumns) && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
                 console.warn(ColumnConfigurationErrorMessages.requiredWidth(locked ? 'Locked' : 'Virtual'));
             }
             if (locked && !this.isScrollable) {
@@ -30241,7 +31048,7 @@ class GridComponent {
             if (!this.detailRowHeight && this.isVirtual && this.detailTemplate) {
                 console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
             }
-            if (stickyColumns && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
+            if (!this.isStacked && stickyColumns && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
                 console.warn(ColumnConfigurationErrorMessages.requiredWidth('Sticky'));
             }
             if (this.rowSticky && this.scrollable === 'virtual') {
@@ -30265,6 +31072,47 @@ class GridComponent {
             }));
         }
     }
+    /**
+     * @hidden
+     */
+    stackedColumns = { columns: [], areDefault: false };
+    generateStackedColumns() {
+        if (!this.isStacked || !isPresent(this.dataLayoutMode)) {
+            return;
+        }
+        this.stackedColumns.columns = [];
+        if (typeof this.dataLayoutMode === 'object') {
+            if (this.dataLayoutMode.mode === 'stacked' && this.dataLayoutMode.stackedLayoutSettings?.cols) {
+                const columns = this.dataLayoutMode.stackedLayoutSettings.cols;
+                if (typeof columns === 'number') {
+                    for (let i = 0; i < columns; i++) {
+                        const currCol = { width: `${this.wrapper.nativeElement.clientWidth / columns}px` };
+                        this.stackedColumns.columns.push(currCol);
+                    }
+                    this.stackedColumns.areDefault = true;
+                }
+                else if (Array.isArray(columns)) {
+                    this.stackedColumns.columns = columns.map((colSize) => {
+                        const stackedColumn = {};
+                        if (typeof colSize === 'number') {
+                            stackedColumn.width = `${colSize}px`;
+                        }
+                        else if (typeof colSize === 'object' && colSize?.width) {
+                            stackedColumn.width = typeof colSize.width === 'number' ? `${colSize.width}px` : colSize.width;
+                        }
+                        else if (typeof colSize === 'string') {
+                            stackedColumn.width = colSize;
+                        }
+                        return stackedColumn;
+                    });
+                    this.stackedColumns.areDefault = false;
+                }
+            }
+        }
+        else {
+            this.stackedColumns = { columns: [{ width: this.wrapper.nativeElement.clientWidth }], areDefault: true };
+        }
+    }
     attachStateChangesEmitter() {
         this.stateChangeSubscription =
             merge(this.pageChange.pipe(map(x => ({
@@ -30347,14 +31195,14 @@ class GridComponent {
                     !closest(args.target, matchesClasses('k-animation-container k-grid-ignore-click')) &&
                     !(activeElement &&
                         (closest(activeElement, matchesClasses('k-animation-container')) ||
-                            isInEditedCell(activeElement, this.wrapper.nativeElement)))) {
+                            isInEditedCell(activeElement, this.wrapper.nativeElement, this.isStacked)))) {
                     this.editService.closeCell(args);
                 }
             });
             const windowBlurSubscription = this.renderer.listen('window', 'blur', (args) => {
                 const activeElement = document.activeElement;
                 if (activeElement && !(matchesNodeName('input')(activeElement) && activeElement.type === 'file' &&
-                    isInEditedCell(activeElement, this.wrapper.nativeElement))) {
+                    isInEditedCell(activeElement, this.wrapper.nativeElement, this.isStacked))) {
                     this.editService.closeCell(args);
                 }
                 this.domEvents.windowBlur.emit(args);
@@ -30473,8 +31321,8 @@ class GridComponent {
         const dataRows = isVirtual ? this.view.total : pageSize;
         const addRowOffset = this.editService.hasNewItem ? 1 : 0;
         const filterRowOffset = hasFilterRow(this.filterable) ? 1 : 0;
-        const headerRows = this.totalColumnLevels + 1 + filterRowOffset + addRowOffset;
-        return new NavigationMetadata(dataRows, headerRows, isVirtual, this.hasPager, isPresent(this.detailTemplate), this.wrapper, this.virtualColumns, this.columnsContainer);
+        const headerRows = this.isStacked ? 0 : this.totalColumnLevels + 1 + filterRowOffset + addRowOffset;
+        return new NavigationMetadata(dataRows, headerRows, isVirtual, this.hasPager, isPresent(this.detailTemplate), this.wrapper, this.virtualColumns, this.columnsContainer, this.isStacked);
     }
     applyAutoSize() {
         const cols = this.columns.filter((c) => this.autoSize ? c.autoSize !== false : c.autoSize);
@@ -30579,7 +31427,7 @@ class GridComponent {
         this.dropTargetContainer?.notify();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1$2.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }, { token: AdaptiveGridService }, { token: RowReorderService }, { token: DataMappingService }], 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: [
+    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", dataLayoutMode: "dataLayoutMode" }, 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-stack": "this.stackedClass", "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,
@@ -30863,10 +31711,10 @@ class GridComponent {
             i18n-columnsReset="kendo.grid.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
 
-            i18n-detailExpand="kendo.grid.detailExpand|The title of the expand icon of detail rows."
+            i18n-detailExpand="kendo.grid.detailExpand|The title of the expand icon of detail rows. Applies also to the expand button text in stacked mode."
             detailExpand="Expand Details"
 
-            i18n-detailCollapse="kendo.grid.detailCollapse|The title of the collapse icon of detail rows."
+            i18n-detailCollapse="kendo.grid.detailCollapse|The title of the collapse icon of detail rows. Applies also to the collapse button text in stacked mode."
             detailCollapse="Collapse Details"
 
             i18n-filterDateToday="kendo.grid.filterDateToday|The text of the Today button of the Date filter."
@@ -31088,7 +31936,7 @@ class GridComponent {
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount">
             <ng-container *ngIf="isScrollable">
-                <div *ngIf="!hideHeader"
+                <div *ngIf="!hideHeader && !isStacked"
                     class="k-grid-header"
                     [class.k-grid-draggable-header]="groupable || reorderable"
                     role="presentation"
@@ -31212,7 +32060,7 @@ class GridComponent {
                     class="k-grid-footer"
                     [style.padding]="headerPadding">
                     <div
-                        *ngIf="lockedLeafColumns.length"
+                        *ngIf="lockedLeafColumns.length && !isStacked"
                         class="k-grid-footer-locked"
                         [style.width.px]="lockedWidth">
                         <table
@@ -31223,7 +32071,7 @@ class GridComponent {
                             [style.width.px]="lockedWidth"
                             kendoGridTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(lockedLeafColumns)"
                                 [groups]="group"
                                 [detailTemplate]="detailTemplate">
@@ -31241,7 +32089,7 @@ class GridComponent {
                     </div>
                     <div #footer
                         class="k-grid-footer-wrap" data-scrollable
-                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0 && !isStacked"
                         [lockedWidth]="lockedWidth + scrollbarWidth + 3">
                         <table
                             role="presentation"
@@ -31250,7 +32098,7 @@ class GridComponent {
                             kendoGridTable
                             kendoGridResizableTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(headerLeafColumns)"
                                 [groups]="isLocked ? [] : group"
                                 [detailTemplate]="detailTemplate">
@@ -31260,7 +32108,7 @@ class GridComponent {
                                 [scrollable]="true"
                                 [groups]="isLocked ? [] : group"
                                 [columns]="$any(headerColumns)"
-                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [lockedColumnsCount]="isStacked ? 0 : lockedLeafColumns.length"
                                 [detailTemplate]="detailTemplate"
                                 [totalColumns]="columnsContainer"
                                 [totalColumnsCount]="leafColumns.length">
@@ -31284,7 +32132,7 @@ class GridComponent {
                         [detailTemplate]="detailTemplate">
                     </colgroup>
                     <thead kendoGridHeader
-                        *ngIf="!hideHeader"
+                        *ngIf="!hideHeader && !isStacked"
                         class="k-grid-header"
                         [class.k-grid-draggable-header]="groupable || reorderable"
                         role="rowgroup"
@@ -31425,7 +32273,7 @@ class GridComponent {
         <div *ngIf="aiAssistantToolbarTool" #windowContainer></div>
 
         <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: 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", "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", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "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]", inputs: ["licenseMessage"] }, { kind: "component", type: i52.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i52.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i52.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i52.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i52.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i52.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i52.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i52.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i52.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], 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 });
+    `, 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: 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", "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", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "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]", inputs: ["licenseMessage"] }, { kind: "component", type: i53.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i53.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i53.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i53.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i53.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i53.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i53.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i53.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i53.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], 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,
@@ -31718,10 +32566,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-columnsReset="kendo.grid.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
 
-            i18n-detailExpand="kendo.grid.detailExpand|The title of the expand icon of detail rows."
+            i18n-detailExpand="kendo.grid.detailExpand|The title of the expand icon of detail rows. Applies also to the expand button text in stacked mode."
             detailExpand="Expand Details"
 
-            i18n-detailCollapse="kendo.grid.detailCollapse|The title of the collapse icon of detail rows."
+            i18n-detailCollapse="kendo.grid.detailCollapse|The title of the collapse icon of detail rows. Applies also to the collapse button text in stacked mode."
             detailCollapse="Collapse Details"
 
             i18n-filterDateToday="kendo.grid.filterDateToday|The text of the Today button of the Date filter."
@@ -31943,7 +32791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount">
             <ng-container *ngIf="isScrollable">
-                <div *ngIf="!hideHeader"
+                <div *ngIf="!hideHeader && !isStacked"
                     class="k-grid-header"
                     [class.k-grid-draggable-header]="groupable || reorderable"
                     role="presentation"
@@ -32067,7 +32915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     class="k-grid-footer"
                     [style.padding]="headerPadding">
                     <div
-                        *ngIf="lockedLeafColumns.length"
+                        *ngIf="lockedLeafColumns.length && !isStacked"
                         class="k-grid-footer-locked"
                         [style.width.px]="lockedWidth">
                         <table
@@ -32078,7 +32926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [style.width.px]="lockedWidth"
                             kendoGridTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(lockedLeafColumns)"
                                 [groups]="group"
                                 [detailTemplate]="detailTemplate">
@@ -32096,7 +32944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </div>
                     <div #footer
                         class="k-grid-footer-wrap" data-scrollable
-                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0 && !isStacked"
                         [lockedWidth]="lockedWidth + scrollbarWidth + 3">
                         <table
                             role="presentation"
@@ -32105,7 +32953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             kendoGridTable
                             kendoGridResizableTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(headerLeafColumns)"
                                 [groups]="isLocked ? [] : group"
                                 [detailTemplate]="detailTemplate">
@@ -32115,7 +32963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [scrollable]="true"
                                 [groups]="isLocked ? [] : group"
                                 [columns]="$any(headerColumns)"
-                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [lockedColumnsCount]="isStacked ? 0 : lockedLeafColumns.length"
                                 [detailTemplate]="detailTemplate"
                                 [totalColumns]="columnsContainer"
                                 [totalColumnsCount]="leafColumns.length">
@@ -32139,7 +32987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [detailTemplate]="detailTemplate">
                     </colgroup>
                     <thead kendoGridHeader
-                        *ngIf="!hideHeader"
+                        *ngIf="!hideHeader && !isStacked"
                         class="k-grid-header"
                         [class.k-grid-draggable-header]="groupable || reorderable"
                         role="rowgroup"
@@ -32363,6 +33211,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isGroupExpanded: [{
                 type: Input
+            }], dataLayoutMode: [{
+                type: Input
             }], filterChange: [{
                 type: Output
             }], pageChange: [{
@@ -32434,6 +33284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], sizeMediumClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-md']
+            }], stackedClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-stack']
             }], lockedClasses: [{
                 type: HostBinding,
                 args: ['class.k-grid-lockedcolumns']
@@ -32925,12 +33778,14 @@ class EditingDirectiveBase {
     subscriptions = new Subscription();
     defaultEditService;
     userEditService;
+    navigationService;
     constructor(grid, localDataChangesService) {
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
         this.defaultEditService = this.createDefaultService();
         this.dialogService = inject(DialogService);
         this.localization = inject(LocalizationService);
+        this.navigationService = inject(NavigationService);
     }
     /**
      * @hidden
@@ -32979,13 +33834,20 @@ class EditingDirectiveBase {
             const confirmationCallback = typeof this.removeConfirmation === 'boolean' ? this.defaultRemoveConfirmation : this.removeConfirmation;
             const result = confirmationCallback(dataItem);
             if (result instanceof Promise) {
-                result.then(removeItem);
+                result.then((res) => {
+                    removeItem(res);
+                    this.returnFocusToGrid();
+                });
             }
             else if (result instanceof Observable) {
-                result.pipe(take(1)).subscribe(removeItem);
+                result.pipe(take(1)).subscribe((res) => {
+                    removeItem(res);
+                    this.returnFocusToGrid();
+                });
             }
             else {
                 removeItem(result);
+                this.returnFocusToGrid();
             }
         }
         else {
@@ -32998,6 +33860,11 @@ class EditingDirectiveBase {
     closeEditor(rowIndex) {
         this.grid.closeRow(rowIndex);
     }
+    returnFocusToGrid() {
+        if (!this.navigationService.focusCell()) {
+            this.navigationService.focusPrevCell() || this.navigationService.focusNextCell();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditingDirectiveBase, deps: [{ token: GridComponent }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditingDirectiveBase, selector: "[kendoGridEditingDirectiveBase]", inputs: { editService: "editService", removeConfirmation: "removeConfirmation" }, ngImport: i0 });
 }
@@ -33245,7 +34112,8 @@ class InCellEditingDirective extends EditingDirectiveBase {
     }
     cellClickHandler(args) {
         if (!args.isEdited && args.type !== 'contextmenu') {
-            this.grid.editCell(args.rowIndex, args.columnIndex, this.createFormGroup(args));
+            const colIndex = this.grid.isStacked ? args.column.leafIndex : args.columnIndex;
+            this.grid.editCell(args.rowIndex, colIndex, this.createFormGroup(args));
             this.cdr.markForCheck();
         }
     }
@@ -34350,7 +35218,7 @@ class PDFCommandToolbarDirective extends ToolbarToolBase {
         e.preventDefault();
         this.pdfService.exportClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, deps: [{ token: PDFService }, { token: i53.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, deps: [{ token: PDFService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PDFCommandToolbarDirective, isStandalone: true, selector: "[kendoGridPDFTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, decorators: [{
@@ -34359,7 +35227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridPDFTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: PDFService }, { type: i53.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: PDFService }, { type: i54.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Represents the **Export to Excel** toolbar tool of the Grid.
@@ -34395,7 +35263,7 @@ class ExcelCommandToolbarDirective extends ToolbarToolBase {
         e.preventDefault();
         this.excelService.exportClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, deps: [{ token: ExcelService }, { token: i53.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, deps: [{ token: ExcelService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExcelCommandToolbarDirective, isStandalone: true, selector: "[kendoGridExcelTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, decorators: [{
@@ -34404,7 +35272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridExcelTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: ExcelService }, { type: i53.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: ExcelService }, { type: i54.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * @hidden
@@ -34472,13 +35340,13 @@ class ToolbarEditingToolBase extends ToolbarToolBase {
     get isSelectionPresent() {
         return isPresent$1(this.lastSelectionIndex) && this.lastSelectionIndex > -1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEditingToolBase, deps: [{ token: i53.ToolBarButtonComponent }, { token: 'command' }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: EditService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEditingToolBase, deps: [{ token: i54.ToolBarButtonComponent }, { token: 'command' }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: EditService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarEditingToolBase, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEditingToolBase, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: i53.ToolBarButtonComponent }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i54.ToolBarButtonComponent }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['command']
                 }] }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: EditService }, { type: SelectionService }]; } });
@@ -34518,7 +35386,7 @@ class AddCommandToolbarDirective extends ToolbarEditingToolBase {
         e.preventDefault();
         this.editService.beginAdd();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, deps: [{ token: EditService }, { token: i53.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, deps: [{ token: EditService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AddCommandToolbarDirective, isStandalone: true, selector: "[kendoGridAddTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, decorators: [{
@@ -34527,7 +35395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridAddTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i53.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i54.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * @hidden
@@ -35078,7 +35946,7 @@ class UndoCommandToolbarDirective {
         e.preventDefault();
         this.undoRedoService.onUndo.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoCommandToolbarDirective, deps: [{ token: UndoRedoService }, { token: i53.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoCommandToolbarDirective, deps: [{ token: UndoRedoService }, { token: i54.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UndoCommandToolbarDirective, isStandalone: true, selector: "[kendoGridUndoTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoCommandToolbarDirective, decorators: [{
@@ -35087,7 +35955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridUndoTool]',
                     standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: UndoRedoService }, { type: i53.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: UndoRedoService }, { type: i54.ToolBarButtonComponent }]; } });
 
 /**
  * Represents the command that triggers the redo action in the Grid.
@@ -35141,7 +36009,7 @@ class RedoCommandToolbarDirective {
         e.preventDefault();
         this.undoRedoService.onRedo.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedoCommandToolbarDirective, deps: [{ token: UndoRedoService }, { token: i53.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedoCommandToolbarDirective, deps: [{ token: UndoRedoService }, { token: i54.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RedoCommandToolbarDirective, isStandalone: true, selector: "[kendoGridRedoTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedoCommandToolbarDirective, decorators: [{
@@ -35150,7 +36018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridRedoTool]',
                     standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: UndoRedoService }, { type: i53.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: UndoRedoService }, { type: i54.ToolBarButtonComponent }]; } });
 
 let incrementingId$2 = 0;
 /**
@@ -35341,7 +36209,7 @@ class SortCommandToolbarDirective {
     get buttonElement() {
         return this.host.getButton();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortCommandToolbarDirective, deps: [{ token: i53.ToolBarButtonComponent }, { token: i2.PopupService }, { token: ContextService }, { token: SortService }, { token: ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortCommandToolbarDirective, deps: [{ token: i54.ToolBarButtonComponent }, { token: i2.PopupService }, { token: ContextService }, { token: SortService }, { token: ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SortCommandToolbarDirective, isStandalone: true, selector: "[kendoGridSortTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortCommandToolbarDirective, decorators: [{
@@ -35350,7 +36218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSortTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i53.ToolBarButtonComponent }, { type: i2.PopupService }, { type: ContextService }, { type: SortService }, { type: ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: AdaptiveGridService }]; } });
+        }], ctorParameters: function () { return [{ type: i54.ToolBarButtonComponent }, { type: i2.PopupService }, { type: ContextService }, { type: SortService }, { type: ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: AdaptiveGridService }]; } });
 
 /**
  * @hidden
@@ -35673,7 +36541,7 @@ class FilterCommandToolbarDirective {
     get buttonElement() {
         return this.host.getButton();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCommandToolbarDirective, deps: [{ token: i53.ToolBarButtonComponent }, { token: i2.PopupService }, { token: ContextService }, { token: FilterService }, { token: ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCommandToolbarDirective, deps: [{ token: i54.ToolBarButtonComponent }, { token: i2.PopupService }, { token: ContextService }, { token: FilterService }, { token: ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterCommandToolbarDirective, isStandalone: true, selector: "[kendoGridFilterTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCommandToolbarDirective, decorators: [{
@@ -35682,7 +36550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridFilterTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i53.ToolBarButtonComponent }, { type: i2.PopupService }, { type: ContextService }, { type: FilterService }, { type: ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: AdaptiveGridService }]; } });
+        }], ctorParameters: function () { return [{ type: i54.ToolBarButtonComponent }, { type: i2.PopupService }, { type: ContextService }, { type: FilterService }, { type: ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: AdaptiveGridService }]; } });
 
 /**
  * Represents the `edit` command in the Grid. Apply this directive to any `kendo-toolbar-button`
@@ -35718,7 +36586,7 @@ class EditCommandToolbarDirective extends ToolbarEditingToolBase {
         }
         this.editService.beginEdit(this.lastSelectionIndex);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCommandToolbarDirective, deps: [{ token: EditService }, { token: i53.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCommandToolbarDirective, deps: [{ token: EditService }, { token: i54.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditCommandToolbarDirective, isStandalone: true, selector: "[kendoGridEditTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCommandToolbarDirective, decorators: [{
@@ -35727,7 +36595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridEditTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i53.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i54.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Represents the `save` command in the Grid. Apply this directive to any `kendo-toolbar-button`
@@ -35768,7 +36636,7 @@ class SaveCommandToolbarDirective extends ToolbarEditingToolBase {
             this.editService.editedIndices.forEach(i => this.editService.save(i.index));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveCommandToolbarDirective, deps: [{ token: EditService }, { token: i53.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveCommandToolbarDirective, deps: [{ token: EditService }, { token: i54.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SaveCommandToolbarDirective, isStandalone: true, selector: "[kendoGridSaveTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveCommandToolbarDirective, decorators: [{
@@ -35777,7 +36645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSaveTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i53.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i54.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Represents the `remove` command in the Grid. Apply this directive to any `kendo-toolbar-button`
@@ -35814,7 +36682,7 @@ class RemoveCommandToolbarDirective extends ToolbarEditingToolBase {
             this.editService.remove(this.lastSelectionIndex);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveCommandToolbarDirective, deps: [{ token: EditService }, { token: i53.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveCommandToolbarDirective, deps: [{ token: EditService }, { token: i54.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RemoveCommandToolbarDirective, isStandalone: true, selector: "[kendoGridRemoveTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveCommandToolbarDirective, decorators: [{
@@ -35823,7 +36691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridRemoveTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i53.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i54.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Represents the `cancel` command in the Grid.
@@ -35863,7 +36731,7 @@ class CancelCommandToolbarDirective extends ToolbarEditingToolBase {
             this.editService.editedIndices.forEach(i => this.editService.endEdit(i.index));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandToolbarDirective, deps: [{ token: EditService }, { token: i53.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandToolbarDirective, deps: [{ token: EditService }, { token: i54.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CancelCommandToolbarDirective, isStandalone: true, selector: "[kendoGridCancelTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandToolbarDirective, decorators: [{
@@ -35872,7 +36740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridCancelTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i53.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i54.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
 let incrementingId = 0;
 /**
@@ -36053,7 +36921,7 @@ class GroupCommandToolbarDirective {
     isGroupingApplied(group) {
         return isPresent$1(group) && group.length > 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, deps: [{ token: i53.ToolBarButtonComponent }, { token: i2.PopupService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, deps: [{ token: i54.ToolBarButtonComponent }, { token: i2.PopupService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupCommandToolbarDirective, isStandalone: true, selector: "[kendoGridGroupTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, decorators: [{
@@ -36062,7 +36930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridGroupTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i53.ToolBarButtonComponent }, { type: i2.PopupService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: AdaptiveGridService }]; } });
+        }], ctorParameters: function () { return [{ type: i54.ToolBarButtonComponent }, { type: i2.PopupService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: AdaptiveGridService }]; } });
 
 /**
  * Stores the row and cell highlight state of the Grid.
@@ -36187,6 +37055,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Represents the toolbar tool for showing a select-all `kendoGridSelectAllCheckbox` checkbox.
+ * Use this component inside a ToolbarComponent in the Grid.
+ *
+ * @example
+ * ```html
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-grid-select-all-tool text="Select All"></kendo-grid-select-all-tool>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+class SelectAllToolbarToolComponent extends ToolBarToolComponent {
+    idService;
+    ctx;
+    constructor(idService, ctx) {
+        super();
+        this.idService = idService;
+        this.ctx = ctx;
+    }
+    /**
+     * @hidden
+     */
+    selectAllCheckboxId() {
+        return this.idService.selectAllCheckboxId();
+    }
+    /**
+     * @hidden
+     */
+    get selectAllCheckboxLabel() {
+        return this.ctx.localization.get('selectAllCheckboxLabel');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllToolbarToolComponent, deps: [{ token: IdService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllToolbarToolComponent, isStandalone: true, selector: "kendo-grid-select-all-tool", providers: [
+            {
+                provide: ToolBarToolComponent,
+                useExisting: forwardRef(() => SelectAllToolbarToolComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate #sectionTemplate #popupTemplate>
+            <kendo-checkbox #checkbox
+                [attr.id]="selectAllCheckboxId()"
+                size="large"
+                [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                kendoGridSelectAllCheckbox
+                kendoGridFocusable
+            ></kendo-checkbox>
+            <label class="k-checkbox-label" [for]="checkbox.focusableId">{{selectAllCheckboxLabel}}</label>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllToolbarToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ToolBarToolComponent,
+                            useExisting: forwardRef(() => SelectAllToolbarToolComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-select-all-tool',
+                    template: `
+        <ng-template #toolbarTemplate #sectionTemplate #popupTemplate>
+            <kendo-checkbox #checkbox
+                [attr.id]="selectAllCheckboxId()"
+                size="large"
+                [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                kendoGridSelectAllCheckbox
+                kendoGridFocusable
+            ></kendo-checkbox>
+            <label class="k-checkbox-label" [for]="checkbox.focusableId">{{selectAllCheckboxLabel}}</label>
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [CheckBoxComponent, SelectAllCheckboxDirective, FocusableDirective, LabelDirective]
+                }]
+        }], ctorParameters: function () { return [{ type: IdService }, { type: ContextService }]; } });
+
 // DRAGGABLE COLUMN
 /**
  * @hidden
@@ -36417,7 +37364,8 @@ const KENDO_GRID_BODY_EXPORTS = [
     SortCommandToolbarDirective,
     FilterCommandToolbarDirective,
     AIAssistantToolbarDirective,
-    GroupCommandToolbarDirective
+    GroupCommandToolbarDirective,
+    SelectAllToolbarToolComponent
 ];
 /**
  * @hidden
@@ -36559,9 +37507,9 @@ const KENDO_GRID = [
  */
 class GridModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i52.CustomMessagesComponent, i52.PagerFocusableDirective, i52.PagerInfoComponent, i52.PagerInputComponent, i52.PagerNextButtonsComponent, i52.PagerNumericButtonsComponent, i52.PagerPageSizesComponent, i52.PagerPrevButtonsComponent, i52.PagerTemplateDirective, i52.PagerComponent, i52.PagerSpacerComponent, i53.ToolBarComponent, i53.ToolbarCustomMessagesComponent, i53.ToolBarButtonComponent, i53.ToolBarButtonGroupComponent, i53.ToolBarDropDownButtonComponent, i53.ToolBarSeparatorComponent, i53.ToolBarSpacerComponent, i53.ToolBarSplitButtonComponent, i53.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, HighlightDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GroupBindingDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, FormComponent, DialogFormComponent, FormFormFieldComponent, UndoRedoDirective, i53.ToolBarComponent, i53.ToolbarCustomMessagesComponent, i53.ToolBarButtonComponent, i53.ToolBarButtonGroupComponent, i53.ToolBarDropDownButtonComponent, i53.ToolBarSeparatorComponent, i53.ToolBarSpacerComponent, i53.ToolBarSplitButtonComponent, i53.ToolBarToolComponent, TableDirective,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, HighlightDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GroupBindingDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, FormComponent, DialogFormComponent, FormFormFieldComponent, UndoRedoDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, TableDirective,
             UndoCommandToolbarDirective,
-            RedoCommandToolbarDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, HighlightDirective, CustomMessagesComponent, GroupBindingDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, UndoRedoDirective, UndoCommandToolbarDirective, RedoCommandToolbarDirective, i53.ToolBarComponent, i53.ToolbarCustomMessagesComponent, i53.ToolBarButtonComponent, i53.ToolBarButtonGroupComponent, i53.ToolBarDropDownButtonComponent, i53.ToolBarSeparatorComponent, i53.ToolBarSpacerComponent, i53.ToolBarSplitButtonComponent, i53.ToolBarToolComponent, i52.CustomMessagesComponent, i52.PagerFocusableDirective, i52.PagerInfoComponent, i52.PagerInputComponent, i52.PagerNextButtonsComponent, i52.PagerNumericButtonsComponent, i52.PagerPageSizesComponent, i52.PagerPrevButtonsComponent, i52.PagerTemplateDirective, i52.PagerComponent, i52.PagerSpacerComponent] });
+            RedoCommandToolbarDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, HighlightDirective, CustomMessagesComponent, GroupBindingDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, UndoRedoDirective, UndoCommandToolbarDirective, RedoCommandToolbarDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, providers: [
             PopupService,
             ResizeBatchService,
@@ -36576,7 +37524,7 @@ class GridModule {
             MonthViewService,
             YearViewService,
             NavigationService$1
-        ], imports: [GroupHeaderComponent, GroupPanelComponent, TableBodyComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, i52.CustomMessagesComponent, i52.PagerInfoComponent, i52.PagerInputComponent, i52.PagerNextButtonsComponent, i52.PagerNumericButtonsComponent, i52.PagerPageSizesComponent, i52.PagerPrevButtonsComponent, i52.PagerComponent, i52.PagerSpacerComponent, i53.ToolBarComponent, i53.ToolbarCustomMessagesComponent, i53.ToolBarButtonComponent, i53.ToolBarButtonGroupComponent, i53.ToolBarDropDownButtonComponent, i53.ToolBarSeparatorComponent, i53.ToolBarSpacerComponent, i53.ToolBarSplitButtonComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, FormComponent, DialogFormComponent, FormFormFieldComponent, i53.ToolBarComponent, i53.ToolbarCustomMessagesComponent, i53.ToolBarButtonComponent, i53.ToolBarButtonGroupComponent, i53.ToolBarDropDownButtonComponent, i53.ToolBarSeparatorComponent, i53.ToolBarSpacerComponent, i53.ToolBarSplitButtonComponent] });
+        ], imports: [GroupHeaderComponent, GroupPanelComponent, TableBodyComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, SelectAllToolbarToolComponent, HeaderComponent, i53.CustomMessagesComponent, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerComponent, i53.PagerSpacerComponent, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, FormComponent, DialogFormComponent, FormFormFieldComponent, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, decorators: [{
             type: NgModule,
@@ -36688,5 +37636,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AIAssistantToolbarDirective, AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CancelCommandToolbarDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_AI_REQUEST_OPTIONS, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditCommandToolbarDirective, EditService as EditServiceClass, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterCommandToolbarDirective, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupCommandToolbarDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, HighlightDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RedoCommandToolbarDirective, RemoveCommandDirective, RemoveCommandToolbarDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, SaveCommandToolbarDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortCommandToolbarDirective, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, UndoCommandToolbarDirective, UndoRedoDirective, UndoRedoEvent, convertDateStringsInFilter, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isDateField, isFilterable, slice };
+export { AIAssistantToolbarDirective, AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CancelCommandToolbarDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_AI_REQUEST_OPTIONS, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditCommandToolbarDirective, EditService as EditServiceClass, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterCommandToolbarDirective, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupCommandToolbarDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, HighlightDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RedoCommandToolbarDirective, RemoveCommandDirective, RemoveCommandToolbarDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, SaveCommandToolbarDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectAllToolbarToolComponent, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortCommandToolbarDirective, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, UndoCommandToolbarDirective, UndoRedoDirective, UndoRedoEvent, convertDateStringsInFilter, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isDateField, isFilterable, slice };