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

package/esm2022/rendering/common/col-group.component.mjs

@@ -4,20 +4,34 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input } from '@angular/core';
 import { DetailTemplateDirective } from '../details/detail-template.directive';
+import { ColumnBase } from "../../columns/column-base";
 import { columnsToRender } from '../../columns/column-common';
 import { isNullOrEmptyString, isTruthy } from '../../utils';
 import { NgFor, NgIf } from '@angular/common';
+import { ContextService } from '../../common/provider.service';
 import * as i0 from "@angular/core";
+import * as i1 from "../../common/provider.service";
 /**
  * @hidden
  */
 export class ColGroupComponent {
+    ctx;
     columns = [];
     groups = [];
     detailTemplate;
     sort = new Array();
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    getColumnWidth(column) {
+        const columnWidth = column.width ? `${column.width}px` : undefined;
+        return this.isStacked ? '100%' : columnWidth;
+    }
     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;
@@ -35,13 +49,13 @@ export 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: i1.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"] }] });
@@ -53,16 +67,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: i1.ContextService }]; }, propDecorators: { columns: [{
                 type: Input
             }], groups: [{
                 type: Input

package/esm2022/rendering/details-expand.directive.mjs

@@ -16,8 +16,11 @@ import * as i1 from "../grid.component";
  * ([see example](slug:master_detail_expanded_state_grid#toc-built-in-directive))
  *
  * @example
- * ```typescript
- * <kendo-grid [kendoGridExpandDetailsBy]="expandDetailsKey" [expandedDetailKeys]="expandedDetailKeys"></kendo-grid>
+ * ```html
+ * <kendo-grid
+ *     [kendoGridExpandDetailsBy]="expandDetailsKey"
+ *     [expandedDetailKeys]="expandedDetailKeys">
+ * </kendo-grid>
  * ```
  * @remarks
  * Applied to: {@link GridComponent}.

package/esm2022/rendering/footer/footer.component.mjs

@@ -13,13 +13,16 @@ import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
 import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
 import { LogicalRowDirective } from '../../navigation/logical-row.directive';
 import { TemplateContextDirective } from '@progress/kendo-angular-common';
+import { ContextService } from '../../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./../../common/column-info.service";
+import * as i2 from "../../common/provider.service";
 /**
  * @hidden
  */
 export class FooterComponent {
     columnInfoService;
+    ctx;
     columns = [];
     groups = [];
     detailTemplate;
@@ -33,15 +36,16 @@ export 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;
@@ -60,47 +64,78 @@ export 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: i1.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: i1.ColumnInfoService }, { token: i2.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>
@@ -117,40 +152,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>
@@ -159,7 +222,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: i1.ColumnInfoService }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: i1.ColumnInfoService }, { type: i2.ContextService }]; }, propDecorators: { columns: [{
                 type: Input
             }], groups: [{
                 type: Input

package/esm2022/rendering/header/header.component.mjs

@@ -16,7 +16,7 @@ import { columnsToRender, sortColumns, isInSpanColumn } from "../../columns/colu
 import { SinglePopupService } from '../../common/single-popup.service';
 import { hasFilterMenu, hasFilterRow } from '../../filtering/filterable';
 import { IdService } from '../../common/id.service';
-import { DraggableDirective, isDocumentAvailable, Keys, TemplateContextDirective } from '@progress/kendo-angular-common';
+import { DraggableDirective, isDocumentAvailable, Keys, normalizeNumpadKeys, TemplateContextDirective } from '@progress/kendo-angular-common';
 import { DropTargetDirective } from '../../dragdrop/drop-target.directive';
 import { DraggableColumnDirective } from '../../dragdrop/draggable-column.directive';
 import { DragHintService } from '../../dragdrop/drag-hint.service';
@@ -168,14 +168,15 @@ export class HeaderComponent {
         this.sortColumn(toggledColumn);
     }
     onHeaderKeydown(column, args) {
-        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
+        const code = normalizeNumpadKeys(args);
+        if (code === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
             args.preventDefault();
             args.stopImmediatePropagation();
             const filterMenu = this.filterMenus.find(fm => fm.column === column);
             filterMenu.toggle(filterMenu.anchor.nativeElement, filterMenu.template);
             return;
         }
-        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showColumnMenu(column)) {
+        if (code === Keys.ArrowDown && args.altKey && this.showColumnMenu(column)) {
             args.preventDefault();
             args.stopImmediatePropagation();
             const columnMenu = this.columnMenus.find(cm => cm.column === column);
@@ -183,7 +184,7 @@ export class HeaderComponent {
             return;
         }
         const isCtrlOrMeta = args.ctrlKey || args.metaKey;
-        const isGroupingKeyShortcut = (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) && isCtrlOrMeta;
+        const isGroupingKeyShortcut = (code === Keys.Enter || code === Keys.Space) && isCtrlOrMeta;
         if (isGroupingKeyShortcut && this.isGroupable(column)) {
             args.preventDefault();
             args.stopImmediatePropagation();
@@ -199,12 +200,12 @@ export class HeaderComponent {
             this.contextService.grid.groupChange.emit(this.groups);
             return;
         }
-        const isLeftOrRightArrow = args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowRight;
+        const isLeftOrRightArrow = code === Keys.ArrowLeft || code === Keys.ArrowRight;
         const isReorderingKeyShortcut = isLeftOrRightArrow && isCtrlOrMeta;
         if (isReorderingKeyShortcut && this.isReorderable(column)) {
             args.preventDefault();
             const columnsCount = this.columnInfoService.leafNamedColumns.length;
-            const reorderDirection = args.keyCode === Keys.ArrowLeft ? -1 : 1;
+            const reorderDirection = code === Keys.ArrowLeft ? -1 : 1;
             const rtlMultiplier = this.contextService.localization.rtl ? -1 : 1;
             const reorderDirectionOffset = reorderDirection * rtlMultiplier;
             const newIndex = column.leafIndex + reorderDirectionOffset;
@@ -221,7 +222,7 @@ export class HeaderComponent {
         if (!this.sortable || args.defaultPrevented || column.sortable === false) {
             return;
         }
-        if (args.keyCode === Keys.Enter && isPresent(column.field)) {
+        if (code === Keys.Enter && isPresent(column.field)) {
             const modifier = this.matchModifier(args);
             this.sortService.sort(this.toggleSort(column, modifier));
         }
@@ -400,6 +401,9 @@ export class HeaderComponent {
     get leafColumns() {
         return this._leafColumns;
     }
+    get isStacked() {
+        return this.contextService.grid?.isStacked;
+    }
     isReorderable(column) {
         return this.reorderable && column.reorderable;
     }
@@ -502,7 +506,7 @@ export 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;">
@@ -726,7 +730,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;">

package/esm2022/rendering/list.component.mjs

@@ -21,7 +21,7 @@ import { GroupsService } from "../grouping/groups.service";
 import { expandColumns, sumColumnWidths } from "../columns/column-common";
 import { ScrollSyncService } from "../scrolling/scroll-sync.service";
 import { ResizeService } from "../layout/resize.service";
-import { EventsOutsideAngularDirective, isDocumentAvailable, ResizeSensorComponent } from "@progress/kendo-angular-common";
+import { EventsOutsideAngularDirective, isDocumentAvailable, normalizeNumpadKeys, ResizeSensorComponent } from "@progress/kendo-angular-common";
 import { BrowserSupportService } from "../layout/browser-support.service";
 import { EditService } from '../editing/edit.service';
 import { NavigationService } from '../navigation/navigation.service';
@@ -178,7 +178,6 @@ export class ListComponent {
     columnsEndIdx;
     viewportColumnsWidth;
     scrollLeft = 0;
-    recalculateRowspan = true;
     observer;
     get lockedLeafColumns() {
         return this.columns.lockedLeafColumns;
@@ -187,7 +186,7 @@ export 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;
@@ -200,13 +199,13 @@ export 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;
@@ -270,7 +269,7 @@ export class ListComponent {
         if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
             this.updateViewportColumns();
         }
-        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !this.ctx.grid.pageSize;
+        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !isPresent(this.ctx.grid.pageSize);
         if (shouldCalculatePageSize) {
             const calculatedPageSize = this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
@@ -346,8 +345,10 @@ export class ListComponent {
         }
     }
     lockedKeydown(args) {
-        if (args.keyCode === Keys.PageDown || args.keyCode === Keys.PageUp) {
-            const dir = args.keyCode === Keys.PageDown ? 1 : -1;
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const code = normalizeNumpadKeys(args);
+        if (code === Keys.PageDown || code === Keys.PageUp) {
+            const dir = code === Keys.PageDown ? 1 : -1;
             const element = this.container.nativeElement;
             element.scrollTop += element.offsetHeight * dir * 0.8;
             args.preventDefault();
@@ -383,6 +384,12 @@ export class ListComponent {
             this.updateColumnViewport(startIdx, endIdx);
         }
     }
+    /**
+     * @hidden
+     */
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
+    }
     detailExpand({ index, expand }) {
         if (expand) {
             this.rowHeightService.expandDetail(index);
@@ -694,7 +701,7 @@ export 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,
@@ -797,7 +804,7 @@ export 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>
@@ -815,7 +822,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,
@@ -918,7 +925,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>

package/esm2022/rendering/loading-template.directive.mjs

@@ -19,6 +19,7 @@ import * as i0 from "@angular/core";
  *   <kendo-grid-column field="ProductName"></kendo-grid-column>
  *   <kendo-grid-column field="UnitPrice"></kendo-grid-column>
  * </kendo-grid>
+ * ```
  */
 export class LoadingTemplateDirective {
     templateRef;