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

package/esm2022/rendering/table-body.component.mjs

@@ -11,7 +11,7 @@ import { isChanged, isPresent } from '../utils';
 import { NoRecordsTemplateDirective } from './no-records-template.directive';
 import { EditService } from '../editing/edit.service';
 import { columnsSpan, columnsToRender } from "../columns/column-common";
-import { closest, closestInScope, hasClasses, isFocusableWithTabKey, matchesClasses, matchesNodeName } from './common/dom-queries';
+import { closest, closestInScope, findElement, hasClasses, isFocusableWithTabKey, matchesClasses, matchesNodeName } from './common/dom-queries';
 import { DomEventsService } from '../common/dom-events.service';
 import { SelectionService } from "../selection/selection.service";
 import { ColumnInfoService } from "../common/column-info.service";
@@ -43,10 +43,13 @@ import * as i7 from "../selection/selection.service";
 import * as i8 from "../selection/cell-selection.service";
 import * as i9 from "../common/column-info.service";
 import * as i10 from "../navigation/navigation.service";
-const columnCellIndex = (cell, cells) => {
+const columnCellIndex = (cell, cells, isStacked) => {
     let cellIndex = 0;
     for (let idx = 0; idx < cells.length; idx++) {
-        if (cells[idx] === cell) {
+        const isChildCell = cell.parentNode === cells[idx];
+        const isActualCell = cell === cells[idx];
+        const matches = isActualCell || (isStacked && isChildCell);
+        if (matches) {
             return cellIndex;
         }
         if (!hasClasses(cells[idx], 'k-hierarchy-cell k-group-cell')) {
@@ -134,8 +137,8 @@ export 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) {
@@ -206,10 +209,10 @@ export 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;
@@ -272,6 +275,9 @@ export 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;
     }
@@ -311,11 +317,12 @@ export class TableBodyComponent {
         const element = this.element.nativeElement;
         const target = this.eventTarget(eventArg);
         const selectionEnabled = this.selectable && this.selectable.enabled !== false;
-        if (eventArg.keyCode === Keys.Space) {
+        if (eventArg.code === Keys.Space) {
             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();
@@ -327,7 +334,7 @@ export class TableBodyComponent {
         if (!gridTbody) {
             return;
         }
-        const cell = closest(currentTarget, (el) => {
+        let cell = closest(currentTarget, (el) => {
             if (!matchesNodeName('td')(el)) {
                 return false;
             }
@@ -345,11 +352,30 @@ export 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;
                 }
@@ -380,15 +406,19 @@ export class TableBodyComponent {
         }));
     }
     cellKeydownHandler(args) {
-        if (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) {
+        if (args.code === Keys.Enter || args.code === Keys.NumpadEnter || args.code === Keys.Space || (this.navigationService.tableCellEntered && args.code === 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') : row.cells;
+        const index = columnCellIndex(cell, cells, this.isStackedMode);
+        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);
@@ -441,7 +471,7 @@ export 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">
@@ -449,32 +479,48 @@ export 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">
@@ -504,7 +550,7 @@ export class TableBodyComponent {
                 [totalColumnsCount]="totalColumnsCount"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
@@ -514,7 +560,7 @@ export 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)"
@@ -522,16 +568,17 @@ export 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-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)"
+            [class.k-highlighted]="item.isHighlighted">
             <ng-container *ngIf="!skipGroupDecoration">
                 <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"
@@ -550,18 +597,42 @@ export 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"
@@ -574,49 +645,75 @@ export 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)">
-                </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)">
@@ -624,33 +721,61 @@ export 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,
@@ -661,7 +786,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">
@@ -669,32 +794,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">
@@ -724,7 +865,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">
@@ -734,7 +875,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)"
@@ -742,16 +883,17 @@ 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-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)"
+            [class.k-highlighted]="item.isHighlighted">
             <ng-container *ngIf="!skipGroupDecoration">
                 <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"
@@ -770,18 +912,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"
@@ -794,49 +960,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)">
-                </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)">
@@ -844,29 +1036,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>