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

package/esm2022/grid.component.mjs

@@ -143,7 +143,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;
 /**
@@ -390,7 +390,7 @@ export class GridComponent {
      * @hidden
      */
     get isLocked() {
-        return this.lockedLeafColumns.length > 0;
+        return (this.lockedLeafColumns.length > 0 && !this.isStacked);
     }
     /**
      * @hidden
@@ -416,7 +416,9 @@ export 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
@@ -694,6 +696,12 @@ export 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.
      */
@@ -821,8 +829,11 @@ export 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;
@@ -1046,6 +1057,12 @@ export 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;
     }
@@ -1083,11 +1100,14 @@ export 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);
         }
@@ -1113,7 +1133,7 @@ export class GridComponent {
      * @hidden
      */
     getDefaultSelectors(type) {
-        return this.rowReorderService.defaultSelectors[type];
+        return this.rowReorderService.defaultSelectors(this.isStacked)[type];
     }
     /**
      * @hidden
@@ -1224,6 +1244,7 @@ export 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 %})).
@@ -1344,6 +1365,15 @@ export class GridComponent {
                 }
             }
         }
+        if (isChanged('dataLayoutMode', changes)) {
+            if (this.isStacked) {
+                this.generateStackedColumns();
+            }
+            else {
+                this.stackedColumns = { columns: [], areDefault: false };
+            }
+            this.columnsContainer.isStacked = this.isStacked;
+        }
     }
     ngAfterContentInit() {
         this.shouldGenerateColumns = !this.columns.length;
@@ -1370,6 +1400,7 @@ export class GridComponent {
         if (this.navigable.length) {
             this.navigationService.init(this.navigationMetadata(), this.navigable);
         }
+        this.isStacked && this.generateStackedColumns();
     }
     ngOnDestroy() {
         if (this.selectionSubscription) {
@@ -1540,7 +1571,7 @@ export 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.
@@ -1921,7 +1952,8 @@ export 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();
@@ -1975,7 +2007,7 @@ export 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) {
@@ -1999,7 +2031,7 @@ export 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') {
@@ -2023,6 +2055,47 @@ export 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 => ({
@@ -2105,14 +2178,14 @@ export 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);
@@ -2231,8 +2304,8 @@ export 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);
@@ -2337,7 +2410,7 @@ export class GridComponent {
         this.dropTargetContainer?.notify();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, deps: [{ token: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.SizingOptionsService }, { token: i24.AdaptiveGridService }, { token: i25.RowReorderService }, { token: i26.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,
@@ -2621,10 +2694,10 @@ export 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."
@@ -2846,7 +2919,7 @@ export 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"
@@ -2970,7 +3043,7 @@ export 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
@@ -2981,7 +3054,7 @@ export class GridComponent {
                             [style.width.px]="lockedWidth"
                             kendoGridTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(lockedLeafColumns)"
                                 [groups]="group"
                                 [detailTemplate]="detailTemplate">
@@ -2999,7 +3072,7 @@ export 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"
@@ -3008,7 +3081,7 @@ export class GridComponent {
                             kendoGridTable
                             kendoGridResizableTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(headerLeafColumns)"
                                 [groups]="isLocked ? [] : group"
                                 [detailTemplate]="detailTemplate">
@@ -3018,7 +3091,7 @@ export 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">
@@ -3042,7 +3115,7 @@ export 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"
@@ -3476,10 +3549,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."
@@ -3701,7 +3774,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"
@@ -3825,7 +3898,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
@@ -3836,7 +3909,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">
@@ -3854,7 +3927,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"
@@ -3863,7 +3936,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">
@@ -3873,7 +3946,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">
@@ -3897,7 +3970,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"
@@ -4121,6 +4194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isGroupExpanded: [{
                 type: Input
+            }], dataLayoutMode: [{
+                type: Input
             }], filterChange: [{
                 type: Output
             }], pageChange: [{
@@ -4192,6 +4267,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']