@progress/kendo-angular-grid 24.0.0-develop.19 → 24.0.0-develop.20

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Input, SkipSelf, Directive, isDevMode, QueryList, ContentChildren, ContentChild, Component, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ViewChild, ViewChildren, ChangeDetectionStrategy, Self, NgZone, HostListener, ElementRef, ViewContainerRef, ViewEncapsulation, inject, Injector, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Input, SkipSelf, Directive, isDevMode, QueryList, ContentChildren, ContentChild, Component, forwardRef, Host, Output, HostBinding, HostListener, Pipe, TemplateRef, ViewChild, ViewChildren, ChangeDetectionStrategy, Self, NgZone, ElementRef, ViewContainerRef, ViewEncapsulation, inject, Injector, NgModule } from '@angular/core';
 import { merge, of, Subject, zip as zip$1, from, Subscription, interval, fromEvent, Observable, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, normalizeKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, areObjectsEqual, PrefixTemplateDirective, closest as closest$1, hasObservers, ResizeSensorComponent, isFirefox, firefoxMaxHeight, closestInScope as closestInScope$1, isFocusable as isFocusable$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, PreventableEvent as PreventableEvent$1, ResizeBatchService } from '@progress/kendo-angular-common';
@@ -3647,8 +3647,15 @@ class NavigationService {
     lastCellRowIndex;
     isShiftPressed = false;
     currentSelection = [];
+    zonePositions = {
+        'pinned-top': null,
+        'main': null,
+        'pinned-bottom': null
+    };
+    currentZone = 'main';
     get activeDataRow() {
-        return Math.min(Math.max(0, this.activeRowIndex - this.meta.headerRows), this.meta.maxLogicalRowIndex);
+        const pinnedTopCount = this.meta ? this.meta.pinnedTopRowsCount : 0;
+        return Math.min(Math.max(0, this.activeRowIndex - this.meta.headerRows - pinnedTopCount), this.meta.maxLogicalRowIndex);
     }
     constructor(zone, domEvents, pagerContextService, scrollRequestService, groupsService, detailsService, focusRoot, editService, cd, ctx, resizeService, focusableParent) {
         this.zone = zone;
@@ -3769,6 +3776,64 @@ class NavigationService {
     isCellFocused(cell) {
         return this.mode === 1 /* NavigationMode.Cursor */ && this.isCellFocusable(cell);
     }
+    /**
+     * Returns the navigation zone for a given logical row index.
+     * Rows inside the pinned-top container return `'pinned-top'`,
+     * rows inside the pinned-bottom container return `'pinned-bottom'`,
+     * and all other rows (including header rows) return `'main'`.
+     */
+    getZone(rowIndex) {
+        if (!this.meta) {
+            return 'main';
+        }
+        const headerRows = this.meta.headerRows;
+        const pinnedTopCount = this.meta.pinnedTopRowsCount;
+        const dataRows = this.meta.dataRows;
+        // Pinned-top rows span [headerRows .. headerRows + pinnedTopCount - 1]
+        if (pinnedTopCount > 0 && rowIndex >= headerRows && rowIndex < headerRows + pinnedTopCount) {
+            return 'pinned-top';
+        }
+        // Pinned-bottom rows start at headerRows + pinnedTopCount + dataRows
+        const pinnedBottomStart = headerRows + pinnedTopCount + dataRows;
+        if (this.meta.pinnedBottomRowsCount > 0 && rowIndex >= pinnedBottomStart && rowIndex < pinnedBottomStart + this.meta.pinnedBottomRowsCount) {
+            return 'pinned-bottom';
+        }
+        return 'main';
+    }
+    /**
+     * Returns `true` when the given cell should carry a `tabIndex="0"` attribute as the
+     * preserved Tab stop for an inactive navigation zone.
+     *
+     * When pinned rows are present, each zone (pinned-top, main body, pinned-bottom) independently
+     * remembers its last active cell. This allows the Tab key to cycle between zones naturally
+     * via DOM order, giving each zone its own Tab stop.
+     */
+    isCellZonePreserved(rowIndex, colIndex) {
+        if (!this.alive || !this.meta) {
+            return false;
+        }
+        if (this.meta.pinnedTopRowsCount === 0 && this.meta.pinnedBottomRowsCount === 0) {
+            return false;
+        }
+        if (this.mode === 0 /* NavigationMode.Standby */) {
+            return false;
+        }
+        const cellZone = this.getZone(rowIndex);
+        if (cellZone === this.currentZone) {
+            return false;
+        }
+        if (cellZone === 'pinned-top' && this.meta.pinnedTopRowsCount === 0) {
+            return false;
+        }
+        if (cellZone === 'pinned-bottom' && this.meta.pinnedBottomRowsCount === 0) {
+            return false;
+        }
+        const preserved = this.zonePositions[cellZone];
+        const firstInZone = this.firstRowInZone(cellZone);
+        const preservedRow = preserved ? preserved.rowIndex : firstInZone;
+        const preservedCol = preserved ? preserved.colIndex : 0;
+        return rowIndex === preservedRow && colIndex === preservedCol;
+    }
     navigateTo(el) {
         if (!this.alive || !isDocumentAvailable()) {
             return;
@@ -3836,13 +3901,19 @@ class NavigationService {
         this.viewport = new NavigationViewport(firstItemIndex, lastItemIndex);
         if (this.meta && this.meta.isVirtual && this.activeDataRow > -1) {
             const dataRowIndex = this.activeDataRow;
-            const ahead = firstItemIndex - dataRowIndex;
-            const behind = dataRowIndex - lastItemIndex;
-            if (ahead > 0) {
-                this.cursor.reset(firstItemIndex + this.meta.headerRows);
-            }
-            else if (behind > 0) {
-                this.cursor.reset(lastItemIndex - this.meta.headerRows);
+            // Pinned rows are always visible — skip viewport clamping for them
+            const zone = this.getZone(this.activeRowIndex);
+            const isPinnedRow = zone === 'pinned-top' || zone === 'pinned-bottom';
+            if (!isPinnedRow) {
+                const ahead = firstItemIndex - dataRowIndex;
+                const behind = dataRowIndex - lastItemIndex;
+                const logicalOffset = this.meta.headerRows + this.meta.pinnedTopRowsCount;
+                if (ahead > 0) {
+                    this.cursor.reset(firstItemIndex + logicalOffset);
+                }
+                else if (behind > 0) {
+                    this.cursor.reset(lastItemIndex + logicalOffset);
+                }
             }
         }
     }
@@ -4013,11 +4084,36 @@ class NavigationService {
         const isRowReorderable = this.ctx.grid.rowReorderable;
         switch (code) {
             case Keys.ArrowDown:
-            case Keys.ArrowUp:
+            case Keys.ArrowUp: {
                 if (rowspan > 1) {
                     rowspanOffset = this.calculateRowspanOffset(dir, rowspan);
                     step += rowspanOffset;
                 }
+                const isDown = code === Keys.ArrowDown;
+                const currentZone = this.meta ? this.getZone(this.activeRowIndex) : 'main';
+                const atPinnedBoundary = this.meta?.isVirtual && ((isDown && currentZone === 'pinned-top' && this.activeRowIndex === this.firstRowInZone('main') - 1) ||
+                    (!isDown && currentZone === 'pinned-bottom' && this.activeRowIndex === this.firstRowInZone('pinned-bottom')));
+                if (atPinnedBoundary && !args.shiftKey) {
+                    const targetRow = isDown
+                        ? this.firstRowInZone('main')
+                        : this.firstRowInZone('pinned-bottom') - 1;
+                    const targetModelRow = this.model.findRow(targetRow);
+                    let targetColIndex;
+                    if (!targetModelRow) {
+                        targetColIndex = 0;
+                        this.virtualCell = true;
+                    }
+                    else if (targetModelRow.groupItem) {
+                        targetColIndex = 0;
+                    }
+                    else {
+                        targetColIndex = this.cursor.cell?.colIndex ?? 0;
+                    }
+                    this.cursor.reset(targetRow, targetColIndex);
+                    preventDefault = true;
+                    this.lastCellRowIndex = this.activeRowIndex;
+                    break;
+                }
                 if (args.shiftKey && !(isDragCell && isRowReorderable)) {
                     if (this.ctx.grid.blockArrowSelection) {
                         return;
@@ -4034,6 +4130,7 @@ class NavigationService {
                 }
                 this.lastCellRowIndex = this.activeRowIndex;
                 break;
+            }
             case Keys.ArrowRight:
             case Keys.ArrowLeft:
                 if (args.altKey && !args.shiftKey && !args.ctrlKey && !args.metaKey &&
@@ -4283,10 +4380,36 @@ class NavigationService {
         this.cellKeydown.emit(args);
         return true;
     }
+    firstRowInZone(zone) {
+        if (!this.meta) {
+            return 0;
+        }
+        const headerRows = this.meta.headerRows;
+        const pinnedTopCount = this.meta.pinnedTopRowsCount;
+        const dataRows = this.meta.dataRows;
+        switch (zone) {
+            case 'pinned-top': return headerRows;
+            case 'main': return headerRows + pinnedTopCount;
+            case 'pinned-bottom': return headerRows + pinnedTopCount + dataRows;
+        }
+    }
     onCursorChanges(args) {
+        if (this.meta) {
+            const newZone = this.getZone(args.rowIndex);
+            if (newZone !== this.currentZone) {
+                // Save the position we're leaving as the preserved Tab stop for that zone
+                if (args.prevRowIndex >= 0) {
+                    this.zonePositions[this.currentZone] = { rowIndex: args.prevRowIndex, colIndex: args.prevColIndex };
+                }
+                this.currentZone = newZone;
+            }
+        }
         this.activeRowIndex = args.rowIndex;
         const dataRowIndex = this.activeDataRow;
-        if (this.meta && (this.meta.isVirtual &&
+        // Pinned rows are always visible — skip virtual scroll adjustment
+        const zone = this.meta ? this.getZone(args.rowIndex) : 'main';
+        const isPinnedRow = zone === 'pinned-top' || zone === 'pinned-bottom';
+        if (!isPinnedRow && this.meta && (this.meta.isVirtual &&
             args.rowIndex >= this.meta.headerRows &&
             args.rowIndex <= this.meta.maxLogicalRowIndex - this.meta.footerRow &&
             this.viewport &&
@@ -4294,6 +4417,12 @@ class NavigationService {
             dataRowIndex > -1)) {
             this.scrollRequestService.scrollTo({ row: dataRowIndex });
         }
+        if (!isPinnedRow && this.meta && !this.meta.isVirtual && !this.meta.hasPager) {
+            const prevZone = this.meta ? this.getZone(args.prevRowIndex) : 'main';
+            if (prevZone === 'pinned-top' || prevZone === 'pinned-bottom') {
+                this.scrollRequestService.scrollTo({ row: dataRowIndex });
+            }
+        }
         if (this.meta.virtualColumns && args.colIndex >= this.meta.columns.lockedLeafColumns.length) {
             const cell = this.activeCell;
             const { start, end } = this.model.cellRange(cell);
@@ -5417,6 +5546,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ * When provided as `true`, LogicalCellDirective instances skip all
+ * registration, focus management, and keyboard handling. Used by the
+ * sticky-group overlay container which manages its own focus independently.
+ */
+const SKIP_CELL_NAVIGATION = new InjectionToken('skip-cell-navigation');
+
 let id$3 = 0;
 function nextId$1() {
     return id$3++;
@@ -5433,6 +5570,7 @@ class LogicalCellDirective {
     renderer;
     zone;
     cellContext;
+    skipNavigation;
     logicalColIndex;
     logicalRowIndex;
     logicalSlaveCell = false;
@@ -5446,6 +5584,9 @@ class LogicalCellDirective {
     headerLabelText;
     uid = nextId$1();
     get id() {
+        if (this.skipNavigation) {
+            return undefined;
+        }
         if (!this.logicalSlaveCell && this.columnInfoService.isLocked) {
             return this.idService.cellId(this.logicalRowIndex, this.logicalColIndex);
         }
@@ -5463,7 +5604,7 @@ class LogicalCellDirective {
         return this.logicalColIndex + 1;
     }
     navigationChange;
-    constructor(focusGroup, element, columnInfoService, idService, navigationService, renderer, zone, cellContext) {
+    constructor(focusGroup, element, columnInfoService, idService, navigationService, renderer, zone, cellContext, skipNavigation) {
         this.focusGroup = focusGroup;
         this.element = element;
         this.columnInfoService = columnInfoService;
@@ -5472,15 +5613,24 @@ class LogicalCellDirective {
         this.renderer = renderer;
         this.zone = zone;
         this.cellContext = cellContext;
+        this.skipNavigation = skipNavigation;
+    }
+    onMouseDown() {
+        if (this.skipNavigation) {
+            return;
+        }
+        if (this.logicalSlaveCell && this.navigationService.tableEnabled) {
+            this.navigationService.focusCell(this.logicalRowIndex, this.logicalColIndex);
+        }
     }
     ngOnInit() {
-        if (!this.navigationService.tableEnabled) {
+        if (this.skipNavigation || !this.navigationService.tableEnabled) {
             return;
         }
         this.navigationChange = this.navigationService.changes.subscribe((e) => this.onNavigationChange(e));
     }
     ngDoCheck() {
-        if (!this.navigationService.tableEnabled || this.logicalColIndex === -1) {
+        if (this.skipNavigation || !this.navigationService.tableEnabled || this.logicalColIndex === -1) {
             return;
         }
         if (this.cellContext) {
@@ -5489,7 +5639,7 @@ class LogicalCellDirective {
         this.registerNoChanges();
     }
     ngOnChanges(changes) {
-        if (!this.navigationService.tableEnabled) {
+        if (this.skipNavigation || !this.navigationService.tableEnabled) {
             return;
         }
         const keys = Object.keys(changes);
@@ -5506,6 +5656,9 @@ class LogicalCellDirective {
         this.updateElement();
     }
     ngOnDestroy() {
+        if (this.skipNavigation) {
+            return;
+        }
         if (this.navigationChange) {
             this.navigationChange.unsubscribe();
         }
@@ -5562,13 +5715,14 @@ class LogicalCellDirective {
         }
     }
     isFocusable() {
-        return this.navigationService.isCellFocusable(this);
+        return this.navigationService.isCellFocusable(this) ||
+            this.navigationService.isCellZonePreserved(this.logicalRowIndex, this.logicalColIndex);
     }
     isFocused() {
         return this.navigationService.isCellFocused(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LogicalCellDirective, deps: [{ token: FocusGroup }, { token: i0.ElementRef }, { token: ColumnInfoService }, { token: IdService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: LogicalCellDirective, isStandalone: true, selector: "[kendoGridLogicalCell]", inputs: { logicalColIndex: "logicalColIndex", logicalRowIndex: "logicalRowIndex", logicalSlaveCell: "logicalSlaveCell", colIndex: "colIndex", colSpan: "colSpan", rowSpan: "rowSpan", groupItem: "groupItem", dataRowIndex: "dataRowIndex", dataItem: "dataItem", detailExpandCell: "detailExpandCell", headerLabelText: "headerLabelText" }, host: { properties: { "attr.id": "this.id", "attr.rowspan": "this.cellRowspan", "class.k-table-td-row-span": "this.rowspanClass", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LogicalCellDirective, deps: [{ token: FocusGroup }, { token: i0.ElementRef }, { token: ColumnInfoService }, { token: IdService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: CELL_CONTEXT, optional: true }, { token: SKIP_CELL_NAVIGATION, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: LogicalCellDirective, isStandalone: true, selector: "[kendoGridLogicalCell]", inputs: { logicalColIndex: "logicalColIndex", logicalRowIndex: "logicalRowIndex", logicalSlaveCell: "logicalSlaveCell", colIndex: "colIndex", colSpan: "colSpan", rowSpan: "rowSpan", groupItem: "groupItem", dataRowIndex: "dataRowIndex", dataItem: "dataItem", detailExpandCell: "detailExpandCell", headerLabelText: "headerLabelText" }, host: { listeners: { "mousedown": "onMouseDown()" }, properties: { "attr.id": "this.id", "attr.rowspan": "this.cellRowspan", "class.k-table-td-row-span": "this.rowspanClass", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [{
                 provide: FocusGroup,
                 deps: [FocusRoot],
                 useClass: FocusGroup
@@ -5590,6 +5744,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }, {
                     type: Inject,
                     args: [CELL_CONTEXT]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SKIP_CELL_NAVIGATION]
                 }] }], propDecorators: { logicalColIndex: [{
                 type: Input
             }], logicalRowIndex: [{
@@ -5624,6 +5783,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], ariaColIndex: [{
                 type: HostBinding,
                 args: ['attr.aria-colindex']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown']
             }] } });
 
 let id$2 = 0;
@@ -21655,9 +21817,13 @@ class CellComponent {
     ctx;
     detailsService;
     localization;
+    elementRef;
+    ngZone;
+    renderer;
     rowPinService;
     cellContext;
     inPinContainer;
+    scrollSyncService;
     get commandCellClass() {
         return this.isCommand(this.column);
     }
@@ -21667,6 +21833,13 @@ class CellComponent {
     get dragRowHandleLabel() {
         return isRowReorderColumn(this.column) ? this.ctx.localization.get('dragRowHandleLabel') : undefined;
     }
+    get rowPinLabel() {
+        const isRowPinned = this.isRowPinnedTop || this.isRowPinnedBottom;
+        if (isRowPinColumn(this.column)) {
+            return isRowPinned ? this.ctx.localization.get('rowUnpinLabel') : this.ctx.localization.get('rowPinLabel');
+        }
+        return undefined;
+    }
     pinContextMenu;
     pinContextMenuTarget;
     column;
@@ -21698,6 +21871,7 @@ class CellComponent {
         }
         if (gridPinnable === true || gridPinnable === 'both') {
             this.pinContextMenu.show(this.pinContextMenuTarget.nativeElement);
+            this.subscribeToScrollClose();
         }
         else {
             let menuItem;
@@ -21714,6 +21888,7 @@ class CellComponent {
             }
             else {
                 this.pinContextMenu.show(this.pinContextMenuTarget.nativeElement);
+                this.subscribeToScrollClose();
             }
             const args = {
                 menuItem,
@@ -21858,7 +22033,12 @@ class CellComponent {
         if (!callback) {
             return true;
         }
-        return callback({ dataItem: this.dataItem, index: this.rowIndex });
+        // For pinned container rows, use the stable pinnedIndex (render position within the
+        // container) rather than rowIndex, which fluctuates as the main table virtual-scrolls.
+        const index = this.inPinContainer && this.item?.pinnedIndex !== undefined
+            ? this.item.pinnedIndex
+            : this.rowIndex;
+        return callback({ dataItem: this.dataItem, index });
     }
     isRowSelectable(column) {
         const currentColumn = column || this.column;
@@ -21875,19 +22055,57 @@ class CellComponent {
     _templateContext = {};
     _editTemplateContext = {};
     _rowTemplateContext = {};
-    constructor(editService, idService, ctx, detailsService, localization, rowPinService, cellContext, inPinContainer) {
+    keyDownSub;
+    scrollCloseSub = new Subscription();
+    constructor(editService, idService, ctx, detailsService, localization, elementRef, ngZone, renderer, rowPinService, cellContext, inPinContainer, scrollSyncService) {
         this.editService = editService;
         this.idService = idService;
         this.ctx = ctx;
         this.detailsService = detailsService;
         this.localization = localization;
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
         this.rowPinService = rowPinService;
         this.cellContext = cellContext;
         this.inPinContainer = inPinContainer;
+        this.scrollSyncService = scrollSyncService;
+    }
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.keyDownSub = this.renderer.listen(this.elementRef.nativeElement, 'keydown', this.onHostKeydown.bind(this));
+        });
+    }
+    ngOnDestroy() {
+        if (this.keyDownSub) {
+            this.keyDownSub();
+        }
+        this.scrollCloseSub.unsubscribe();
     }
     ngDoCheck() {
         this.updateCellContext();
     }
+    subscribeToScrollClose() {
+        this.scrollCloseSub.unsubscribe();
+        this.scrollCloseSub = new Subscription();
+        if (this.scrollSyncService) {
+            this.scrollCloseSub.add(this.scrollSyncService.changes.pipe(skip(1)).subscribe(() => this.pinContextMenu?.hide()));
+        }
+        if (this.ctx.grid?.contentScroll) {
+            this.scrollCloseSub.add(this.ctx.grid.contentScroll.subscribe(() => this.pinContextMenu?.hide()));
+        }
+    }
+    onHostKeydown(e) {
+        if (e.code === Keys.Enter || e.code === Keys.NumpadEnter) {
+            if (!isDocumentAvailable() || document.activeElement !== this.elementRef.nativeElement) {
+                return;
+            }
+            if (!this.isRowPinColumn() || !this.isRowPinnable || this.isNew) {
+                return;
+            }
+            this.onPinIconClick();
+        }
+    }
     isCommand(column) {
         return column instanceof CommandColumnComponent;
     }
@@ -21906,8 +22124,8 @@ class CellComponent {
             this.cellContext.inPinContainer = !!this.inPinContainer;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: IdService }, { token: ContextService }, { token: DetailsService }, { token: i1$2.LocalizationService }, { token: RowPinService, optional: true }, { token: CELL_CONTEXT, optional: true }, { token: IS_PIN_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columns: "columns", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", detailTemplate: "detailTemplate", item: "item", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, viewQueries: [{ propertyName: "pinContextMenu", first: true, predicate: ["pinContextMenu"], descendants: true }, { propertyName: "pinContextMenuTarget", first: true, predicate: ["target"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: IdService }, { token: ContextService }, { token: DetailsService }, { token: i1$2.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: RowPinService, optional: true }, { token: CELL_CONTEXT, optional: true }, { token: IS_PIN_CONTAINER, optional: true }, { token: ScrollSyncService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columns: "columns", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", detailTemplate: "detailTemplate", item: "item", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.rowPinLabel" } }, viewQueries: [{ propertyName: "pinContextMenu", first: true, predicate: ["pinContextMenu"], descendants: true }, { propertyName: "pinContextMenuTarget", first: true, predicate: ["target"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         @if (isStackedLayoutMode) {
             <div class="k-grid-stack-row"
                 [ngClass]="stackedRowClass"
@@ -22408,7 +22626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     imports: [NgTemplateOutlet, FocusableDirective, SelectionCheckboxDirective, TemplateContextDirective,
                         IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent, NgClass, NgStyle, ButtonComponent, ContextMenuComponent, EventsOutsideAngularDirective]
                 }]
-        }], ctorParameters: () => [{ type: EditService }, { type: IdService }, { type: ContextService }, { type: DetailsService }, { type: i1$2.LocalizationService }, { type: RowPinService, decorators: [{
+        }], ctorParameters: () => [{ type: EditService }, { type: IdService }, { type: ContextService }, { type: DetailsService }, { type: i1$2.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: RowPinService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -22420,6 +22638,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }, {
                     type: Inject,
                     args: [IS_PIN_CONTAINER]
+                }] }, { type: ScrollSyncService, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { commandCellClass: [{
                 type: HostBinding,
                 args: ['class.k-command-cell']
@@ -22432,6 +22652,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], dragRowHandleLabel: [{
                 type: HostBinding,
                 args: ['attr.aria-label']
+            }], rowPinLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }], pinContextMenu: [{
                 type: ViewChild,
                 args: ['pinContextMenu']
@@ -22522,6 +22745,9 @@ class TableBodyComponent {
     hostClass = true;
     groupHeaderSlaveCellsCount;
     groupHeaderColumns;
+    // Cached from navigationService.metadata so logicalRowIndex
+    // returns a stable value within a single CD check (avoids NG0100).
+    cachedDataRows = 0;
     clickSubscription;
     touchSubscription;
     l10nSubscription;
@@ -22583,7 +22809,8 @@ class TableBodyComponent {
         return this.ctx.localization.get(messageKey);
     }
     isOdd(item) {
-        return item.index % 2 !== 0;
+        const index = this.isPinContainer && item.pinnedIndex !== undefined ? item.pinnedIndex : item.index;
+        return index % 2 !== 0;
     }
     isSelectable(args) {
         const rowSelectable = this.isRowSelectable(args);
@@ -22603,6 +22830,9 @@ class TableBodyComponent {
         return this.virtualColumns ? index : item;
     }
     ngDoCheck() {
+        if (this.pinPosition === 'bottom') {
+            this.cachedDataRows = this.navigationService.metadata?.dataRows ?? 0;
+        }
         if (this.rowsToRender) {
             this.rowsToRender.forEach((item) => {
                 if (item.type === 'data') {
@@ -22644,8 +22874,7 @@ class TableBodyComponent {
             return headerRowCount + rowIndex + 1;
         }
         if (this.pinPosition === 'bottom') {
-            const dataRows = this.navigationService.metadata?.dataRows ?? 0;
-            return headerRowCount + pinnedTopCount + dataRows + rowIndex + 1;
+            return headerRowCount + pinnedTopCount + this.cachedDataRows + rowIndex + 1;
         }
         const skip = this.skip + (this.ctx.scroller?.virtualSkip ?? 0);
         let pos = rowIndex + skip;
@@ -23040,12 +23269,13 @@ class TableBodyComponent {
                     [groupHeaderColumns]="groupHeaderColumns"
                     [rowIndex]="rowIndex + 1"
                     [totalColumnsCount]="totalColumnsCount"
+                    [attr.data-group-index]="$any(item).index"
                 kendoGridLogicalRow
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                     [totalColumns]="totalColumns"
                     [logicalCellsCount]="columns.length"
-                    [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
+                    [logicalSlaveCellsCount]="0">
             </tr>
         }
         @if (item.showDataItem) {
@@ -23390,12 +23620,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     [groupHeaderColumns]="groupHeaderColumns"
                     [rowIndex]="rowIndex + 1"
                     [totalColumnsCount]="totalColumnsCount"
+                    [attr.data-group-index]="$any(item).index"
                 kendoGridLogicalRow
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
                     [totalColumns]="totalColumns"
                     [logicalCellsCount]="columns.length"
-                    [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
+                    [logicalSlaveCellsCount]="0">
             </tr>
         }
         @if (item.showDataItem) {
@@ -24569,8 +24800,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1778145745,
-    version: '24.0.0-develop.19',
+    publishDate: 1778149554,
+    version: '24.0.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -27601,6 +27832,1668 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: RowspanService }, { type: GroupsService }, { type: DetailsService }, { type: ContextService }] });
 
+/**
+ * @hidden
+ * Builds a map of group ranges from the flat data array.
+ * Each group header maps to its footer and child range.
+ */
+function buildGroupRangeMap(flatDataArray) {
+    const ranges = [];
+    const stack = [];
+    for (let i = 0; i < flatDataArray.length; i++) {
+        const item = flatDataArray[i];
+        if (item.type === 'group') {
+            // A new header at level N closes any open groups at level >= N
+            for (let s = stack.length - 1; s >= 0; s--) {
+                if (stack[s].level >= item.level) {
+                    const headerInfo = stack[s];
+                    ranges.push({
+                        headerIndex: headerInfo.headerIndex,
+                        footerIndex: null,
+                        firstChildIndex: headerInfo.headerIndex + 1,
+                        lastChildIndex: i - 1,
+                        level: headerInfo.level
+                    });
+                    stack.splice(s, 1);
+                }
+            }
+            stack.push({ headerIndex: i, level: item.level });
+        }
+        else if (item.type === 'footer') {
+            for (let s = stack.length - 1; s >= 0; s--) {
+                if (stack[s].level === item.level) {
+                    const headerInfo = stack[s];
+                    ranges.push({
+                        headerIndex: headerInfo.headerIndex,
+                        footerIndex: i,
+                        firstChildIndex: headerInfo.headerIndex + 1,
+                        lastChildIndex: i - 1,
+                        level: item.level
+                    });
+                    stack.splice(s, 1);
+                    break;
+                }
+            }
+        }
+    }
+    // Close remaining open groups that extend to the end of the data
+    for (const headerInfo of stack) {
+        ranges.push({
+            headerIndex: headerInfo.headerIndex,
+            footerIndex: null,
+            firstChildIndex: headerInfo.headerIndex + 1,
+            lastChildIndex: flatDataArray.length - 1,
+            level: headerInfo.level
+        });
+    }
+    const map = new Map();
+    for (const range of ranges) {
+        map.set(range.headerIndex, range);
+    }
+    return map;
+}
+/**
+ * @hidden
+ * Selects which group headers should be sticky at the top of the viewport.
+ * A header is sticky when it is scrolled above the viewport but its group
+ * children are still visible below.
+ */
+function computeStickyItems(flatDataArray, groupRanges, firstVisibleIndex, lastVisibleIndex, rawFirstVisibleIndex) {
+    const footerThreshold = rawFirstVisibleIndex ?? firstVisibleIndex;
+    const matchingRanges = [];
+    for (const range of groupRanges.values()) {
+        if (range.headerIndex < firstVisibleIndex) {
+            // The sticky header stays as a candidate until the next group
+            // header pushes it out. This matches the push boundary logic.
+            const groupEnd = range.footerIndex !== null
+                ? range.footerIndex + 1
+                : range.lastChildIndex + 1;
+            if (groupEnd > range.headerIndex && groupEnd >= footerThreshold) {
+                matchingRanges.push(range);
+            }
+        }
+    }
+    // Per level, pick the header with the highest index (closest to viewport)
+    const bestPerLevel = new Map();
+    for (const range of matchingRanges) {
+        const existing = bestPerLevel.get(range.level);
+        if (!existing || range.headerIndex > existing.headerIndex) {
+            bestPerLevel.set(range.level, range);
+        }
+    }
+    // Sort ascending by level: shallowest at top
+    const sortedLevels = Array.from(bestPerLevel.keys()).sort((a, b) => a - b);
+    const result = [];
+    for (const level of sortedLevels) {
+        const range = bestPerLevel.get(level);
+        result.push({ item: flatDataArray[range.headerIndex], flatIndex: range.headerIndex });
+    }
+    return result;
+}
+/**
+ * @hidden
+ * Selects which group footers should be sticky at the bottom of the viewport.
+ * A footer is sticky when it is scrolled below the viewport but its group's
+ * header or first child is still visible above.
+ */
+function computeStickyFooterItems(flatDataArray, groupRanges, firstVisibleIndex, lastVisibleIndex) {
+    const matchingRanges = [];
+    for (const range of groupRanges.values()) {
+        if (range.footerIndex === null) {
+            continue;
+        }
+        const match = range.footerIndex > lastVisibleIndex && range.headerIndex <= lastVisibleIndex;
+        if (match) {
+            matchingRanges.push(range);
+        }
+    }
+    // Per level, pick the footer closest to viewport bottom (lowest footerIndex)
+    const bestPerLevel = new Map();
+    for (const range of matchingRanges) {
+        const existing = bestPerLevel.get(range.level);
+        if (!existing || range.footerIndex < existing.footerIndex) {
+            bestPerLevel.set(range.level, range);
+        }
+    }
+    // Sort descending by level: deepest at top (closest to content), shallowest at bottom
+    const sortedLevels = Array.from(bestPerLevel.keys()).sort((a, b) => b - a);
+    const result = [];
+    for (const level of sortedLevels) {
+        const range = bestPerLevel.get(level);
+        result.push({ item: flatDataArray[range.footerIndex], flatIndex: range.footerIndex });
+    }
+    return result;
+}
+/**
+ * @hidden
+ * Returns true if the displayed groups differ between current and previous arrays.
+ */
+function hasStickyItemsChanged(current, prev) {
+    if (current.length !== prev.length) {
+        return true;
+    }
+    for (let i = 0; i < current.length; i++) {
+        if (current[i].flatIndex !== prev[i].flatIndex) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * @hidden
+ * Computes push offsets for sticky header overlay rows.
+ * When a group's boundary approaches the sticky slot, the header is pushed upward.
+ */
+function computeHeaderPush(indices, getRowHeight, getRowOffset, scrollTop, groupRanges) {
+    const offsets = [];
+    let cumHeight = 0;
+    for (const flatIdx of indices) {
+        const rowH = getRowHeight(flatIdx);
+        let push = 0;
+        const range = groupRanges.get(flatIdx);
+        if (range) {
+            const nextHeaderIndex = range.footerIndex !== null
+                ? range.footerIndex + 1
+                : range.lastChildIndex + 1;
+            const boundaryOffset = getRowOffset(nextHeaderIndex);
+            if (boundaryOffset !== undefined) {
+                const slotBottom = cumHeight + rowH;
+                const boundaryRelative = boundaryOffset - scrollTop;
+                if (boundaryRelative < slotBottom) {
+                    push = boundaryRelative - slotBottom;
+                }
+            }
+        }
+        offsets.push(push);
+        cumHeight += Math.max(rowH + push, 0);
+    }
+    return { totalHeight: cumHeight, offsets };
+}
+/**
+ * @hidden
+ * Computes push offsets for sticky footer overlay rows.
+ * When a group's header approaches the sticky footer slot, the footer is pushed downward.
+ */
+function computeFooterPush(indices, getRowHeight, getRowOffset, scrollTop, viewportHeight, footerRanges) {
+    const offsets = new Array(indices.length).fill(0);
+    let cumHeight = 0;
+    // Footers are rendered bottom-up; iterate in reverse
+    for (let i = indices.length - 1; i >= 0; i--) {
+        const flatIdx = indices[i];
+        const rowH = getRowHeight(flatIdx);
+        let push = 0;
+        const range = footerRanges.get(flatIdx);
+        if (range) {
+            const boundaryOffset = getRowOffset(range.headerIndex);
+            if (boundaryOffset !== undefined) {
+                const boundaryBottom = boundaryOffset + getRowHeight(range.headerIndex);
+                const slotTop = scrollTop + viewportHeight - cumHeight - rowH;
+                if (boundaryBottom > slotTop) {
+                    push = boundaryBottom - slotTop;
+                }
+            }
+        }
+        offsets[i] = push;
+        cumHeight += Math.max(rowH - push, 0);
+    }
+    return { totalHeight: cumHeight, offsets };
+}
+/**
+ * @hidden
+ * Applies push transforms to sticky header overlay rows.
+ * Negative push values slide rows up with clipPath.
+ * Iterates each tbody independently so locked and non-locked tables
+ * both receive the same transforms.
+ */
+function applyHeaderPushTransforms(containerEl, pushOffsets) {
+    const tbodies = containerEl.querySelectorAll('tbody');
+    let maxVisibleHeight = 0;
+    let hasPush = false;
+    for (let t = 0; t < tbodies.length; t++) {
+        const trs = tbodies[t].querySelectorAll(':scope > tr');
+        let totalVisibleHeight = 0;
+        for (let i = 0; i < trs.length && i < pushOffsets.length; i++) {
+            const tr = trs[i];
+            const rowH = tr.offsetHeight || tr.getBoundingClientRect().height;
+            const push = pushOffsets[i];
+            if (push < 0) {
+                hasPush = true;
+                const absPush = -push;
+                const visibleHeight = Math.max(rowH - absPush, 0);
+                totalVisibleHeight += visibleHeight;
+                if (visibleHeight <= 0) {
+                    tr.style.display = 'none';
+                    tr.style.transform = '';
+                    tr.style.clipPath = '';
+                }
+                else {
+                    tr.style.display = '';
+                    tr.style.transform = `translateY(${push}px)`;
+                    tr.style.clipPath = `inset(${absPush}px 0 0 0)`;
+                }
+            }
+            else {
+                totalVisibleHeight += rowH;
+                tr.style.display = '';
+                tr.style.transform = '';
+                tr.style.clipPath = '';
+            }
+        }
+        maxVisibleHeight = Math.max(maxVisibleHeight, totalVisibleHeight);
+    }
+    containerEl.style.height = hasPush ? maxVisibleHeight + 'px' : '';
+}
+/**
+ * @hidden
+ * Applies push transforms to sticky footer overlay rows.
+ * Positive push values clip from the bottom. The footer container is bottom-anchored,
+ * so reducing its height shifts content down. Non-pushed rows are translated up to compensate.
+ * Iterates each tbody independently so locked and non-locked tables
+ * both receive the same transforms.
+ */
+function applyFooterPushTransforms(containerEl, pushOffsets) {
+    const tbodies = containerEl.querySelectorAll('tbody');
+    let maxVisibleHeight = 0;
+    let hasPush = false;
+    for (let t = 0; t < tbodies.length; t++) {
+        const trs = tbodies[t].querySelectorAll(':scope > tr');
+        let totalVisibleHeight = 0;
+        let totalShrink = 0;
+        // First pass: measure heights and compute total shrink
+        const rowHeights = [];
+        for (let i = 0; i < trs.length && i < pushOffsets.length; i++) {
+            const tr = trs[i];
+            const rowH = tr.offsetHeight || tr.getBoundingClientRect().height;
+            rowHeights.push(rowH);
+            const push = pushOffsets[i];
+            if (push > 0) {
+                hasPush = true;
+                const visibleHeight = Math.max(rowH - push, 0);
+                totalVisibleHeight += visibleHeight;
+                totalShrink += rowH - visibleHeight;
+            }
+            else {
+                totalVisibleHeight += rowH;
+            }
+        }
+        // Second pass: apply transforms
+        for (let i = 0; i < trs.length && i < pushOffsets.length; i++) {
+            const tr = trs[i];
+            const push = pushOffsets[i];
+            const rowH = rowHeights[i];
+            if (push > 0) {
+                const visibleHeight = Math.max(rowH - push, 0);
+                if (visibleHeight <= 0) {
+                    tr.style.display = '';
+                    tr.style.transform = '';
+                    tr.style.clipPath = 'inset(0 0 100% 0)';
+                }
+                else {
+                    tr.style.display = '';
+                    tr.style.transform = '';
+                    tr.style.clipPath = `inset(0 0 ${push}px 0)`;
+                }
+            }
+            else {
+                tr.style.display = '';
+                tr.style.transform = hasPush ? `translateY(${-totalShrink}px)` : '';
+                tr.style.clipPath = '';
+            }
+        }
+        maxVisibleHeight = Math.max(maxVisibleHeight, totalVisibleHeight);
+    }
+    containerEl.style.height = hasPush ? maxVisibleHeight + 'px' : '';
+}
+/**
+ * @hidden
+ * Resets all push transform styles on rows within a sticky container.
+ */
+function resetRowTransforms(containerEl) {
+    const trs = containerEl.querySelectorAll('tbody > tr');
+    for (let i = 0; i < trs.length; i++) {
+        const tr = trs[i];
+        tr.style.transform = '';
+        tr.style.clipPath = '';
+        tr.style.display = '';
+    }
+    containerEl.style.height = '';
+}
+
+/**
+ * @hidden
+ * Manages sticky group header and footer state for the Grid.
+ * Computes which groups to pin on each scroll frame and applies DOM transforms
+ * for the push effect. Runs outside Angular zone for performance.
+ */
+class StickyGroupsService {
+    ngZone;
+    headerItems$ = new Subject();
+    footerItems$ = new Subject();
+    scrollToFooter$ = new Subject();
+    scrollToRow$ = new Subject();
+    scrollAndToggle$ = new Subject();
+    stickyHeaderItems = [];
+    stickyFooterItems = [];
+    pendingScrollToFooter = null;
+    /**
+     * When set, after the scroll-to-group completes and the view settles,
+     * the sticky container should focus the real grid row for this group.
+     */
+    pendingFocusGroupIndex = null;
+    focusReady$ = new Subject();
+    /**
+        * When set, the real grid body should scroll until the target row is
+        * rendered, then focus the corresponding cell.
+     */
+    pendingFocusRow = null;
+    /**
+     * When true, the next update() call is skipped. Used when programmatically
+     * scrolling to top so stale DOM measurements don't re-show the overlay.
+     */
+    suppressNextUpdate = false;
+    headerPushOffsets = [];
+    footerPushOffsets = [];
+    groupRangeMap = null;
+    lastFlatDataRef = null;
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+    }
+    ngOnDestroy() {
+        this.headerItems$.complete();
+        this.footerItems$.complete();
+        this.scrollToFooter$.complete();
+        this.scrollToRow$.complete();
+        this.scrollAndToggle$.complete();
+        this.focusReady$.complete();
+    }
+    /**
+     * Requests the list component to scroll to the group header and then
+     * toggle it. Called from sticky overlay click — uses pre-collapse data.
+     */
+    scrollAndToggle(groupIndex) {
+        this.scrollAndToggle$.next(groupIndex);
+    }
+    /**
+     * Requests the grid to scroll so the real footer row at the given flat index
+     * becomes visible at the bottom of the viewport.
+     */
+    requestScrollToFooter(flatIndex) {
+        this.pendingScrollToFooter = flatIndex;
+        this.scrollToFooter$.next(flatIndex);
+    }
+    /**
+     * Consumes (returns and clears) any pending scroll-to-footer request.
+     */
+    consumeScrollToFooter() {
+        const target = this.pendingScrollToFooter;
+        this.pendingScrollToFooter = null;
+        return target;
+    }
+    /**
+     * Requests the real grid body to render the row at the given flat index,
+     * then focus the corresponding cell.
+     */
+    requestScrollToRow(flatIndex, colIndex) {
+        this.pendingFocusRow = { flatIndex, colIndex };
+        this.scrollToRow$.next();
+    }
+    /**
+     * Consumes and clears the pending scroll-to-row request.
+     */
+    consumeScrollToRow() {
+        const target = this.pendingFocusRow;
+        this.pendingFocusRow = null;
+        return target;
+    }
+    /**
+     * Clears cached group range map so it is rebuilt on next update.
+     */
+    invalidateRangeMap() {
+        this.groupRangeMap = null;
+        this.lastFlatDataRef = null;
+    }
+    /**
+     * Main update cycle. Called on every scroll event, outside Angular zone.
+     * Computes which headers/footers should be sticky, applies push transforms,
+     * and emits changes only when the set of sticky items changes.
+     */
+    update(params) {
+        const { container, tbody, flatData, stickyHeaderEl, stickyFooterEl, enableHeaders, enableFooters, rowHeight, skipOffset, rowHeightService } = params;
+        if (!enableHeaders && !enableFooters) {
+            return;
+        }
+        if (!container || !tbody) {
+            return;
+        }
+        if (this.suppressNextUpdate) {
+            this.suppressNextUpdate = false;
+            return;
+        }
+        // Rebuild range map if flat data reference changed
+        if (flatData !== this.lastFlatDataRef) {
+            this.groupRangeMap = buildGroupRangeMap(flatData);
+            this.lastFlatDataRef = flatData;
+        }
+        const groupRanges = this.groupRangeMap;
+        if (!groupRanges || groupRanges.size === 0) {
+            this.clearAll(stickyHeaderEl, stickyFooterEl, container);
+            return;
+        }
+        const footerRanges = new Map();
+        if (enableFooters) {
+            for (const range of groupRanges.values()) {
+                if (range.footerIndex !== null) {
+                    footerRanges.set(range.footerIndex, range);
+                }
+            }
+        }
+        const scrollTop = container.scrollTop;
+        const viewportHeight = container.clientHeight;
+        const rows = tbody.children;
+        if (rows.length === 0) {
+            this.clearAll(stickyHeaderEl, stickyFooterEl, container);
+            return;
+        }
+        const defaultRowHeight = rowHeight || 36;
+        const skip = skipOffset || 0;
+        const rhs = rowHeightService;
+        // Measure DOM row positions
+        const containerRect = container.getBoundingClientRect();
+        const tbodyTop = tbody.getBoundingClientRect().top - containerRect.top + scrollTop;
+        const rowCount = rows.length;
+        const rowTops = new Array(rowCount);
+        const rowHeightsArr = new Array(rowCount);
+        for (let i = 0; i < rowCount; i++) {
+            const row = rows[i];
+            rowTops[i] = tbodyTop + row.offsetTop;
+            rowHeightsArr[i] = row.offsetHeight;
+        }
+        const getRowHeight = (flatIndex) => {
+            const local = flatIndex - skip;
+            if (local >= 0 && local < rowCount) {
+                return rowHeightsArr[local];
+            }
+            // Virtual mode fallback: use RowHeightService for off-screen rows
+            if (rhs && flatIndex >= 0 && flatIndex < flatData.length) {
+                return rhs.height(flatIndex);
+            }
+            return defaultRowHeight;
+        };
+        const getRowOffset = (flatIndex) => {
+            const local = flatIndex - skip;
+            if (local >= 0 && local < rowCount) {
+                return rowTops[local];
+            }
+            // Virtual mode fallback: use RowHeightService for off-screen rows
+            if (rhs && flatIndex >= 0 && flatIndex < flatData.length) {
+                return rhs.offset(flatIndex);
+            }
+            return undefined;
+        };
+        // Binary search: first local index where rowTops[i] >= target
+        const bsFirstGte = (target) => {
+            let lo = 0, hi = rowCount;
+            while (lo < hi) {
+                const mid = (lo + hi) >> 1;
+                if (rowTops[mid] < target) {
+                    lo = mid + 1;
+                }
+                else {
+                    hi = mid;
+                }
+            }
+            return lo;
+        };
+        const findFirstVisible = (effectiveTop) => {
+            const local = bsFirstGte(effectiveTop);
+            return local < rowCount ? skip + local : skip;
+        };
+        const findLastVisible = (effectiveBottom) => {
+            let lo = 0, hi = rowCount - 1;
+            while (lo <= hi) {
+                const mid = (lo + hi) >> 1;
+                if (rowTops[mid] + rowHeightsArr[mid] <= effectiveBottom) {
+                    lo = mid + 1;
+                }
+                else {
+                    hi = mid - 1;
+                }
+            }
+            // When all DOM rows fit inside the viewport, off-screen rows
+            // beyond the rendered window may also be "visible". Use RHS
+            // to compute the correct last visible index.
+            if (lo === rowCount && rhs && rowCount > 0) {
+                return Math.min(rhs.index(effectiveBottom), flatData.length - 1);
+            }
+            return hi >= 0 ? skip + hi : flatData.length - 1;
+        };
+        const rawFirstVisibleIndex = Math.min(findFirstVisible(scrollTop), flatData.length - 1);
+        let firstVisibleFlatIndex = rawFirstVisibleIndex;
+        // --- Sticky Headers ---
+        if (enableHeaders && stickyHeaderEl) {
+            let stickyHeaderHeight = 0;
+            let headerPushOffsets = [];
+            let stickyHeaders = [];
+            // Convergence loop: recalculate until both set and height stabilise
+            const seenFirstVisible = new Set();
+            while (true) {
+                firstVisibleFlatIndex = Math.min(findFirstVisible(scrollTop + Math.max(stickyHeaderHeight, 0)), flatData.length - 1);
+                const isHeaderCycle = seenFirstVisible.has(firstVisibleFlatIndex);
+                seenFirstVisible.add(firstVisibleFlatIndex);
+                const lastVisibleFlatIndex = Math.min(findLastVisible(scrollTop + viewportHeight), flatData.length - 1);
+                const result = computeStickyItems(flatData, groupRanges, firstVisibleFlatIndex, lastVisibleFlatIndex, rawFirstVisibleIndex);
+                const headerPush = computeHeaderPush(result.map(s => s.flatIndex), getRowHeight, getRowOffset, scrollTop, groupRanges);
+                const headerConverged = !hasStickyItemsChanged(result, stickyHeaders) &&
+                    Math.abs(headerPush.totalHeight - stickyHeaderHeight) < 1;
+                stickyHeaders = result;
+                stickyHeaderHeight = headerPush.totalHeight;
+                headerPushOffsets = headerPush.offsets;
+                if (headerConverged || isHeaderCycle) {
+                    break;
+                }
+            }
+            const shouldShow = stickyHeaders.length > 0;
+            const hasChanged = hasStickyItemsChanged(stickyHeaders, this.stickyHeaderItems);
+            if (!shouldShow) {
+                stickyHeaderEl.style.display = 'none';
+                resetRowTransforms(stickyHeaderEl);
+            }
+            else if (!hasChanged) {
+                stickyHeaderEl.style.display = '';
+                if (this.headerPushOffsets.length > 0) {
+                    // A re-render is pending — update stored offsets so
+                    // ngAfterViewChecked applies fresh values to the new DOM
+                    // instead of stale ones from the previous hasChanged call.
+                    this.headerPushOffsets = headerPushOffsets;
+                }
+                else {
+                    applyHeaderPushTransforms(stickyHeaderEl, headerPushOffsets);
+                }
+            }
+            else {
+                resetRowTransforms(stickyHeaderEl);
+                this.headerPushOffsets = headerPushOffsets;
+            }
+            if (hasChanged) {
+                this.stickyHeaderItems = stickyHeaders;
+                // Emit inside zone so Angular re-renders the overlay
+                this.ngZone.run(() => this.headerItems$.next(stickyHeaders));
+            }
+        }
+        // --- Sticky Footers ---
+        if (enableFooters && stickyFooterEl) {
+            let stickyFooterHeight = 0;
+            let footerPushOffsets = [];
+            let stickyFooters = [];
+            const seenLastVisible = new Set();
+            while (true) {
+                const effectiveLastVisible = Math.min(findLastVisible(scrollTop + viewportHeight - stickyFooterHeight), flatData.length - 1);
+                const isFooterCycle = seenLastVisible.has(effectiveLastVisible);
+                seenLastVisible.add(effectiveLastVisible);
+                const footerResult = computeStickyFooterItems(flatData, groupRanges, firstVisibleFlatIndex, effectiveLastVisible);
+                const footerPush = computeFooterPush(footerResult.map(s => s.flatIndex), getRowHeight, getRowOffset, scrollTop, viewportHeight, footerRanges);
+                const footerConverged = !hasStickyItemsChanged(footerResult, stickyFooters) &&
+                    Math.abs(footerPush.totalHeight - stickyFooterHeight) < 1;
+                stickyFooters = footerResult;
+                stickyFooterHeight = footerPush.totalHeight;
+                footerPushOffsets = footerPush.offsets;
+                if (footerConverged || isFooterCycle) {
+                    break;
+                }
+            }
+            const shouldShow = stickyFooters.length > 0;
+            const hasChanged = hasStickyItemsChanged(stickyFooters, this.stickyFooterItems);
+            if (!shouldShow) {
+                stickyFooterEl.style.display = 'none';
+                stickyFooterEl.style.marginBlockEnd = '';
+                resetRowTransforms(stickyFooterEl);
+            }
+            else if (!hasChanged) {
+                stickyFooterEl.style.display = '';
+                if (this.footerPushOffsets.length > 0) {
+                    // A re-render is pending — update stored offsets so
+                    // ngAfterViewChecked applies fresh values to the new DOM.
+                    this.footerPushOffsets = footerPushOffsets;
+                }
+                else {
+                    applyFooterPushTransforms(stickyFooterEl, footerPushOffsets);
+                }
+            }
+            else {
+                resetRowTransforms(stickyFooterEl);
+                this.footerPushOffsets = footerPushOffsets;
+            }
+            if (hasChanged) {
+                this.stickyFooterItems = stickyFooters;
+                this.ngZone.run(() => this.footerItems$.next(stickyFooters));
+            }
+            // Push footer above horizontal scrollbar when present
+            this.adjustStickyFooterForScrollbar(container, stickyFooterEl);
+        }
+        // Update scroll-padding on the container so scrollIntoView accounts for overlays
+        const headerH = stickyHeaderEl?.offsetHeight || 0;
+        const footerH = stickyFooterEl?.offsetHeight || 0;
+        container.style.scrollPaddingTop = headerH > 0 ? headerH + 'px' : '';
+        container.style.scrollPaddingBottom = footerH > 0 ? footerH + 'px' : '';
+    }
+    /**
+     * Applies pending push transforms after Angular re-renders overlay content.
+     * Called from the overlay component's AfterViewChecked hook.
+     */
+    applyPendingHeaderTransforms(containerEl) {
+        if (this.headerPushOffsets.length > 0) {
+            applyHeaderPushTransforms(containerEl, this.headerPushOffsets);
+            this.headerPushOffsets = [];
+        }
+    }
+    applyPendingFooterTransforms(containerEl) {
+        if (this.footerPushOffsets.length > 0) {
+            applyFooterPushTransforms(containerEl, this.footerPushOffsets);
+            this.footerPushOffsets = [];
+        }
+    }
+    /**
+     * Clears all sticky state and resets overlays.
+     */
+    clear() {
+        if (this.stickyHeaderItems.length > 0) {
+            this.stickyHeaderItems = [];
+            this.ngZone.run(() => this.headerItems$.next([]));
+        }
+        if (this.stickyFooterItems.length > 0) {
+            this.stickyFooterItems = [];
+            this.ngZone.run(() => this.footerItems$.next([]));
+        }
+        this.invalidateRangeMap();
+    }
+    /**
+     * Adjusts the container scrollTop so the focused row is not hidden
+     * behind the sticky header or footer overlays.
+     * Intended to be called only from the keyboard navigation path,
+     * outside Angular zone.
+     */
+    adjustScrollForFocusedCell(containerEl, stickyHeaderEl, stickyFooterEl) {
+        if (!containerEl) {
+            return;
+        }
+        // Use document.activeElement so focus in the locked container is also found
+        const focused = (typeof document !== 'undefined' ? document.activeElement : null);
+        if (!focused) {
+            return;
+        }
+        const focusedRow = focused.closest('tr');
+        if (!focusedRow) {
+            return;
+        }
+        const containerRect = containerEl.getBoundingClientRect();
+        const rowRect = focusedRow.getBoundingClientRect();
+        if (stickyHeaderEl && stickyHeaderEl.offsetHeight > 0 && stickyHeaderEl.style.display !== 'none') {
+            const headerBottom = containerRect.top + stickyHeaderEl.offsetHeight;
+            if (rowRect.top < headerBottom) {
+                containerEl.scrollTop -= (headerBottom - rowRect.top);
+                return;
+            }
+        }
+        if (stickyFooterEl && stickyFooterEl.offsetHeight > 0 && stickyFooterEl.style.display !== 'none') {
+            const footerTop = containerRect.bottom - stickyFooterEl.offsetHeight;
+            if (rowRect.bottom > footerTop) {
+                containerEl.scrollTop += (rowRect.bottom - footerTop);
+            }
+        }
+    }
+    /**
+     * Sets marginBlockEnd on the sticky footer overlay when the container
+     * has a horizontal scrollbar, so the footer does not overlap the scrollbar.
+     */
+    adjustStickyFooterForScrollbar(container, stickyFooterEl) {
+        if (!stickyFooterEl) {
+            return;
+        }
+        const hasHorizontalScrollbar = container.scrollWidth > container.clientWidth;
+        stickyFooterEl.style.marginBlockEnd = hasHorizontalScrollbar
+            ? 'var(--kendo-scrollbar-width, 0px)'
+            : '';
+    }
+    clearAll(headerEl, footerEl, container) {
+        if (headerEl) {
+            headerEl.style.display = 'none';
+            resetRowTransforms(headerEl);
+        }
+        if (footerEl) {
+            footerEl.style.display = 'none';
+            footerEl.style.marginBlockEnd = '';
+            resetRowTransforms(footerEl);
+        }
+        container.style.scrollPaddingTop = '';
+        container.style.scrollPaddingBottom = '';
+        if (this.stickyHeaderItems.length > 0) {
+            this.stickyHeaderItems = [];
+            this.ngZone.run(() => this.headerItems$.next([]));
+        }
+        if (this.stickyFooterItems.length > 0) {
+            this.stickyFooterItems = [];
+            this.ngZone.run(() => this.footerItems$.next([]));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StickyGroupsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StickyGroupsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StickyGroupsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+/**
+ * @hidden
+ * Renders the sticky group header or footer overlay container.
+ * When locked columns are present, renders two side-by-side tables
+ * mirroring the grid's locked / non-locked split.
+ */
+class StickyGroupContainerComponent {
+    stickyGroupsService;
+    cdr;
+    ctx;
+    el;
+    navigationService;
+    groupsService;
+    zone;
+    position = 'top';
+    set columns(value) {
+        this._columns = value;
+        this.footerColumns = this.expandSpanColumns(value);
+    }
+    get columns() { return this._columns; }
+    set lockedColumns(value) {
+        this._lockedColumns = value;
+        this.lockedFooterColumns = this.expandSpanColumns(value);
+    }
+    get lockedColumns() { return this._lockedColumns; }
+    groups = [];
+    detailTemplate;
+    totalColumnsCount = 0;
+    hasGroupHeaderColumn = false;
+    groupHeaderColumns = [];
+    tableWidth;
+    lockedWidth;
+    isLocked = false;
+    hostClass = true;
+    get isBottom() {
+        return this.position === 'bottom';
+    }
+    hostRole = 'none';
+    items = [];
+    footerColumns = [];
+    lockedFooterColumns = [];
+    wrapWidth;
+    _columns = [];
+    _lockedColumns = [];
+    subscription;
+    constructor(stickyGroupsService, cdr, ctx, el, navigationService, groupsService, zone) {
+        this.stickyGroupsService = stickyGroupsService;
+        this.cdr = cdr;
+        this.ctx = ctx;
+        this.el = el;
+        this.navigationService = navigationService;
+        this.groupsService = groupsService;
+        this.zone = zone;
+    }
+    captureClickHandler = null;
+    ngOnInit() {
+        const source$ = this.position === 'top'
+            ? this.stickyGroupsService.headerItems$
+            : this.stickyGroupsService.footerItems$;
+        this.subscription = source$.subscribe(items => {
+            this.items = items;
+            this.el.nativeElement.style.display = items.length === 0 ? 'none' : '';
+            this.cdr.markForCheck();
+        });
+        // Capture-phase listener intercepts <a> clicks before GroupHeaderComponent's
+        // toggleGroup handler fires, so we control the scroll-then-toggle sequence.
+        if (this.position === 'top') {
+            this.captureClickHandler = (e) => this.onCapturedClick(e);
+            this.el.nativeElement.addEventListener('click', this.captureClickHandler, true);
+        }
+        // Subscribe to deferred focus events (used after scroll-to-group in virtual mode)
+        if (this.position === 'top') {
+            this.subscription.add(this.stickyGroupsService.focusReady$.subscribe(({ flatIndex }) => {
+                this.clearStickyFocus();
+                this.focusRealGridRow(flatIndex);
+            }));
+        }
+    }
+    ngAfterViewChecked() {
+        const hostEl = this.el?.nativeElement;
+        if (!hostEl) {
+            return;
+        }
+        // Sync locked/non-locked row heights BEFORE applying transforms,
+        // so transform calculations use consistent row measurements.
+        if (this.isLocked && this.items.length > 0) {
+            this.wrapWidth = Math.max(hostEl.clientWidth - this.lockedWidth, 0);
+            this.syncLockedRowHeights();
+        }
+        if (this.position === 'top') {
+            this.stickyGroupsService.applyPendingHeaderTransforms(hostEl);
+        }
+        else {
+            this.stickyGroupsService.applyPendingFooterTransforms(hostEl);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        if (this.captureClickHandler) {
+            this.el.nativeElement.removeEventListener('click', this.captureClickHandler, true);
+            this.captureClickHandler = null;
+        }
+    }
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
+    }
+    get gridSize() {
+        return this.ctx.grid?.size;
+    }
+    get nativeElement() {
+        return this.el?.nativeElement;
+    }
+    /**
+     * Handles clicks on the sticky container.
+     * For headers: toggle (anchor) clicks scroll grid to real header position;
+     * non-toggle clicks focus the clicked row.
+     * For footers: focus the clicked cell.
+     */
+    onContainerClick(event) {
+        const target = event.target;
+        const row = target.closest('tr');
+        if (!row) {
+            return;
+        }
+        if (this.position === 'bottom') {
+            const td = target.closest('td[data-col-index]');
+            if (td) {
+                this.focusFooterCell(td);
+            }
+            return;
+        }
+        // Anchor clicks are handled by onStickyHeaderRowClick (template handler)
+        // which stops propagation. If we still get here, just focus the row.
+        if (row) {
+            this.focusStickyCell(row);
+        }
+    }
+    // Prevent focusin from bubbling to the grid wrapper where NavigationService
+    // would misinterpret the sticky row's aria-rowindex as a real grid row.
+    onContainerFocusIn(event) {
+        event.stopPropagation();
+    }
+    onContainerFocusOut(event) {
+        const related = event.relatedTarget;
+        if (!related || !this.el.nativeElement.contains(related)) {
+            this.clearStickyFocus();
+        }
+    }
+    onContainerKeydown(event) {
+        const code = normalizeKeys(event);
+        if (this.position === 'bottom') {
+            this.handleFooterKeydown(event, code);
+            return;
+        }
+        if (code !== Keys.ArrowUp && code !== Keys.ArrowDown && code !== Keys.Enter) {
+            return;
+        }
+        const focusedIndex = this.getFocusedItemIndex();
+        if (focusedIndex < 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (code === Keys.Enter) {
+            this.handleEnterKey(focusedIndex);
+        }
+        else if (code === Keys.ArrowUp) {
+            this.handleArrowUp(focusedIndex);
+        }
+        else if (code === Keys.ArrowDown) {
+            this.handleArrowDown(focusedIndex);
+        }
+    }
+    expandSpanColumns(cols) {
+        return Array.from(cols).reduce((result, col) => {
+            const newCols = (col instanceof SpanColumnComponent) ? Array.from(col.children) : [col];
+            return [...result, ...newCols];
+        }, []);
+    }
+    getFocusedItemIndex() {
+        if (!isDocumentAvailable()) {
+            return -1;
+        }
+        const active = document.activeElement;
+        if (!active || !this.el.nativeElement.contains(active)) {
+            return -1;
+        }
+        const row = active.tagName === 'TR' ? active : active.closest('tr');
+        if (!row) {
+            return -1;
+        }
+        const groupIndex = row.getAttribute('data-group-index');
+        return this.items.findIndex(item => item.item.index === groupIndex);
+    }
+    handleArrowUp(currentIndex) {
+        if (currentIndex > 0) {
+            this.focusStickyRowByIndex(currentIndex - 1);
+        }
+        else {
+            // Exit the sticky overlay upward.
+            // The overlay is visible because the real group header scrolled out of view,
+            // so focusing the row above it (flatIndex - 1) would land on a non-visible row.
+            // Navigate to pinned-top rows or the grid header instead.
+            const meta = this.navigationService.metadata;
+            if (meta && meta.pinnedTopRowsCount > 0) {
+                this.clearStickyFocus();
+                // meta.headerRows includes the +1 offset already accounted for in
+                // logicalRowIndex, so the last pinned-top row is at:
+                //   (meta.headerRows - 1) + pinnedTopRowsCount
+                const lastPinnedTopRow = meta.headerRows - 1 + meta.pinnedTopRowsCount;
+                const firstCol = meta.hasDetailTemplate && !meta.isStacked ? 1 : 0;
+                this.navigationService.focusCell(lastPinnedTopRow, firstCol);
+            }
+            else {
+                // No pinned-top rows — go to grid header.
+                // Explicitly hide the sticky container and scroll to top before focusing,
+                // so the header area is fully visible.
+                this.clearStickyFocus();
+                this.items = [];
+                this.el.nativeElement.style.display = 'none';
+                this.cdr.markForCheck();
+                if (meta) {
+                    const gridContainer = this.el.nativeElement.closest('.k-grid-container');
+                    const scrollContainer = gridContainer
+                        ?.querySelector('.k-grid-content.k-virtual-content');
+                    if (scrollContainer) {
+                        this.stickyGroupsService.suppressNextUpdate = true;
+                        scrollContainer.scrollTop = 0;
+                    }
+                    this.zone.runOutsideAngular(() => {
+                        setTimeout(() => {
+                            this.navigationService.focusCell(meta.headerRows - 1, 0);
+                        });
+                    });
+                }
+            }
+        }
+    }
+    handleArrowDown(currentIndex) {
+        if (currentIndex < this.items.length - 1) {
+            this.focusStickyRowByIndex(currentIndex + 1);
+        }
+        else {
+            // Exit container downward: focus first child of the group
+            const flatIndex = this.items[currentIndex].flatIndex;
+            this.focusRealGridRow(flatIndex + 1);
+        }
+    }
+    handleEnterKey(currentIndex) {
+        const stickyItem = this.items[currentIndex];
+        const groupLevel = stickyItem.item.level;
+        this.scrollToGroupAndToggle(stickyItem, groupLevel);
+    }
+    /**
+     * Capture-phase click handler registered on the host element.
+     * Intercepts <a> clicks inside sticky header rows before
+     * GroupHeaderComponent's toggleGroup fires.
+     */
+    onCapturedClick(event) {
+        const target = event.target;
+        const anchor = target.closest('a');
+        if (!anchor) {
+            return;
+        }
+        const row = anchor.closest('tr.k-grouping-row');
+        if (!row) {
+            return;
+        }
+        const groupIndex = row.getAttribute('data-group-index');
+        if (!groupIndex) {
+            return;
+        }
+        // Stop the event so GroupHeaderComponent.toggleGroup never fires
+        event.stopPropagation();
+        event.preventDefault();
+        const stickyItem = this.items.find(item => item.item.index === groupIndex);
+        if (stickyItem) {
+            const groupLevel = stickyItem.item.level;
+            this.scrollToGroupAndToggle(stickyItem, groupLevel);
+        }
+    }
+    /**
+     * Triggers the scroll-to-root-and-toggle flow via the service.
+     * The list component handles actual scrolling, toggling, and focus.
+     */
+    scrollToGroupAndToggle(stickyItem, groupLevel) {
+        const groupItem = stickyItem.item;
+        const groupIndex = groupItem.index;
+        this.stickyGroupsService.pendingFocusGroupIndex = groupIndex;
+        this.stickyGroupsService.scrollAndToggle(groupIndex);
+    }
+    focusStickyRowByIndex(itemIndex) {
+        const hostEl = this.el.nativeElement;
+        if (!hostEl) {
+            return;
+        }
+        const groupIndex = this.items[itemIndex].item.index;
+        const targetRow = hostEl.querySelector(`tr[data-group-index="${groupIndex}"]`);
+        if (targetRow) {
+            this.focusStickyCell(targetRow);
+        }
+    }
+    focusStickyCell(row) {
+        const hostEl = this.el.nativeElement;
+        const groupIndex = row.getAttribute('data-group-index');
+        // Clear grid-level focus so there's no double highlight
+        this.clearGridFocus();
+        this.clearStickyFocus();
+        // In locked mode, always focus the TD in the locked table (contains the toggle)
+        // and visually highlight both locked and non-locked TDs.
+        if (this.isLocked && groupIndex) {
+            const lockedRow = hostEl.querySelector(`.k-grid-content-locked tr[data-group-index="${groupIndex}"]`);
+            const nonLockedRow = hostEl.querySelector(`:scope > .k-grid-header-wrap tr[data-group-index="${groupIndex}"], :scope > .k-grid-footer-wrap tr[data-group-index="${groupIndex}"]`);
+            const lockedTd = lockedRow?.querySelector('td[kendogridlogicalcell]');
+            const nonLockedTd = nonLockedRow?.querySelector('td');
+            if (lockedTd) {
+                if (!lockedTd.hasAttribute('tabindex')) {
+                    lockedTd.setAttribute('tabindex', '-1');
+                }
+                lockedTd.classList.add('k-focus');
+                lockedTd.focus();
+            }
+            if (nonLockedTd) {
+                nonLockedTd.classList.add('k-focus');
+            }
+        }
+        else {
+            const td = row.querySelector('td[kendogridlogicalcell]');
+            if (td) {
+                if (!td.hasAttribute('tabindex')) {
+                    td.setAttribute('tabindex', '-1');
+                }
+                td.classList.add('k-focus');
+                td.focus();
+            }
+        }
+    }
+    clearStickyFocus() {
+        const hostEl = this.el.nativeElement;
+        hostEl.querySelectorAll('.k-focus').forEach((el) => el.classList.remove('k-focus'));
+    }
+    /**
+     * Clears k-focus from all grid content cells (outside any sticky container)
+     * so that the regular grid and the sticky overlay don't show focus simultaneously.
+     */
+    clearGridFocus() {
+        const ariaRoot = this.el.nativeElement.closest('.k-grid-aria-root');
+        if (!ariaRoot) {
+            return;
+        }
+        ariaRoot.querySelectorAll('.k-focus').forEach((el) => {
+            if (!el.closest('.k-grid-sticky-container')) {
+                el.classList.remove('k-focus');
+            }
+        });
+    }
+    focusRealGridRow(flatIndex, colIndex = 0) {
+        this.stickyGroupsService.requestScrollToRow(flatIndex, colIndex);
+    }
+    handleFooterKeydown(event, code) {
+        if (code !== Keys.ArrowUp && code !== Keys.ArrowDown &&
+            code !== Keys.ArrowLeft && code !== Keys.ArrowRight) {
+            return;
+        }
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const active = document.activeElement;
+        if (!active || !this.el.nativeElement.contains(active)) {
+            return;
+        }
+        const td = active.closest('td[data-col-index]');
+        if (!td) {
+            return;
+        }
+        const row = td.closest('tr[data-sticky-row]');
+        if (!row) {
+            return;
+        }
+        const rowIdx = parseInt(row.getAttribute('data-sticky-row'), 10);
+        const colIdx = parseInt(td.getAttribute('data-col-index'), 10);
+        event.preventDefault();
+        event.stopPropagation();
+        if (code === Keys.ArrowLeft) {
+            this.focusFooterCellAt(rowIdx, colIdx, -1);
+        }
+        else if (code === Keys.ArrowRight) {
+            this.focusFooterCellAt(rowIdx, colIdx, 1);
+        }
+        else if (code === Keys.ArrowUp) {
+            if (rowIdx > 0) {
+                this.focusFooterCellInRow(rowIdx - 1, colIdx);
+            }
+            else {
+                // Exit upward: focus the last child row before the topmost footer
+                const topFooter = this.items[0];
+                const targetFlatIndex = topFooter.flatIndex - 1;
+                if (targetFlatIndex >= 0) {
+                    this.clearStickyFocus();
+                    this.focusRealGridRow(targetFlatIndex, colIdx);
+                }
+            }
+        }
+        else if (code === Keys.ArrowDown) {
+            if (rowIdx < this.items.length - 1) {
+                this.focusFooterCellInRow(rowIdx + 1, colIdx);
+            }
+            else {
+                // Exit downward from the last sticky footer row.
+                // If pinned-bottom rows are present, navigate to the first pinned-bottom row.
+                const meta = this.navigationService.metadata;
+                if (meta && meta.pinnedBottomRowsCount > 0) {
+                    // logicalRowIndex for the first pinned-bottom row (rowIndex=0):
+                    //   (meta.headerRows - 1) + pinnedTopCount + dataRows + 1
+                    //   = meta.headerRows + pinnedTopCount + dataRows
+                    const firstPinnedBottomRow = meta.headerRows + meta.pinnedTopRowsCount + meta.dataRows;
+                    this.clearStickyFocus();
+                    this.navigationService.focusCell(firstPinnedBottomRow, colIdx);
+                }
+                else {
+                    // No pinned-bottom rows — go to next data row or grid footer
+                    const bottomFooter = this.items[this.items.length - 1];
+                    const targetFlatIndex = bottomFooter.flatIndex + 1;
+                    if (meta && targetFlatIndex < meta.dataRows) {
+                        this.clearStickyFocus();
+                        this.focusRealGridRow(targetFlatIndex, colIdx);
+                    }
+                    else if (meta && meta.footerRow > 0) {
+                        // Last footer in the data — go to grid footer if present
+                        this.clearStickyFocus();
+                        this.navigationService.focusCell(meta.maxLogicalRowIndex, colIdx);
+                    }
+                }
+            }
+        }
+    }
+    focusFooterCell(td) {
+        // Clear grid-level focus so there's no double highlight
+        this.clearGridFocus();
+        this.clearStickyFocus();
+        if (!td.hasAttribute('tabindex')) {
+            td.setAttribute('tabindex', '-1');
+        }
+        td.classList.add('k-focus');
+        td.focus();
+    }
+    /**
+     * Moves focus to the adjacent cell in the given direction (-1 = left, +1 = right).
+     * Crosses the locked/non-locked boundary seamlessly.
+     */
+    focusFooterCellAt(rowIdx, currentColIdx, direction) {
+        const allCells = this.getFooterRowCells(rowIdx);
+        const currentPos = allCells.findIndex(c => parseInt(c.getAttribute('data-col-index'), 10) === currentColIdx);
+        const nextPos = currentPos + direction;
+        if (nextPos >= 0 && nextPos < allCells.length) {
+            this.focusFooterCell(allCells[nextPos]);
+        }
+    }
+    /**
+     * Focuses the cell with the given column index in a different row.
+     */
+    focusFooterCellInRow(rowIdx, colIdx) {
+        const allCells = this.getFooterRowCells(rowIdx);
+        const target = allCells.find(c => parseInt(c.getAttribute('data-col-index'), 10) === colIdx)
+            || allCells[allCells.length - 1];
+        if (target) {
+            this.focusFooterCell(target);
+        }
+    }
+    /**
+     * Returns all data cells (with data-col-index) for a footer row,
+     * combining locked and non-locked tables, sorted by column index.
+     */
+    getFooterRowCells(rowIdx) {
+        const hostEl = this.el.nativeElement;
+        const cells = Array.from(hostEl.querySelectorAll(`tr[data-sticky-row="${rowIdx}"] td[data-col-index]`));
+        cells.sort((a, b) => parseInt(a.getAttribute('data-col-index'), 10) -
+            parseInt(b.getAttribute('data-col-index'), 10));
+        return cells;
+    }
+    syncLockedRowHeights() {
+        const hostEl = this.el?.nativeElement;
+        if (!hostEl) {
+            return;
+        }
+        const lockedTable = hostEl.querySelector('.k-grid-content-locked table');
+        const wrapSelector = this.position === 'top' ? '.k-grid-header-wrap' : '.k-grid-footer-wrap';
+        const scrollableTable = hostEl.querySelector(`${wrapSelector} table`);
+        if (lockedTable && scrollableTable) {
+            syncRowsHeight(lockedTable, scrollableTable);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StickyGroupContainerComponent, deps: [{ token: StickyGroupsService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: i0.ElementRef }, { token: NavigationService }, { token: GroupsService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: StickyGroupContainerComponent, isStandalone: true, selector: "[kendoGridStickyGroupContainer]", inputs: { position: "position", columns: "columns", lockedColumns: "lockedColumns", groups: "groups", detailTemplate: "detailTemplate", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", tableWidth: "tableWidth", lockedWidth: "lockedWidth", isLocked: "isLocked" }, host: { listeners: { "click": "onContainerClick($event)", "focusin": "onContainerFocusIn($event)", "focusout": "onContainerFocusOut($event)", "keydown": "onContainerKeydown($event)" }, properties: { "class.k-grid-sticky-container": "this.hostClass", "class.k-pos-bottom": "this.isBottom", "attr.role": "this.hostRole" } }, providers: [
+            { provide: SKIP_CELL_NAVIGATION, useValue: true }
+        ], ngImport: i0, template: `
+        @if (isLocked) {
+            <div class="k-grid-content-locked" role="presentation" [style.width.px]="lockedWidth">
+                <table
+                    class="k-grid-table k-table"
+                    [class.k-grid-group-sticky-header-table]="position === 'top'"
+                    [class.k-grid-group-sticky-footer-table]="position === 'bottom'"
+                    [class.k-table-sm]="gridSize === 'small'"
+                    [class.k-table-md]="gridSize === 'medium'"
+                    role="none"
+                    [style.width.px]="lockedWidth">
+                    <colgroup kendoGridColGroup
+                        [groups]="groups"
+                        [columns]="$any(lockedColumns)"
+                        [detailTemplate]="detailTemplate">
+                    </colgroup>
+                    <tbody class="k-table-tbody" role="presentation">
+                        @if (position === 'top') {
+                            @for (stickyItem of items; track stickyItem.flatIndex) {
+                                <tr role="row"
+                                    class="k-grouping-row k-table-group-row k-table-row"
+                                    kendoGridGroupHeader
+                                    [columns]="lockedColumns"
+                                    [groups]="groups"
+                                    [item]="$any(stickyItem.item)"
+                                    [hasDetails]="!!detailTemplate?.templateRef"
+                                    [skipGroupDecoration]="false"
+                                    [hasGroupHeaderColumn]="false"
+                                    [groupHeaderColumns]="[]"
+                                    [rowIndex]="stickyItem.flatIndex + 1"
+                                    [totalColumnsCount]="totalColumnsCount"
+                                    [attr.aria-rowindex]="stickyItem.flatIndex + 1"
+                                    [attr.data-group-index]="$any(stickyItem.item).index"
+                                    [attr.data-group-level]="$any(stickyItem.item).level"
+                                    tabindex="-1">
+                                </tr>
+                            }
+                        }
+                        @if (position === 'bottom') {
+                            @for (stickyItem of items; track stickyItem.flatIndex; let rowIdx = $index) {
+                                <tr role="row"
+                                    class="k-group-footer"
+                                    [attr.aria-rowindex]="stickyItem.flatIndex + 1"
+                                    [attr.data-sticky-row]="rowIdx">
+                                    @for (g of groups; track $index) {
+                                        <td class="k-group-cell k-table-td k-table-group-td" role="presentation"></td>
+                                    }
+                                    @if (detailTemplate?.templateRef) {
+                                        <td class="k-hierarchy-cell k-table-td" role="gridcell"
+                                            aria-selected="false">
+                                        </td>
+                                    }
+                                    @for (column of lockedFooterColumns; track $index; let columnIndex = $index) {
+                                        <td role="gridcell"
+                                            class="k-table-td"
+                                            tabindex="-1"
+                                            [attr.aria-colindex]="columnIndex + 1"
+                                            [attr.data-col-index]="$any(column).leafIndex">
+                                            <ng-template
+                                                [templateContext]="{
+                                                    templateRef: $any(column).groupFooterTemplateRef,
+                                                    group: $any(stickyItem.item).data,
+                                                    field: $any(column).field,
+                                                    column: column,
+                                                    aggregates: $any(stickyItem.item).data?.aggregates,
+                                                    $implicit: $any(stickyItem.item).data?.aggregates
+                                                }">
+                                            </ng-template>
+                                        </td>
+                                    }
+                                </tr>
+                            }
+                        }
+                    </tbody>
+                </table>
+            </div>
+        }
+        <div [class.k-grid-header-wrap]="position === 'top'" [class.k-grid-footer-wrap]="position === 'bottom'" role="presentation"
+            [style.width.px]="isLocked ? wrapWidth : null">
+        <table
+            class="k-grid-table k-table"
+            [class.k-grid-group-sticky-header-table]="position === 'top'"
+            [class.k-grid-group-sticky-footer-table]="position === 'bottom'"
+            [class.k-table-sm]="gridSize === 'small'"
+            [class.k-table-md]="gridSize === 'medium'"
+            role="none"
+            [style.width.px]="tableWidth">
+            <colgroup kendoGridColGroup
+                [groups]="isLocked ? [] : groups"
+                [columns]="$any(columns)"
+                [detailTemplate]="isLocked ? null : detailTemplate">
+            </colgroup>
+            <tbody class="k-table-tbody" role="rowgroup">
+                @if (position === 'top') {
+                    @for (stickyItem of items; track stickyItem.flatIndex) {
+                        <tr role="row"
+                            class="k-grouping-row k-table-group-row k-table-row"
+                            kendoGridGroupHeader
+                            [columns]="columns"
+                            [groups]="groups"
+                            [item]="$any(stickyItem.item)"
+                            [hasDetails]="!!detailTemplate?.templateRef"
+                            [skipGroupDecoration]="isLocked"
+                            [hasGroupHeaderColumn]="hasGroupHeaderColumn"
+                            [groupHeaderColumns]="groupHeaderColumns"
+                            [rowIndex]="stickyItem.flatIndex + 1"
+                            [totalColumnsCount]="totalColumnsCount"
+                            [attr.aria-rowindex]="stickyItem.flatIndex + 1"
+                            [attr.data-group-index]="$any(stickyItem.item).index"
+                            [attr.data-group-level]="$any(stickyItem.item).level"
+                            tabindex="-1">
+                        </tr>
+                    }
+                }
+                @if (position === 'bottom') {
+                    @for (stickyItem of items; track stickyItem.flatIndex; let rowIdx = $index) {
+                        <tr role="row"
+                            class="k-group-footer"
+                            [attr.aria-rowindex]="stickyItem.flatIndex + 1"
+                            [attr.data-sticky-row]="rowIdx">
+                            @if (!isLocked) {
+                                @for (g of groups; track $index) {
+                                    <td class="k-group-cell k-table-td k-table-group-td" role="presentation"></td>
+                                }
+                                @if (detailTemplate?.templateRef && !isStacked) {
+                                    <td class="k-hierarchy-cell k-table-td" role="gridcell"
+                                        aria-selected="false">
+                                    </td>
+                                }
+                            }
+                            @if (!isStacked) {
+                                @for (column of footerColumns; track $index; let columnIndex = $index) {
+                                    <td role="gridcell"
+                                        class="k-table-td"
+                                        tabindex="-1"
+                                        [attr.aria-colindex]="columnIndex + 1"
+                                        [attr.data-col-index]="$any(column).leafIndex">
+                                        <ng-template
+                                            [templateContext]="{
+                                                templateRef: $any(column).groupFooterTemplateRef,
+                                                group: $any(stickyItem.item).data,
+                                                field: $any(column).field,
+                                                column: column,
+                                                aggregates: $any(stickyItem.item).data?.aggregates,
+                                                $implicit: $any(stickyItem.item).data?.aggregates
+                                            }">
+                                        </ng-template>
+                                    </td>
+                                }
+                            } @else {
+                                <td role="gridcell" class="k-table-td">
+                                    <div class="k-grid-column-template">
+                                        @for (col of footerColumns; track $index) {
+                                            @if ($any(col).groupFooterTemplateRef) {
+                                                <div class="k-column-template-item">
+                                                    <ng-template
+                                                        [templateContext]="{
+                                                            templateRef: $any(col).groupFooterTemplateRef,
+                                                            group: $any(stickyItem.item).data,
+                                                            field: $any(col).field,
+                                                            column: col,
+                                                            aggregates: $any(stickyItem.item).data?.aggregates,
+                                                            $implicit: $any(stickyItem.item).data?.aggregates
+                                                        }">
+                                                    </ng-template>
+                                                </div>
+                                            }
+                                        }
+                                    </div>
+                                </td>
+                            }
+                        </tr>
+                    }
+                }
+            </tbody>
+        </table>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StickyGroupContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoGridStickyGroupContainer]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @if (isLocked) {
+            <div class="k-grid-content-locked" role="presentation" [style.width.px]="lockedWidth">
+                <table
+                    class="k-grid-table k-table"
+                    [class.k-grid-group-sticky-header-table]="position === 'top'"
+                    [class.k-grid-group-sticky-footer-table]="position === 'bottom'"
+                    [class.k-table-sm]="gridSize === 'small'"
+                    [class.k-table-md]="gridSize === 'medium'"
+                    role="none"
+                    [style.width.px]="lockedWidth">
+                    <colgroup kendoGridColGroup
+                        [groups]="groups"
+                        [columns]="$any(lockedColumns)"
+                        [detailTemplate]="detailTemplate">
+                    </colgroup>
+                    <tbody class="k-table-tbody" role="presentation">
+                        @if (position === 'top') {
+                            @for (stickyItem of items; track stickyItem.flatIndex) {
+                                <tr role="row"
+                                    class="k-grouping-row k-table-group-row k-table-row"
+                                    kendoGridGroupHeader
+                                    [columns]="lockedColumns"
+                                    [groups]="groups"
+                                    [item]="$any(stickyItem.item)"
+                                    [hasDetails]="!!detailTemplate?.templateRef"
+                                    [skipGroupDecoration]="false"
+                                    [hasGroupHeaderColumn]="false"
+                                    [groupHeaderColumns]="[]"
+                                    [rowIndex]="stickyItem.flatIndex + 1"
+                                    [totalColumnsCount]="totalColumnsCount"
+                                    [attr.aria-rowindex]="stickyItem.flatIndex + 1"
+                                    [attr.data-group-index]="$any(stickyItem.item).index"
+                                    [attr.data-group-level]="$any(stickyItem.item).level"
+                                    tabindex="-1">
+                                </tr>
+                            }
+                        }
+                        @if (position === 'bottom') {
+                            @for (stickyItem of items; track stickyItem.flatIndex; let rowIdx = $index) {
+                                <tr role="row"
+                                    class="k-group-footer"
+                                    [attr.aria-rowindex]="stickyItem.flatIndex + 1"
+                                    [attr.data-sticky-row]="rowIdx">
+                                    @for (g of groups; track $index) {
+                                        <td class="k-group-cell k-table-td k-table-group-td" role="presentation"></td>
+                                    }
+                                    @if (detailTemplate?.templateRef) {
+                                        <td class="k-hierarchy-cell k-table-td" role="gridcell"
+                                            aria-selected="false">
+                                        </td>
+                                    }
+                                    @for (column of lockedFooterColumns; track $index; let columnIndex = $index) {
+                                        <td role="gridcell"
+                                            class="k-table-td"
+                                            tabindex="-1"
+                                            [attr.aria-colindex]="columnIndex + 1"
+                                            [attr.data-col-index]="$any(column).leafIndex">
+                                            <ng-template
+                                                [templateContext]="{
+                                                    templateRef: $any(column).groupFooterTemplateRef,
+                                                    group: $any(stickyItem.item).data,
+                                                    field: $any(column).field,
+                                                    column: column,
+                                                    aggregates: $any(stickyItem.item).data?.aggregates,
+                                                    $implicit: $any(stickyItem.item).data?.aggregates
+                                                }">
+                                            </ng-template>
+                                        </td>
+                                    }
+                                </tr>
+                            }
+                        }
+                    </tbody>
+                </table>
+            </div>
+        }
+        <div [class.k-grid-header-wrap]="position === 'top'" [class.k-grid-footer-wrap]="position === 'bottom'" role="presentation"
+            [style.width.px]="isLocked ? wrapWidth : null">
+        <table
+            class="k-grid-table k-table"
+            [class.k-grid-group-sticky-header-table]="position === 'top'"
+            [class.k-grid-group-sticky-footer-table]="position === 'bottom'"
+            [class.k-table-sm]="gridSize === 'small'"
+            [class.k-table-md]="gridSize === 'medium'"
+            role="none"
+            [style.width.px]="tableWidth">
+            <colgroup kendoGridColGroup
+                [groups]="isLocked ? [] : groups"
+                [columns]="$any(columns)"
+                [detailTemplate]="isLocked ? null : detailTemplate">
+            </colgroup>
+            <tbody class="k-table-tbody" role="rowgroup">
+                @if (position === 'top') {
+                    @for (stickyItem of items; track stickyItem.flatIndex) {
+                        <tr role="row"
+                            class="k-grouping-row k-table-group-row k-table-row"
+                            kendoGridGroupHeader
+                            [columns]="columns"
+                            [groups]="groups"
+                            [item]="$any(stickyItem.item)"
+                            [hasDetails]="!!detailTemplate?.templateRef"
+                            [skipGroupDecoration]="isLocked"
+                            [hasGroupHeaderColumn]="hasGroupHeaderColumn"
+                            [groupHeaderColumns]="groupHeaderColumns"
+                            [rowIndex]="stickyItem.flatIndex + 1"
+                            [totalColumnsCount]="totalColumnsCount"
+                            [attr.aria-rowindex]="stickyItem.flatIndex + 1"
+                            [attr.data-group-index]="$any(stickyItem.item).index"
+                            [attr.data-group-level]="$any(stickyItem.item).level"
+                            tabindex="-1">
+                        </tr>
+                    }
+                }
+                @if (position === 'bottom') {
+                    @for (stickyItem of items; track stickyItem.flatIndex; let rowIdx = $index) {
+                        <tr role="row"
+                            class="k-group-footer"
+                            [attr.aria-rowindex]="stickyItem.flatIndex + 1"
+                            [attr.data-sticky-row]="rowIdx">
+                            @if (!isLocked) {
+                                @for (g of groups; track $index) {
+                                    <td class="k-group-cell k-table-td k-table-group-td" role="presentation"></td>
+                                }
+                                @if (detailTemplate?.templateRef && !isStacked) {
+                                    <td class="k-hierarchy-cell k-table-td" role="gridcell"
+                                        aria-selected="false">
+                                    </td>
+                                }
+                            }
+                            @if (!isStacked) {
+                                @for (column of footerColumns; track $index; let columnIndex = $index) {
+                                    <td role="gridcell"
+                                        class="k-table-td"
+                                        tabindex="-1"
+                                        [attr.aria-colindex]="columnIndex + 1"
+                                        [attr.data-col-index]="$any(column).leafIndex">
+                                        <ng-template
+                                            [templateContext]="{
+                                                templateRef: $any(column).groupFooterTemplateRef,
+                                                group: $any(stickyItem.item).data,
+                                                field: $any(column).field,
+                                                column: column,
+                                                aggregates: $any(stickyItem.item).data?.aggregates,
+                                                $implicit: $any(stickyItem.item).data?.aggregates
+                                            }">
+                                        </ng-template>
+                                    </td>
+                                }
+                            } @else {
+                                <td role="gridcell" class="k-table-td">
+                                    <div class="k-grid-column-template">
+                                        @for (col of footerColumns; track $index) {
+                                            @if ($any(col).groupFooterTemplateRef) {
+                                                <div class="k-column-template-item">
+                                                    <ng-template
+                                                        [templateContext]="{
+                                                            templateRef: $any(col).groupFooterTemplateRef,
+                                                            group: $any(stickyItem.item).data,
+                                                            field: $any(col).field,
+                                                            column: col,
+                                                            aggregates: $any(stickyItem.item).data?.aggregates,
+                                                            $implicit: $any(stickyItem.item).data?.aggregates
+                                                        }">
+                                                    </ng-template>
+                                                </div>
+                                            }
+                                        }
+                                    </div>
+                                </td>
+                            }
+                        </tr>
+                    }
+                }
+            </tbody>
+        </table>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [
+                        ColGroupComponent,
+                        GroupHeaderComponent,
+                        TemplateContextDirective
+                    ],
+                    providers: [
+                        { provide: SKIP_CELL_NAVIGATION, useValue: true }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: StickyGroupsService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: i0.ElementRef }, { type: NavigationService }, { type: GroupsService }, { type: i0.NgZone }], propDecorators: { position: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], lockedColumns: [{
+                type: Input
+            }], groups: [{
+                type: Input
+            }], detailTemplate: [{
+                type: Input
+            }], totalColumnsCount: [{
+                type: Input
+            }], hasGroupHeaderColumn: [{
+                type: Input
+            }], groupHeaderColumns: [{
+                type: Input
+            }], tableWidth: [{
+                type: Input
+            }], lockedWidth: [{
+                type: Input
+            }], isLocked: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-sticky-container']
+            }], isBottom: [{
+                type: HostBinding,
+                args: ['class.k-pos-bottom']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], onContainerClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onContainerFocusIn: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], onContainerFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onContainerKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 const elementAt = (index, elements, elementOffset) => {
     for (let idx = 0, elementIdx = 0; idx < elements.length; idx++) {
         const offset = elementOffset(elements[idx]);
@@ -27666,6 +29559,7 @@ class ListComponent {
     pdfService;
     columnInfo;
     dataMappingService;
+    stickyGroupsService;
     hostClass = true;
     hostRole = 'presentation';
     data;
@@ -27697,6 +29591,19 @@ class ListComponent {
     columnsStartIdx = 0;
     allItems = [];
     itemsToRender = [];
+    stickyGroupHeaderColumns = [];
+    stickyNeedsUpdate = false;
+    stickyWasEnabled = false;
+    pendingToggleScroll = null;
+    skipScrollerAdjust = false;
+    suppressStickyUpdates = false;
+    suppressFocusScrollAdjust = false;
+    get hasStickyHeaders() {
+        return this.groupable && this.groupable.stickyHeaders && this.groups?.length > 0;
+    }
+    get hasStickyFooters() {
+        return this.groupable && this.groupable.stickyFooters && this.groups?.length > 0;
+    }
     get showFooter() {
         return this.groupable && this.groupable.showFooter;
     }
@@ -27710,6 +29617,8 @@ class ListComponent {
     lockedTable;
     table;
     resizeSensors = new QueryList();
+    stickyHeaderContainer;
+    stickyFooterContainer;
     scroller;
     scrollerFactory;
     subscriptions;
@@ -27759,7 +29668,7 @@ class ListComponent {
     minRowHeight;
     handleSkipOnData = false;
     scrollToIndex = null;
-    constructor(scrollerFactory, detailsService, changeNotification, suspendService, groupsService, ngZone, renderer, scrollSyncService, resizeService, editService, supportService, navigationService, scrollRequestService, ctx, columnResizingService, changeDetector, pdfService, columnInfo, dataMappingService) {
+    constructor(scrollerFactory, detailsService, changeNotification, suspendService, groupsService, ngZone, renderer, scrollSyncService, resizeService, editService, supportService, navigationService, scrollRequestService, ctx, columnResizingService, changeDetector, pdfService, columnInfo, dataMappingService, stickyGroupsService) {
         this.changeNotification = changeNotification;
         this.suspendService = suspendService;
         this.groupsService = groupsService;
@@ -27776,10 +29685,16 @@ class ListComponent {
         this.pdfService = pdfService;
         this.columnInfo = columnInfo;
         this.dataMappingService = dataMappingService;
+        this.stickyGroupsService = stickyGroupsService;
         this.scrollerFactory = scrollerFactory;
         this.scroller = this.ctx.scroller = scrollerFactory(this.dispatcher, this.ctx);
         this.subscriptions = detailsService.changes.subscribe(() => this.detailExpand());
-        this.subscriptions.add(scrollRequestService.requests.subscribe(req => isPresent(req.adjustIndex) ? this.scrollTo(req.request, req.adjustIndex) : this.scrollToItem(req.request)));
+        this.subscriptions.add(scrollRequestService.requests.subscribe(req => {
+            if (this.suppressFocusScrollAdjust) {
+                return;
+            }
+            isPresent(req.adjustIndex) ? this.scrollTo(req.request, req.adjustIndex) : this.scrollToItem(req.request);
+        }));
         this.subscriptions.add(this.pdfService.restoreDOMVirtualization.subscribe(() => {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                 this.init();
@@ -27789,7 +29704,8 @@ class ListComponent {
         }));
     }
     ngOnInit() {
-        this.minRowHeight = this.isVirtual ? this.rowHeight || calcRowHeight(this.table.nativeElement) : this.rowHeight;
+        const needsMeasuredRowHeight = this.isVirtual || this.hasStickyHeaders || this.hasStickyFooters;
+        this.minRowHeight = needsMeasuredRowHeight ? this.rowHeight || calcRowHeight(this.table.nativeElement) : this.rowHeight;
         this.init();
         this.subscriptions.add(this.ngZone.runOutsideAngular(this.handleRowSync.bind(this)));
         this.subscriptions.add(this.groupsService.changes.subscribe(() => {
@@ -27805,6 +29721,33 @@ class ListComponent {
             }
         }));
         this.subscriptions.add(this.ctx.localization.changes.subscribe(({ rtl }) => this.rtl = rtl));
+        this.subscriptions.add(this.stickyGroupsService.scrollToFooter$.subscribe(() => {
+            this.stickyNeedsUpdate = true;
+        }));
+        this.subscriptions.add(this.stickyGroupsService.scrollToRow$.subscribe(() => {
+            this.stickyNeedsUpdate = true;
+        }));
+        this.subscriptions.add(this.stickyGroupsService.scrollAndToggle$.subscribe((groupIndex) => {
+            this.handleStickyScrollAndToggle(groupIndex);
+        }));
+        this.subscriptions.add(this.ngZone.runOutsideAngular(() => {
+            const navSub = this.navigationService.changes.subscribe(() => {
+                if (!this.hasStickyHeaders && !this.hasStickyFooters) {
+                    return;
+                }
+                requestAnimationFrame(() => {
+                    if (this.suppressFocusScrollAdjust) {
+                        return;
+                    }
+                    this.stickyGroupsService.adjustScrollForFocusedCell(this.container?.nativeElement, this.stickyHeaderContainer?.nativeElement, this.stickyFooterContainer?.nativeElement);
+                });
+            });
+            return {
+                unsubscribe: () => {
+                    navSub.unsubscribe();
+                }
+            };
+        }));
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -27869,6 +29812,11 @@ class ListComponent {
         else if (this.totalIsAllItems && totalChanged) {
             this.scroller.reset(this.skipScroll);
             this.scroller.total = this.allItems.length;
+            // When a sticky toggle is pending, use the pre-computed virtualSkip
+            // (calculated from the OLD measured RHS before toggle).
+            if (this.pendingToggleScroll && this.virtualPageSize) {
+                this.scroller.virtualSkip = this.pendingToggleScroll.virtualSkip;
+            }
             this.itemsToRender = this.allItems.slice(this.scroller.virtualSkip, this.scroller.virtualSkip + this.virtualPageSize);
         }
         else if (totalChanged && !this.ctx.grid?.group?.length) {
@@ -27931,19 +29879,21 @@ class ListComponent {
                     this.scroller.total = this.allItems.length;
                     this.rowHeightService = this.scroller.rowHeightService = new RowHeightService(this.scroller.total, this.rowHeight || this.minRowHeight);
                 }
-                this.isVirtual && this.scroller.update();
+                this.isVirtual && this.scroller.update(this.skipScrollerAdjust);
+                this.skipScrollerAdjust = false;
                 // Item outside of the viewport is scrolled to programmatically.
                 // RowHeightService offset for given index still may not match the current scrollTop
                 // depending on the varying row heights, so we need to adjust the scroll position.
                 if (isPresent(this.scrollToIndex)) {
                     const offset = this.scroller.rowHeightService.offset(this.scrollToIndex);
+                    const targetScrollTop = this.getStickyAdjustedScrollTop(offset);
                     const el = this.container.nativeElement;
                     const maxScrollTop = el.scrollHeight - el.clientHeight;
                     // Only adjust if scrollTop can actually increase; otherwise adjustScroll
                     // sets scrollSyncing=true but the scrollTop stays clamped, which blocks
                     // the pending scroll event from being processed by the scroller.
-                    if (offset > el.scrollTop && el.scrollTop < maxScrollTop) {
-                        this.scroller.adjustScroll(offset - el.scrollTop);
+                    if (targetScrollTop > el.scrollTop && el.scrollTop < maxScrollTop) {
+                        this.scroller.adjustScroll(targetScrollTop - el.scrollTop);
                     }
                     this.scrollToIndex = null;
                 }
@@ -27961,6 +29911,27 @@ class ListComponent {
                 this.zoneSub = null;
             });
         }
+        const stickyEnabled = this.hasStickyHeaders || this.hasStickyFooters;
+        if (stickyEnabled) {
+            this.updateStickyGroupHeaderColumns();
+            if (totalChanged || dataContentChanged) {
+                this.stickyGroupsService.invalidateRangeMap();
+                this.stickyNeedsUpdate = true;
+                // Rebuild RowHeightService with the new allItems length so
+                // offsets stay in sync after group expand/collapse.
+                this.rowHeightService = this.scroller.rowHeightService =
+                    new RowHeightService(this.allItems.length, this.rowHeight || this.minRowHeight);
+            }
+        }
+        else if (this.stickyWasEnabled) {
+            this.stickyGroupsService.clear();
+            const containerEl = this.container?.nativeElement;
+            if (containerEl) {
+                containerEl.style.scrollPaddingTop = '';
+                containerEl.style.scrollPaddingBottom = '';
+            }
+        }
+        this.stickyWasEnabled = stickyEnabled;
     }
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
@@ -27976,6 +29947,28 @@ class ListComponent {
             this.syncRowsHeight();
         }
         this.hasLockedContainer = isLocked;
+        if (this.pendingToggleScroll) {
+            this.applyPendingToggleScroll();
+        }
+        if (this.stickyNeedsUpdate && isDocumentAvailable()) {
+            this.stickyNeedsUpdate = false;
+            this.updateStickyRowHeights();
+            this.scrollToStickyFooterTarget();
+            if (this.suppressFocusScrollAdjust) {
+                // After a toggle, the row is already positioned correctly —
+                // just focus it without scrolling.
+                const target = this.stickyGroupsService.consumeScrollToRow();
+                if (target) {
+                    this.focusRenderedStickyRow(target.flatIndex, target.colIndex);
+                }
+            }
+            else {
+                this.scrollToStickyRowTarget();
+            }
+            if (!this.suppressStickyUpdates) {
+                this.updateStickyGroups();
+            }
+        }
     }
     syncRowsHeight() {
         if (this.lockedContainer) {
@@ -28000,7 +29993,16 @@ class ListComponent {
         if (this.suspendService.scroll) {
             return;
         }
-        const total = this.isVirtual && this.ctx.grid?.pageable ? this.ctx.grid.pageSize : this.total;
+        let total;
+        if (this.isVirtual && this.ctx.grid?.pageable) {
+            total = this.ctx.grid.pageSize;
+        }
+        else if (this.hasStickyHeaders || this.hasStickyFooters) {
+            total = this.allItems.length || this.total;
+        }
+        else {
+            total = this.total;
+        }
         this.rowHeightService = this.scroller.rowHeightService = new RowHeightService(total, this.rowHeight || this.minRowHeight);
         if (!isUniversal()) {
             if (this.skipScroll) {
@@ -28079,6 +30081,41 @@ class ListComponent {
             this.itemsToRender = this.allItems.slice(this.scroller.virtualSkip, newEnd);
         }
     }
+    /**
+     * Recalculates the virtual page size after the scrollable container height changes
+     * due to pinned row containers appearing or disappearing. Expands itemsToRender
+     * if the new viewport can display more rows than currently rendered.
+     * @hidden
+     */
+    onPinnedContainerHeightChange() {
+        if (!this.isVirtual || !this.container || !this.scroller?.rowHeightService) {
+            return;
+        }
+        // For non-pageable non-grouped virtual, itemsToRender always equals allItems
+        if (!this.ctx.grid?.pageable && !this.ctx.grid?.group?.length) {
+            return;
+        }
+        const newPageSize = this.calcVirtualPageSize();
+        if (newPageSize <= 0 || newPageSize <= this.virtualPageSize) {
+            return;
+        }
+        this.virtualPageSize = this.scroller.virtualPageSize = newPageSize;
+        // Defer the itemsToRender update to a new change detection cycle
+        // to avoid NG0100 (expression changed after check) when this
+        // method is called from onStable after the initial CD pass.
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                this.ngZone.run(() => {
+                    const newEnd = Math.min(this.scroller.virtualSkip + newPageSize, this.allItems.length);
+                    const currentEnd = this.scroller.virtualSkip + this.itemsToRender.length;
+                    if (newEnd > currentEnd) {
+                        this.itemsToRender = this.allItems.slice(this.scroller.virtualSkip, newEnd);
+                    }
+                    this.scroller.update();
+                });
+            });
+        });
+    }
     /**
      * Checks if the virtual scroll state is out of sync with the expected position.
      * Used to determine if resetVirtualScroll should be called.
@@ -28150,6 +30187,392 @@ class ListComponent {
     get isStacked() {
         return this.ctx.grid?.isStacked;
     }
+    /**
+     * @hidden
+     * Updates sticky group header columns for the overlay. Called in ngDoCheck or on column changes.
+     */
+    updateStickyGroupHeaderColumns() {
+        if (this.columns.hasGroupHeaderColumn) {
+            this.stickyGroupHeaderColumns = columnsToRender(this.nonLockedLeafColumns.toArray().slice(1));
+        }
+        else {
+            this.stickyGroupHeaderColumns = [];
+        }
+    }
+    /**
+     * Measures actual rendered row heights from the DOM and feeds them into
+     * RowHeightService so its offsets reflect reality. Called in ngAfterViewChecked
+     * when stickyNeedsUpdate is true (data changed or scroll-to-group requested).
+     */
+    updateStickyRowHeights() {
+        if (!this.rowHeightService) {
+            return;
+        }
+        const tableEl = this.table?.nativeElement;
+        const tbody = tableEl?.querySelector('tbody');
+        if (!tbody?.children.length) {
+            return;
+        }
+        const heights = [];
+        for (let i = 0; i < tbody.children.length; i++) {
+            heights.push(tbody.children[i].getBoundingClientRect().height);
+        }
+        this.rowHeightService.update(this.scroller?.virtualSkip ?? 0, heights);
+    }
+    /**
+     * Handles sticky overlay header click: scrolls to the topmost sticky
+     * group header's real position so all overlay headers become visible
+     * real rows, then toggles the clicked group.
+     */
+    handleStickyScrollAndToggle(groupIndex) {
+        const containerEl = this.container?.nativeElement;
+        if (!containerEl) {
+            return;
+        }
+        const flatIndex = this.allItems.findIndex(item => item.type === 'group' && item.index === groupIndex);
+        if (flatIndex < 0) {
+            return;
+        }
+        const groupItem = this.allItems[flatIndex];
+        // Find the topmost (root) sticky header — scroll to its real position
+        // so all overlay headers become visible real rows at the top.
+        const stickyItems = this.stickyGroupsService.stickyHeaderItems;
+        const rootStickyItem = stickyItems.length > 0 ? stickyItems[0] : null;
+        const isFirstChild = groupIndex.endsWith('_0');
+        let scrollToIndex;
+        let targetScrollTop;
+        if (isFirstChild) {
+            scrollToIndex = rootStickyItem ? rootStickyItem.flatIndex : flatIndex;
+            targetScrollTop = this.rowHeightService
+                ? Math.max(0, this.rowHeightService.offset(scrollToIndex))
+                : containerEl.scrollTop;
+        }
+        else {
+            // Non-first child: scroll so the clicked group will sit just below ancestor headers
+            const parts = groupIndex.split('_');
+            let ancestorHeight = 0;
+            for (let level = 0; level < parts.length - 1; level++) {
+                const ancestorIndex = parts.slice(0, level + 1).join('_');
+                const ancestorFlatIdx = this.allItems.findIndex(item => item.type === 'group' && item.index === ancestorIndex);
+                if (ancestorFlatIdx >= 0 && this.rowHeightService) {
+                    ancestorHeight += this.rowHeightService.height(ancestorFlatIdx);
+                }
+            }
+            const clickedOffset = this.rowHeightService
+                ? this.rowHeightService.offset(flatIndex)
+                : containerEl.scrollTop;
+            targetScrollTop = Math.max(0, clickedOffset - ancestorHeight);
+        }
+        // Compute virtual page info using the OLD measured RHS (before toggle destroys it)
+        let virtualSkip = this.scroller.virtualSkip;
+        let translateOffset = this.scroller.tableTransformOffset;
+        if (this.isVirtual && this.virtualPageSize && this.rowHeightService) {
+            const firstVisibleIdx = this.rowHeightService.index(targetScrollTop);
+            const buffer = Math.max(Math.floor(this.virtualPageSize * 0.3), 0);
+            virtualSkip = Math.max(firstVisibleIdx - buffer, 0);
+            translateOffset = this.rowHeightService.offset(virtualSkip);
+        }
+        // 1. Suppress scroller from reacting to the scroll position change
+        this.scroller.scrollSyncing = true;
+        // Suppress scroll-triggered sticky updates until RAF completes
+        this.suppressStickyUpdates = true;
+        // 2. Scroll BEFORE toggle — pre-toggle DOM/data are still intact
+        containerEl.scrollTop = targetScrollTop;
+        const lockedEl = this.lockedContainer?.nativeElement;
+        if (lockedEl) {
+            lockedEl.scrollTop = targetScrollTop;
+        }
+        // 3. Store pending state for virtual page fix-up in ngAfterViewChecked
+        this.pendingToggleScroll = { groupIndex, targetScrollTop, virtualSkip, translateOffset };
+        // 4. Toggle — triggers groupsService.changes → skipScroll=true → ngDoCheck rebuilds allItems
+        this.groupsService.toggleRow(groupItem);
+    }
+    /**
+     * After toggle, fixes up the virtual page so the correct rows are rendered
+     * around the target scroll position that was set pre-toggle.
+     */
+    applyPendingToggleScroll() {
+        const pending = this.pendingToggleScroll;
+        this.pendingToggleScroll = null;
+        if (!pending) {
+            return;
+        }
+        const containerEl = this.container?.nativeElement;
+        if (!containerEl) {
+            return;
+        }
+        // Clear skipScroll so scroller responds to future page changes.
+        // Keep scrollSyncing = true so the async scroll event from the
+        // pre-toggle scrollTop assignment is consumed harmlessly.
+        this.skipScroll = false;
+        this.scroller.scrollSyncing = true;
+        const targetScrollTop = pending.targetScrollTop;
+        // Ensure scrollTop is still at the target (scroller.reset may have nudged it)
+        containerEl.scrollTop = targetScrollTop;
+        // Virtual mode: apply pre-computed virtual page info (from OLD measured RHS)
+        if (this.isVirtual && this.virtualPageSize) {
+            const newVirtualSkip = pending.virtualSkip;
+            const translateOffset = pending.translateOffset;
+            this.scroller.virtualSkip = newVirtualSkip;
+            this.scroller.firstToLoad = newVirtualSkip;
+            this.scroller.lastLoaded = Math.min(newVirtualSkip + this.virtualPageSize, this.allItems.length) - 1;
+            // Re-slice the visible window
+            this.itemsToRender = this.allItems.slice(newVirtualSkip, newVirtualSkip + this.virtualPageSize);
+            // Set table translateY using the pre-computed offset from the measured RHS
+            this.scroller.tableTransformOffset = translateOffset;
+            [
+                this.table?.nativeElement,
+                this.lockedTable?.nativeElement
+            ].filter(isPresent).forEach(el => {
+                this.renderer.setStyle(el, 'transform', `translateY(${translateOffset}px)`);
+            });
+        }
+        // Sync locked container
+        const lockedEl = this.lockedContainer?.nativeElement;
+        if (lockedEl) {
+            lockedEl.scrollTop = targetScrollTop;
+        }
+        // Suppress scroller.update() adjustScroll in the upcoming onStable callback
+        this.skipScrollerAdjust = true;
+        // Force sticky overlay update AFTER the DOM catches up.
+        // At this point the DOM still has stale rows (tbodyRows != itemsToRender.length)
+        // because Angular hasn't re-rendered the child table-body component yet.
+        // Defer to requestAnimationFrame so the update sees correct DOM.
+        this.stickyGroupsService.invalidateRangeMap();
+        this.ngZone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+                // After scroller.update() has measured actual row heights,
+                // reconcile translateY with the updated RHS and recompute
+                // scrollTop so the root group header sits at viewport top.
+                if (this.isVirtual && this.rowHeightService) {
+                    const correctOffset = this.rowHeightService.offset(this.scroller.virtualSkip);
+                    const currentOffset = this.scroller.tableTransformOffset;
+                    if (Math.abs(currentOffset - correctOffset) > 1) {
+                        this.scroller.tableTransformOffset = correctOffset;
+                        [
+                            this.table?.nativeElement,
+                            this.lockedTable?.nativeElement
+                        ].filter(isPresent).forEach(el => {
+                            this.renderer.setStyle(el, 'transform', `translateY(${correctOffset}px)`);
+                        });
+                    }
+                    // Find the root sticky header and scroll to its updated offset
+                    const stickyItems = this.stickyGroupsService.stickyHeaderItems;
+                    const rootItem = stickyItems.length > 0 ? stickyItems[0] : null;
+                    const rootFlatIndex = rootItem ? rootItem.flatIndex : this.allItems.findIndex(item => item.type === 'group' && item.index === pending.groupIndex);
+                    const clickedFlatIndex = this.allItems.findIndex(item => item.type === 'group' && item.index === pending.groupIndex);
+                    const clickedOffset = clickedFlatIndex >= 0 ? this.rowHeightService.offset(clickedFlatIndex) : -1;
+                    const isFirstChild = pending.groupIndex.endsWith('_0');
+                    if (isFirstChild && rootFlatIndex >= 0) {
+                        // First child: scroll to root so all overlay items become real rows
+                        containerEl.scrollTop = this.rowHeightService.offset(rootFlatIndex);
+                    }
+                    else if (!isFirstChild && clickedFlatIndex >= 0) {
+                        // Non-first child: scroll so clicked group sits just below the overlay.
+                        // Overlay will contain all ancestor group headers (levels above the clicked group).
+                        const parts = pending.groupIndex.split('_');
+                        let ancestorHeight = 0;
+                        for (let level = 0; level < parts.length - 1; level++) {
+                            const ancestorIndex = parts.slice(0, level + 1).join('_');
+                            const ancestorFlatIdx = this.allItems.findIndex(item => item.type === 'group' && item.index === ancestorIndex);
+                            if (ancestorFlatIdx >= 0) {
+                                ancestorHeight += this.rowHeightService.height(ancestorFlatIdx);
+                            }
+                        }
+                        const targetScroll = Math.max(0, clickedOffset - ancestorHeight);
+                        containerEl.scrollTop = targetScroll;
+                    }
+                    this.scroller.scrollSyncing = true;
+                    const lockedEl = this.lockedContainer?.nativeElement;
+                    if (lockedEl) {
+                        lockedEl.scrollTop = containerEl.scrollTop;
+                    }
+                }
+                this.suppressStickyUpdates = false;
+                this.updateStickyGroups();
+                // Focus the toggled group header after DOM is settled
+                const pendingFocus = this.stickyGroupsService.pendingFocusGroupIndex;
+                if (pendingFocus) {
+                    this.stickyGroupsService.pendingFocusGroupIndex = null;
+                    const focusFlatIndex = this.allItems.findIndex(item => item.type === 'group' && item.index === pendingFocus);
+                    if (focusFlatIndex >= 0 && !this.stickyGroupsService.focusReady$.closed) {
+                        // Suppress the navigation-triggered adjustScrollForFocusedCell
+                        // since we already positioned the row correctly.
+                        this.suppressFocusScrollAdjust = true;
+                        this.ngZone.run(() => {
+                            this.stickyGroupsService.focusReady$.next({
+                                groupIndex: pendingFocus,
+                                flatIndex: focusFlatIndex
+                            });
+                        });
+                        // Clear after next frame so all queued nav-triggered RAFs see the flag
+                        requestAnimationFrame(() => {
+                            this.suppressFocusScrollAdjust = false;
+                        });
+                    }
+                }
+            });
+        });
+    }
+    /**
+     * Scrolls the container so the real footer row at the pending flat index
+     * is visible at the bottom edge of the viewport.
+     */
+    scrollToStickyFooterTarget() {
+        const flatIndex = this.stickyGroupsService.consumeScrollToFooter();
+        if (flatIndex == null) {
+            return;
+        }
+        const containerEl = this.container?.nativeElement;
+        if (!containerEl || !this.rowHeightService) {
+            return;
+        }
+        const targetOffset = this.rowHeightService.offset(flatIndex);
+        const rowHeight = this.rowHeightService.height(flatIndex);
+        const viewportHeight = containerEl.clientHeight;
+        // Scroll so the footer row's bottom edge aligns with the viewport bottom
+        containerEl.scrollTop = Math.max(0, targetOffset + rowHeight - viewportHeight);
+    }
+    /**
+     * Scrolls the real grid body until the requested row is rendered in the real
+     * tbody, then focuses the corresponding real grid cell.
+     */
+    scrollToStickyRowTarget() {
+        const target = this.stickyGroupsService.consumeScrollToRow();
+        if (!target) {
+            return;
+        }
+        const tbody = this.getStickyTargetTbody(target.colIndex);
+        if (!tbody || !this.rowHeightService) {
+            return;
+        }
+        const logicalCell = this.stickyTargetToLogicalCell(target.flatIndex, target.colIndex);
+        if (!logicalCell) {
+            return;
+        }
+        const emitWhenRendered = () => {
+            const start = this.scroller?.virtualSkip ?? 0;
+            const end = start + this.itemsToRender.length - 1;
+            const row = this.findStickyTargetRow(tbody, logicalCell.logicalRow);
+            if (target.flatIndex < start || target.flatIndex > end || !row) {
+                return false;
+            }
+            this.observer?.disconnect();
+            this.focusRenderedStickyRow(target.flatIndex, target.colIndex);
+            return true;
+        };
+        this.observer?.disconnect();
+        this.scrollToVirtualRow(target.flatIndex, false);
+        if (emitWhenRendered()) {
+            return;
+        }
+        this.observer = new MutationObserver(() => {
+            emitWhenRendered();
+        });
+        this.observer.observe(tbody, { childList: true, subtree: true });
+    }
+    /**
+     * Focuses the rendered row requested from the sticky overlay.
+     */
+    focusRenderedStickyRow(flatIndex, colIndex) {
+        const logicalCell = this.stickyTargetToLogicalCell(flatIndex, colIndex);
+        if (!logicalCell) {
+            return;
+        }
+        const tbody = this.getStickyTargetTbody(colIndex);
+        const row = this.findStickyTargetRow(tbody, logicalCell.logicalRow);
+        const targetCell = row?.querySelector(`[aria-colindex="${logicalCell.logicalCol + 1}"]`);
+        const firstFocusableCell = row?.querySelector('[kendoGridLogicalCell], [kendogridlogicalcell], [aria-colindex]');
+        let cell = targetCell
+            ? this.navigationService.focusCellByElement(targetCell)
+            : undefined;
+        if (!cell && firstFocusableCell) {
+            cell = this.navigationService.focusCellByElement(firstFocusableCell);
+        }
+        if (!cell) {
+            cell = this.navigationService.focusCell(logicalCell.logicalRow, logicalCell.logicalCol);
+        }
+        if (cell && cell.colIndex !== logicalCell.logicalCol) {
+            this.navigationService.focusCell(logicalCell.logicalRow, cell.colIndex);
+        }
+    }
+    getStickyTargetTbody(colIndex) {
+        const table = colIndex < this.lockedLeafColumns.length && this.lockedTable
+            ? this.lockedTable.nativeElement
+            : this.table?.nativeElement;
+        return table?.querySelector('tbody');
+    }
+    findStickyTargetRow(tbody, logicalRow) {
+        if (!tbody) {
+            return null;
+        }
+        const rowIndex = String(logicalRow + 1);
+        return tbody.querySelector(`tr[data-kendo-grid-row-index="${rowIndex}"], tr[aria-rowindex="${rowIndex}"]`);
+    }
+    /**
+     * Converts a sticky overlay flat-index request into a logical grid cell
+     * position that NavigationService can focus.
+     */
+    stickyTargetToLogicalCell(flatIndex, colIndex) {
+        const meta = this.navigationService.metadata;
+        if (!meta) {
+            return null;
+        }
+        const pos = flatIndex + this.skip;
+        const hasDetail = meta.hasDetailTemplate && !meta.isStacked;
+        return {
+            logicalRow: (hasDetail ? pos * 2 : pos) + meta.headerRows,
+            logicalCol: colIndex + (hasDetail ? 1 : 0)
+        };
+    }
+    updateStickyGroups(scrollTarget) {
+        if (!this.hasStickyHeaders && !this.hasStickyFooters) {
+            return;
+        }
+        if (this.suppressStickyUpdates) {
+            return;
+        }
+        const containerEl = this.container?.nativeElement;
+        if (!containerEl) {
+            return;
+        }
+        // Get the tbody from the non-locked table
+        const tableEl = this.table?.nativeElement;
+        const tbody = tableEl?.querySelector('tbody');
+        if (!tbody) {
+            return;
+        }
+        const stickyHeaderEl = this.stickyHeaderContainer?.nativeElement || null;
+        const stickyFooterEl = this.stickyFooterContainer?.nativeElement || null;
+        this.stickyGroupsService.update({
+            container: containerEl,
+            tbody: tbody,
+            flatData: this.allItems,
+            stickyHeaderEl: stickyHeaderEl,
+            stickyFooterEl: stickyFooterEl,
+            enableHeaders: this.hasStickyHeaders,
+            enableFooters: this.hasStickyFooters,
+            rowHeight: this.rowHeight,
+            skipOffset: this.isVirtual ? this.scroller?.virtualSkip : 0,
+            rowHeightService: this.isVirtual ? this.rowHeightService : undefined
+        });
+        // Sync horizontal scroll for sticky containers
+        if (scrollTarget) {
+            const scrollLeft = scrollTarget.scrollLeft;
+            if (stickyHeaderEl) {
+                const scrollableWrapper = stickyHeaderEl.querySelector('.k-grid-header-wrap');
+                if (scrollableWrapper) {
+                    scrollableWrapper.scrollLeft = scrollLeft;
+                }
+            }
+            if (stickyFooterEl) {
+                const scrollableWrapper = stickyFooterEl.querySelector('.k-grid-footer-wrap');
+                if (scrollableWrapper) {
+                    scrollableWrapper.scrollLeft = scrollLeft;
+                }
+            }
+        }
+    }
     resetNavigationViewport() {
         if (!isDocumentAvailable()) {
             return;
@@ -28204,6 +30627,7 @@ class ListComponent {
                 if (this.virtualColumns || this.isVirtual) {
                     this.handleColumnScroll();
                 }
+                this.updateStickyGroups(target);
                 const rowViewport = this.navigationService.viewport || EMPTY_OBJECT;
                 const columnViewport = this.navigationService.columnViewport || EMPTY_OBJECT;
                 this.contentScroll.emit({
@@ -28252,7 +30676,7 @@ class ListComponent {
         if (this.lockedContainer) {
             this.lockedContainer.nativeElement.scrollTop = scrollTop;
         }
-        // Sync translateY offset during rapid scrolling with virtual+paging to prevent blank grid
+        // Sync translateY offset during rapid scrolling with virtual paging to prevent blank grid.
         if (this.isVirtual && this.ctx.grid?.pageable && this.scroller.rowHeightService) {
             const expectedFirstIndex = this.scroller.rowHeightService.index(scrollTop);
             const expectedOffset = this.scroller.rowHeightService.offset(expectedFirstIndex);
@@ -28308,9 +30732,22 @@ class ListComponent {
             itemIndex = Math.floor(itemIndex / 2);
         }
         const offset = this.rowHeightService.offset(itemIndex);
-        this.container.nativeElement.scrollTop = offset;
+        const scrollTop = this.getStickyAdjustedScrollTop(offset);
+        this.container.nativeElement.scrollTop = scrollTop;
         this.scrollToIndex = itemIndex;
     }
+    getStickyAdjustedScrollTop(offset) {
+        if (!this.hasStickyHeaders && !this.hasStickyFooters) {
+            return offset;
+        }
+        const gridContainer = this.container?.nativeElement?.closest('.k-grid-container');
+        const stickyHeaderEl = gridContainer
+            ?.querySelector('.k-grid-sticky-container:not(.k-pos-bottom)');
+        if (!stickyHeaderEl?.offsetHeight) {
+            return offset;
+        }
+        return Math.max(0, offset - stickyHeaderEl.offsetHeight);
+    }
     scrollTo({ row, column }, adjustIndex = false) {
         if (isNumber(row)) {
             if (this.isVirtual) {
@@ -28476,13 +30913,29 @@ class ListComponent {
         this.scroller.scrollHeightContainer = this.container.nativeElement.querySelector('.k-height-container');
         this.scroller.total = this.isVirtual && !this.ctx.grid?.pageable ? this.total : this.allItems.length;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: DetailsService }, { token: ChangeNotificationService }, { token: SuspendService }, { token: GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }, { token: ResizeService }, { token: EditService }, { token: i1$3.ScrollbarService }, { token: NavigationService }, { token: ScrollRequestService }, { token: ContextService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }, { token: DataMappingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: DetailsService }, { token: ChangeNotificationService }, { token: SuspendService }, { token: GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }, { token: ResizeService }, { token: EditService }, { token: i1$3.ScrollbarService }, { token: NavigationService }, { token: ScrollRequestService }, { token: ContextService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }, { token: DataMappingService }, { token: StickyGroupsService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ListComponent, isStandalone: true, selector: "kendo-grid-list", inputs: { data: "data", groups: "groups", total: "total", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", take: "take", skip: "skip", columns: "columns", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", selectable: "selectable", groupable: "groupable", filterable: "filterable", rowClass: "rowClass", rowSticky: "rowSticky", loading: "loading", trackBy: "trackBy", virtualColumns: "virtualColumns", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", loadingTemplate: "loadingTemplate", sort: "sort", size: "size" }, outputs: { contentScroll: "contentScroll", pageChange: "pageChange", scrollBottom: "scrollBottom" }, host: { properties: { "class.k-grid-container": "this.hostClass", "attr.role": "this.hostRole" } }, providers: [
             {
                 provide: SCROLLER_FACTORY_TOKEN,
                 useValue: DEFAULT_SCROLLER_FACTORY
             }
-        ], 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: `
+        ], 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: "stickyHeaderContainer", first: true, predicate: ["stickyHeaderContainer"], descendants: true, read: StickyGroupContainerComponent }, { propertyName: "stickyFooterContainer", first: true, predicate: ["stickyFooterContainer"], descendants: true, read: StickyGroupContainerComponent }, { propertyName: "resizeSensors", predicate: ResizeSensorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    @if (hasStickyHeaders) {
+      <div kendoGridStickyGroupContainer
+        #stickyHeaderContainer
+        position="top"
+        [columns]="$any(nonLockedLeafColumns)"
+        [lockedColumns]="$any(lockedLeafColumns)"
+        [groups]="groups"
+        [detailTemplate]="detailTemplate"
+        [totalColumnsCount]="leafColumns.length"
+        [hasGroupHeaderColumn]="columns.hasGroupHeaderColumn"
+        [groupHeaderColumns]="stickyGroupHeaderColumns"
+        [tableWidth]="nonLockedWidth"
+        [lockedWidth]="lockedWidth"
+        [isLocked]="isLocked">
+      </div>
+    }
     @if (isLocked && !isStacked) {
       <div #lockedContainer class="k-grid-content-locked" role="presentation"
         [style.width.px]="lockedWidth" tabindex="-1"
@@ -28608,7 +31061,23 @@ class ListComponent {
       </div>
     }
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass", "rowHeight", "detailRowHeight", "isPinContainer", "pinPosition"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
+    @if (hasStickyFooters) {
+      <div kendoGridStickyGroupContainer
+        #stickyFooterContainer
+        position="bottom"
+        [columns]="$any(nonLockedLeafColumns)"
+        [lockedColumns]="$any(lockedLeafColumns)"
+        [groups]="groups"
+        [detailTemplate]="detailTemplate"
+        [totalColumnsCount]="leafColumns.length"
+        [hasGroupHeaderColumn]="columns.hasGroupHeaderColumn"
+        [groupHeaderColumns]="stickyGroupHeaderColumns"
+        [tableWidth]="nonLockedWidth"
+        [lockedWidth]="lockedWidth"
+        [isLocked]="isLocked">
+      </div>
+    }
+    `, isInline: true, dependencies: [{ kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass", "rowHeight", "detailRowHeight", "isPinContainer", "pinPosition"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: StickyGroupContainerComponent, selector: "[kendoGridStickyGroupContainer]", inputs: ["position", "columns", "lockedColumns", "groups", "detailTemplate", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "tableWidth", "lockedWidth", "isLocked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -28621,6 +31090,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     ],
                     selector: 'kendo-grid-list',
                     template: `
+    @if (hasStickyHeaders) {
+      <div kendoGridStickyGroupContainer
+        #stickyHeaderContainer
+        position="top"
+        [columns]="$any(nonLockedLeafColumns)"
+        [lockedColumns]="$any(lockedLeafColumns)"
+        [groups]="groups"
+        [detailTemplate]="detailTemplate"
+        [totalColumnsCount]="leafColumns.length"
+        [hasGroupHeaderColumn]="columns.hasGroupHeaderColumn"
+        [groupHeaderColumns]="stickyGroupHeaderColumns"
+        [tableWidth]="nonLockedWidth"
+        [lockedWidth]="lockedWidth"
+        [isLocked]="isLocked">
+      </div>
+    }
     @if (isLocked && !isStacked) {
       <div #lockedContainer class="k-grid-content-locked" role="presentation"
         [style.width.px]="lockedWidth" tabindex="-1"
@@ -28746,14 +31231,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </div>
     }
     </div>
+    @if (hasStickyFooters) {
+      <div kendoGridStickyGroupContainer
+        #stickyFooterContainer
+        position="bottom"
+        [columns]="$any(nonLockedLeafColumns)"
+        [lockedColumns]="$any(lockedLeafColumns)"
+        [groups]="groups"
+        [detailTemplate]="detailTemplate"
+        [totalColumnsCount]="leafColumns.length"
+        [hasGroupHeaderColumn]="columns.hasGroupHeaderColumn"
+        [groupHeaderColumns]="stickyGroupHeaderColumns"
+        [tableWidth]="nonLockedWidth"
+        [lockedWidth]="lockedWidth"
+        [isLocked]="isLocked">
+      </div>
+    }
     `,
                     standalone: true,
-                    imports: [EventsOutsideAngularDirective, TableDirective, GridTableDirective, ColGroupComponent, TableBodyComponent, ResizeSensorComponent, ResizableContainerDirective]
+                    imports: [EventsOutsideAngularDirective, TableDirective, GridTableDirective, ColGroupComponent, TableBodyComponent, ResizeSensorComponent, ResizableContainerDirective, StickyGroupContainerComponent]
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SCROLLER_FACTORY_TOKEN]
-                }] }, { type: DetailsService }, { type: ChangeNotificationService }, { type: SuspendService }, { type: GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }, { type: ResizeService }, { type: EditService }, { type: i1$3.ScrollbarService }, { type: NavigationService }, { type: ScrollRequestService }, { type: ContextService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: ColumnInfoService }, { type: DataMappingService }], propDecorators: { hostClass: [{
+                }] }, { type: DetailsService }, { type: ChangeNotificationService }, { type: SuspendService }, { type: GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }, { type: ResizeService }, { type: EditService }, { type: i1$3.ScrollbarService }, { type: NavigationService }, { type: ScrollRequestService }, { type: ContextService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: ColumnInfoService }, { type: DataMappingService }, { type: StickyGroupsService }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-container']
             }], hostRole: [{
@@ -28826,6 +31327,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], resizeSensors: [{
                 type: ViewChildren,
                 args: [ResizeSensorComponent]
+            }], stickyHeaderContainer: [{
+                type: ViewChild,
+                args: ['stickyHeaderContainer', { read: StickyGroupContainerComponent }]
+            }], stickyFooterContainer: [{
+                type: ViewChild,
+                args: ['stickyFooterContainer', { read: StickyGroupContainerComponent }]
             }] } });
 
 /**
@@ -29699,8 +32206,16 @@ class GridMessages extends ComponentMessages {
      * Sets the screen-reader-only content for the pin column header.
      */
     pinColumnHeaderLabel;
+    /**
+     * Sets the label for the Grid row pin column icon.
+     */
+    rowPinLabel;
+    /**
+     * Sets the label for the Grid row unpin column icon.
+     */
+    rowUnpinLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: GridMessages, isStandalone: true, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", aiAssistantApplyButtonText: "aiAssistantApplyButtonText", aiAssistantToolbarToolText: "aiAssistantToolbarToolText", aiAssistantWindowTitle: "aiAssistantWindowTitle", aiAssistantWindowCloseTitle: "aiAssistantWindowCloseTitle", aiAssistantOutputCardTitle: "aiAssistantOutputCardTitle", aiAssistantOutputCardBodyContent: "aiAssistantOutputCardBodyContent", aiAssistantSelectionNotEnabled: "aiAssistantSelectionNotEnabled", aiAssistantSelectionRowModeRequired: "aiAssistantSelectionRowModeRequired", aiAssistantSelectionCellModeRequired: "aiAssistantSelectionCellModeRequired", aiAssistantWindowMaximizeTitle: "aiAssistantWindowMaximizeTitle", aiAssistantWindowMinimizeTitle: "aiAssistantWindowMinimizeTitle", aiAssistantWindowRestoreTitle: "aiAssistantWindowRestoreTitle", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", adaptiveFilterOperatorsTitle: "adaptiveFilterOperatorsTitle", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveBackButtonTitle: "adaptiveBackButtonTitle", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterToolbarToolText: "filterToolbarToolText", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", columnChooserSelectAll: "columnChooserSelectAll", columnChooserSearchLabel: "columnChooserSearchLabel", columnChooserSelectedColumnsCount: "columnChooserSelectedColumnsCount", columnsSubtitle: "columnsSubtitle", adaptiveFilterTitle: "adaptiveFilterTitle", adaptiveSortTitle: "adaptiveSortTitle", adaptiveGroupTitle: "adaptiveGroupTitle", filterClearAllButton: "filterClearAllButton", groupClearButton: "groupClearButton", sortClearButton: "sortClearButton", sortDoneButton: "sortDoneButton", groupDoneButton: "groupDoneButton", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", sortToolbarToolText: "sortToolbarToolText", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", checkboxColumnHeaderLabel: "checkboxColumnHeaderLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", editToolbarToolText: "editToolbarToolText", saveToolbarToolText: "saveToolbarToolText", addToolbarToolText: "addToolbarToolText", cancelToolbarToolText: "cancelToolbarToolText", removeToolbarToolText: "removeToolbarToolText", excelExportToolbarToolText: "excelExportToolbarToolText", csvExportToolbarToolText: "csvExportToolbarToolText", pdfExportToolbarToolText: "pdfExportToolbarToolText", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", groupToolbarToolText: "groupToolbarToolText", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingAddTitle: "externalEditingAddTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText", multiCheckboxFilterSearchPlaceholder: "multiCheckboxFilterSearchPlaceholder", multiCheckboxFilterSelectAllLabel: "multiCheckboxFilterSelectAllLabel", multiCheckboxFilterSelectedItemsCount: "multiCheckboxFilterSelectedItemsCount", smartBoxSpeechToTextButton: "smartBoxSpeechToTextButton", smartBoxSubmitPromptButton: "smartBoxSubmitPromptButton", smartBoxSearchPlaceholder: "smartBoxSearchPlaceholder", smartBoxSemanticSearchPlaceholder: "smartBoxSemanticSearchPlaceholder", smartBoxAIAssistantPlaceholder: "smartBoxAIAssistantPlaceholder", smartBoxSuggestedPrompts: "smartBoxSuggestedPrompts", smartBoxNoPreviousSearches: "smartBoxNoPreviousSearches", smartBoxNoPreviousPrompts: "smartBoxNoPreviousPrompts", smartBoxPreviouslySearched: "smartBoxPreviouslySearched", smartBoxPreviouslyAsked: "smartBoxPreviouslyAsked", searchModeListItemText: "searchModeListItemText", searchModeListItemDescription: "searchModeListItemDescription", semanticSearchModeListItemText: "semanticSearchModeListItemText", semanticSearchModeListItemDescription: "semanticSearchModeListItemDescription", smartBoxSearchModePopupButton: "smartBoxSearchModePopupButton", smartBoxAIAssistantModePopupButton: "smartBoxAIAssistantModePopupButton", detailColumnHeaderLabel: "detailColumnHeaderLabel", dragColumnHeaderLabel: "dragColumnHeaderLabel", commandColumnHeaderLabel: "commandColumnHeaderLabel", pinnedTopRowsLabel: "pinnedTopRowsLabel", pinnedBottomRowsLabel: "pinnedBottomRowsLabel", pinMenuPinToTopText: "pinMenuPinToTopText", pinMenuPinToBottomText: "pinMenuPinToBottomText", pinMenuUnpinText: "pinMenuUnpinText", pinColumnHeaderLabel: "pinColumnHeaderLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: GridMessages, isStandalone: true, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", aiAssistantApplyButtonText: "aiAssistantApplyButtonText", aiAssistantToolbarToolText: "aiAssistantToolbarToolText", aiAssistantWindowTitle: "aiAssistantWindowTitle", aiAssistantWindowCloseTitle: "aiAssistantWindowCloseTitle", aiAssistantOutputCardTitle: "aiAssistantOutputCardTitle", aiAssistantOutputCardBodyContent: "aiAssistantOutputCardBodyContent", aiAssistantSelectionNotEnabled: "aiAssistantSelectionNotEnabled", aiAssistantSelectionRowModeRequired: "aiAssistantSelectionRowModeRequired", aiAssistantSelectionCellModeRequired: "aiAssistantSelectionCellModeRequired", aiAssistantWindowMaximizeTitle: "aiAssistantWindowMaximizeTitle", aiAssistantWindowMinimizeTitle: "aiAssistantWindowMinimizeTitle", aiAssistantWindowRestoreTitle: "aiAssistantWindowRestoreTitle", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", adaptiveFilterOperatorsTitle: "adaptiveFilterOperatorsTitle", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveBackButtonTitle: "adaptiveBackButtonTitle", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterToolbarToolText: "filterToolbarToolText", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", columnChooserSelectAll: "columnChooserSelectAll", columnChooserSearchLabel: "columnChooserSearchLabel", columnChooserSelectedColumnsCount: "columnChooserSelectedColumnsCount", columnsSubtitle: "columnsSubtitle", adaptiveFilterTitle: "adaptiveFilterTitle", adaptiveSortTitle: "adaptiveSortTitle", adaptiveGroupTitle: "adaptiveGroupTitle", filterClearAllButton: "filterClearAllButton", groupClearButton: "groupClearButton", sortClearButton: "sortClearButton", sortDoneButton: "sortDoneButton", groupDoneButton: "groupDoneButton", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", sortToolbarToolText: "sortToolbarToolText", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", checkboxColumnHeaderLabel: "checkboxColumnHeaderLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", editToolbarToolText: "editToolbarToolText", saveToolbarToolText: "saveToolbarToolText", addToolbarToolText: "addToolbarToolText", cancelToolbarToolText: "cancelToolbarToolText", removeToolbarToolText: "removeToolbarToolText", excelExportToolbarToolText: "excelExportToolbarToolText", csvExportToolbarToolText: "csvExportToolbarToolText", pdfExportToolbarToolText: "pdfExportToolbarToolText", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", groupToolbarToolText: "groupToolbarToolText", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingAddTitle: "externalEditingAddTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText", multiCheckboxFilterSearchPlaceholder: "multiCheckboxFilterSearchPlaceholder", multiCheckboxFilterSelectAllLabel: "multiCheckboxFilterSelectAllLabel", multiCheckboxFilterSelectedItemsCount: "multiCheckboxFilterSelectedItemsCount", smartBoxSpeechToTextButton: "smartBoxSpeechToTextButton", smartBoxSubmitPromptButton: "smartBoxSubmitPromptButton", smartBoxSearchPlaceholder: "smartBoxSearchPlaceholder", smartBoxSemanticSearchPlaceholder: "smartBoxSemanticSearchPlaceholder", smartBoxAIAssistantPlaceholder: "smartBoxAIAssistantPlaceholder", smartBoxSuggestedPrompts: "smartBoxSuggestedPrompts", smartBoxNoPreviousSearches: "smartBoxNoPreviousSearches", smartBoxNoPreviousPrompts: "smartBoxNoPreviousPrompts", smartBoxPreviouslySearched: "smartBoxPreviouslySearched", smartBoxPreviouslyAsked: "smartBoxPreviouslyAsked", searchModeListItemText: "searchModeListItemText", searchModeListItemDescription: "searchModeListItemDescription", semanticSearchModeListItemText: "semanticSearchModeListItemText", semanticSearchModeListItemDescription: "semanticSearchModeListItemDescription", smartBoxSearchModePopupButton: "smartBoxSearchModePopupButton", smartBoxAIAssistantModePopupButton: "smartBoxAIAssistantModePopupButton", detailColumnHeaderLabel: "detailColumnHeaderLabel", dragColumnHeaderLabel: "dragColumnHeaderLabel", commandColumnHeaderLabel: "commandColumnHeaderLabel", pinnedTopRowsLabel: "pinnedTopRowsLabel", pinnedBottomRowsLabel: "pinnedBottomRowsLabel", pinMenuPinToTopText: "pinMenuPinToTopText", pinMenuPinToBottomText: "pinMenuPinToBottomText", pinMenuUnpinText: "pinMenuUnpinText", pinColumnHeaderLabel: "pinColumnHeaderLabel", rowPinLabel: "rowPinLabel", rowUnpinLabel: "rowUnpinLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
@@ -30027,6 +32542,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], pinColumnHeaderLabel: [{
                 type: Input
+            }], rowPinLabel: [{
+                type: Input
+            }], rowUnpinLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -32642,6 +35161,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 class RowPinContainerComponent {
     localization;
     pinnedWrapper;
+    lockedTable;
+    pinnedTable;
     hostClass = true;
     get bottomClass() {
         return this.position === 'bottom';
@@ -32661,20 +35182,31 @@ class RowPinContainerComponent {
     groups;
     detailTemplate;
     filterable;
+    rowHeight;
+    detailRowHeight;
+    loading;
+    size;
     constructor(localization) {
         this.localization = localization;
     }
+    ngAfterViewChecked() {
+        if (this.isLocked && this.lockedTable && this.pinnedTable) {
+            syncRowsHeight(this.lockedTable.nativeElement, this.pinnedTable.nativeElement);
+        }
+    }
     get ariaLabel() {
         const labelKey = this.position === 'top' ? 'pinnedTopRowsLabel' : 'pinnedBottomRowsLabel';
         return this.localization.get(labelKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RowPinContainerComponent, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: RowPinContainerComponent, isStandalone: true, selector: "kendo-grid-rowpin-container", inputs: { leafColumns: "leafColumns", lockedLeafColumns: "lockedLeafColumns", nonLockedLeafColumns: "nonLockedLeafColumns", sort: "sort", position: "position", rowsToRender: "rowsToRender", totalColumns: "totalColumns", lockedWidth: "lockedWidth", nonLockedWidth: "nonLockedWidth", isLocked: "isLocked", selectable: "selectable", trackBy: "trackBy", groups: "groups", detailTemplate: "detailTemplate", filterable: "filterable" }, host: { properties: { "class.k-grid-pinned-container": "this.hostClass", "class.k-pos-bottom": "this.bottomClass" } }, providers: [{ provide: IS_PIN_CONTAINER, useValue: true }], viewQueries: [{ propertyName: "pinnedWrapper", first: true, predicate: ["pinnedWrapper"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: RowPinContainerComponent, isStandalone: true, selector: "kendo-grid-rowpin-container", inputs: { leafColumns: "leafColumns", lockedLeafColumns: "lockedLeafColumns", nonLockedLeafColumns: "nonLockedLeafColumns", sort: "sort", position: "position", rowsToRender: "rowsToRender", totalColumns: "totalColumns", lockedWidth: "lockedWidth", nonLockedWidth: "nonLockedWidth", isLocked: "isLocked", selectable: "selectable", trackBy: "trackBy", groups: "groups", detailTemplate: "detailTemplate", filterable: "filterable", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", loading: "loading", size: "size" }, host: { properties: { "class.k-grid-pinned-container": "this.hostClass", "class.k-pos-bottom": "this.bottomClass" } }, providers: [{ provide: IS_PIN_CONTAINER, useValue: true }], viewQueries: [{ propertyName: "pinnedWrapper", first: true, predicate: ["pinnedWrapper"], descendants: true, static: true }, { propertyName: "lockedTable", first: true, predicate: ["lockedTable"], descendants: true }, { propertyName: "pinnedTable", first: true, predicate: ["pinnedTable"], descendants: true, static: true }], ngImport: i0, template: `
         @if (isLocked) {
             <div class="k-grid-content-locked" role="presentation" [style.width.px]="lockedWidth">
-                <table class="k-grid-table"
+                <table #lockedTable class="k-grid-table"
                     kendoGridTable
                     kendoGridResizableTable
+                    [locked]="true"
+                    [size]="size"
                     [style.width.px]="lockedWidth">
                     <colgroup kendoGridColGroup
                         [groups]="groups"
@@ -32687,7 +35219,7 @@ class RowPinContainerComponent {
                         [isLocked]="true"
                         [rowsToRender]="rowsToRender"
                         [columns]="$any(lockedLeafColumns)"
-                        [totalColumnsCount]="totalColumns.leafColumns.length"
+                        [totalColumnsCount]="leafColumns.length"
                         [totalColumns]="totalColumns"
                         [selectable]="selectable"
                         [trackBy]="trackBy"
@@ -32695,13 +35227,16 @@ class RowPinContainerComponent {
                         [pinPosition]="position"
                         [groups]="groups"
                         [detailTemplate]="detailTemplate"
-                        [filterable]="filterable">
+                        [filterable]="filterable"
+                        [rowHeight]="rowHeight"
+                        [detailRowHeight]="detailRowHeight"
+                        [isLoading]="loading">
                     </tbody>
                 </table>
             </div>
         }
         <div #pinnedWrapper class="k-grid-pinned-wrap">
-            <table class="k-grid-table"
+            <table #pinnedTable class="k-grid-table"
                 kendoGridTable
                 kendoGridResizableTable
                 [style.width.px]="nonLockedWidth"
@@ -32709,11 +35244,12 @@ class RowPinContainerComponent {
                 <colgroup kendoGridColGroup
                     [columns]="$any(nonLockedLeafColumns)"
                     [sort]="sort"
-                    [groups]="groups"
+                    [groups]="isLocked ? [] : groups"
                     [detailTemplate]="detailTemplate">
                 </colgroup>
                 <tbody kendoGridTableBody
                     role="presentation"
+                    [skipGroupDecoration]="isLocked"
                     [rowsToRender]="rowsToRender"
                     [columns]="$any(nonLockedLeafColumns)"
                     [lockedColumnsCount]="isLocked ? lockedLeafColumns?.length : 0"
@@ -32725,7 +35261,9 @@ class RowPinContainerComponent {
                     [pinPosition]="position"
                     [groups]="groups"
                     [detailTemplate]="detailTemplate"
-                    [filterable]="filterable">
+                    [filterable]="filterable"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight">
                 </tbody>
             </table>
         </div>
@@ -32738,9 +35276,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     template: `
         @if (isLocked) {
             <div class="k-grid-content-locked" role="presentation" [style.width.px]="lockedWidth">
-                <table class="k-grid-table"
+                <table #lockedTable class="k-grid-table"
                     kendoGridTable
                     kendoGridResizableTable
+                    [locked]="true"
+                    [size]="size"
                     [style.width.px]="lockedWidth">
                     <colgroup kendoGridColGroup
                         [groups]="groups"
@@ -32753,7 +35293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         [isLocked]="true"
                         [rowsToRender]="rowsToRender"
                         [columns]="$any(lockedLeafColumns)"
-                        [totalColumnsCount]="totalColumns.leafColumns.length"
+                        [totalColumnsCount]="leafColumns.length"
                         [totalColumns]="totalColumns"
                         [selectable]="selectable"
                         [trackBy]="trackBy"
@@ -32761,13 +35301,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         [pinPosition]="position"
                         [groups]="groups"
                         [detailTemplate]="detailTemplate"
-                        [filterable]="filterable">
+                        [filterable]="filterable"
+                        [rowHeight]="rowHeight"
+                        [detailRowHeight]="detailRowHeight"
+                        [isLoading]="loading">
                     </tbody>
                 </table>
             </div>
         }
         <div #pinnedWrapper class="k-grid-pinned-wrap">
-            <table class="k-grid-table"
+            <table #pinnedTable class="k-grid-table"
                 kendoGridTable
                 kendoGridResizableTable
                 [style.width.px]="nonLockedWidth"
@@ -32775,11 +35318,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 <colgroup kendoGridColGroup
                     [columns]="$any(nonLockedLeafColumns)"
                     [sort]="sort"
-                    [groups]="groups"
+                    [groups]="isLocked ? [] : groups"
                     [detailTemplate]="detailTemplate">
                 </colgroup>
                 <tbody kendoGridTableBody
                     role="presentation"
+                    [skipGroupDecoration]="isLocked"
                     [rowsToRender]="rowsToRender"
                     [columns]="$any(nonLockedLeafColumns)"
                     [lockedColumnsCount]="isLocked ? lockedLeafColumns?.length : 0"
@@ -32791,7 +35335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     [pinPosition]="position"
                     [groups]="groups"
                     [detailTemplate]="detailTemplate"
-                    [filterable]="filterable">
+                    [filterable]="filterable"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight">
                 </tbody>
             </table>
         </div>
@@ -32803,6 +35349,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }], ctorParameters: () => [{ type: i1$2.LocalizationService }], propDecorators: { pinnedWrapper: [{
                 type: ViewChild,
                 args: ['pinnedWrapper', { static: true }]
+            }], lockedTable: [{
+                type: ViewChild,
+                args: ['lockedTable']
+            }], pinnedTable: [{
+                type: ViewChild,
+                args: ['pinnedTable', { static: true }]
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-pinned-container']
@@ -32839,8 +35391,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], filterable: [{
                 type: Input
+            }], rowHeight: [{
+                type: Input
+            }], detailRowHeight: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], size: [{
+                type: Input
             }] } });
 
+/**
+ * Tracks the relationship between pinned rows and their counterparts in the main data table.
+ * Use this service to find the main row index for a given pinned row data item,
+ * or to find the pinned counterpart of a main row.
+ *
+ * The service is updated automatically by the Grid when `pinnedTopRows`, `pinnedBottomRows`,
+ * or `data` changes. For reliable index resolution, pinned row data items must be
+ * reference-equal to the corresponding items in the main data array.
+ *
+ * @hidden
+ */
+class PinnedRowTrackingService {
+    topIndexMap = new Map();
+    bottomIndexMap = new Map();
+    mainIndexMap = new Map();
+    /**
+     * Updates the internal tracking maps based on the current pinned rows and main data.
+     * Called automatically by the Grid when relevant inputs change.
+     *
+     * @param topRows - The array of data items pinned to the top.
+     * @param bottomRows - The array of data items pinned to the bottom.
+     * @param data - The flat main data array for the current page.
+     * @param skip - The current page skip offset used to compute absolute row indices.
+     */
+    update(topRows, bottomRows, data, skip) {
+        this.topIndexMap.clear();
+        this.bottomIndexMap.clear();
+        this.mainIndexMap.clear();
+        (topRows || []).forEach(dataItem => {
+            const pageIdx = (data || []).indexOf(dataItem);
+            if (pageIdx >= 0) {
+                const mainIndex = skip + pageIdx;
+                this.topIndexMap.set(dataItem, mainIndex);
+                this.mainIndexMap.set(mainIndex, { dataItem, position: 'top' });
+            }
+        });
+        (bottomRows || []).forEach(dataItem => {
+            const pageIdx = (data || []).indexOf(dataItem);
+            if (pageIdx >= 0) {
+                const mainIndex = skip + pageIdx;
+                this.bottomIndexMap.set(dataItem, mainIndex);
+                this.mainIndexMap.set(mainIndex, { dataItem, position: 'bottom' });
+            }
+        });
+    }
+    /**
+     * Updates the internal tracking maps using a pre-built data-item-to-index map from the main view.
+     * This handles grouping, sorting, and pagination correctly.
+     *
+     * @param topRows - The array of data items pinned to the top.
+     * @param bottomRows - The array of data items pinned to the bottom.
+     * @param dataToIndex - A map from data item references to their absolute row indices in the main view.
+     */
+    updateFromIndexMap(topRows, bottomRows, dataToIndex) {
+        this.topIndexMap.clear();
+        this.bottomIndexMap.clear();
+        this.mainIndexMap.clear();
+        (topRows || []).forEach(dataItem => {
+            const mainIndex = dataToIndex.get(dataItem);
+            if (mainIndex !== undefined) {
+                this.topIndexMap.set(dataItem, mainIndex);
+                this.mainIndexMap.set(mainIndex, { dataItem, position: 'top' });
+            }
+        });
+        (bottomRows || []).forEach(dataItem => {
+            const mainIndex = dataToIndex.get(dataItem);
+            if (mainIndex !== undefined) {
+                this.bottomIndexMap.set(dataItem, mainIndex);
+                this.mainIndexMap.set(mainIndex, { dataItem, position: 'bottom' });
+            }
+        });
+    }
+    /**
+     * Returns the absolute main row index for a pinned row data item, or `-1` if not found.
+     * The returned index matches the `index` property used by selection and editing services.
+     */
+    getMainRowIndex(dataItem) {
+        return this.topIndexMap.get(dataItem) ?? this.bottomIndexMap.get(dataItem) ?? -1;
+    }
+    /**
+     * Returns `true` if the given data item is currently pinned to the top or bottom.
+     */
+    isRowPinned(dataItem) {
+        return this.topIndexMap.has(dataItem) || this.bottomIndexMap.has(dataItem);
+    }
+    /**
+     * Returns the pin position (`'top'` or `'bottom'`) for the given data item,
+     * or `null` if the item is not pinned.
+     */
+    getPinnedPosition(dataItem) {
+        if (this.topIndexMap.has(dataItem)) {
+            return 'top';
+        }
+        if (this.bottomIndexMap.has(dataItem)) {
+            return 'bottom';
+        }
+        return null;
+    }
+    /**
+     * Returns the pinned counterpart for a given main row index,
+     * or `null` if the main row has no pinned counterpart.
+     */
+    getPinnedCounterpart(mainIndex) {
+        return this.mainIndexMap.get(mainIndex) || null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PinnedRowTrackingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PinnedRowTrackingService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PinnedRowTrackingService, decorators: [{
+            type: Injectable
+        }] });
+
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -32928,6 +35600,7 @@ class GridComponent {
     idService;
     searchService;
     rowPinService;
+    pinnedRowTrackingService;
     /**
      * Sets the data of the Grid. If you provide an array, the Grid gets the total count automatically.
      * ([more information and example](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/basics)).
@@ -33820,13 +36493,41 @@ class GridComponent {
     get flatData() {
         return isArray(this.data) ? this.data : this.data.data;
     }
+    /**
+     * @hidden
+     */
+    updatePinnedRowTracking() {
+        const dataToIndex = this.buildViewIndexMap();
+        this.pinnedRowTrackingService.updateFromIndexMap(this.pinnedTopRows, this.pinnedBottomRows, dataToIndex);
+    }
+    buildViewIndexMap() {
+        const dataToIndex = new Map();
+        const iter = this.view[iterator]();
+        let next = iter.next();
+        while (!next.done) {
+            const viewItem = next.value;
+            if (viewItem?.type === 'data') {
+                dataToIndex.set(viewItem.data, viewItem.index);
+            }
+            next = iter.next();
+        }
+        return dataToIndex;
+    }
     adjustPinnedItemIndexes(items) {
-        const flatData = this.flatData;
+        const dataToIndex = this.buildViewIndexMap();
         items.forEach((item) => {
             if (item.type === 'data') {
-                const pageIdx = flatData.indexOf(item.data);
-                if (pageIdx >= 0) {
-                    item.index = this.skip + pageIdx;
+                // Preserve the render-order position (0, 1, 2...) for stable isOdd styling.
+                item.pinnedIndex = item.index;
+                const mainIndex = dataToIndex.get(item.data);
+                if (mainIndex !== undefined) {
+                    item.index = mainIndex;
+                }
+                else {
+                    // Use a negative index when the pinned item is absent from the current view
+                    // (e.g. filtered out or on a different page) to avoid colliding with main
+                    // body row indices, which would cause incorrect selection state sync.
+                    item.index = -(item.pinnedIndex + 1);
                 }
             }
         });
@@ -33992,7 +36693,7 @@ class GridComponent {
     pinnedContainersChangeSubscription;
     rtl = false;
     _rowSticky;
-    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, csvService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService, adaptiveGridService, rowReorderService, dataMappingService, aiRequestResponseService, idService, searchService, rowPinService) {
+    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, csvService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService, adaptiveGridService, rowReorderService, dataMappingService, aiRequestResponseService, idService, searchService, rowPinService, pinnedRowTrackingService) {
         this.supportService = supportService;
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
@@ -34028,9 +36729,13 @@ class GridComponent {
         this.idService = idService;
         this.searchService = searchService;
         this.rowPinService = rowPinService;
+        this.pinnedRowTrackingService = pinnedRowTrackingService;
         const isValid = validatePackage(packageMetadata);
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        if (isDocumentAvailable()) {
+            document.body.style.setProperty('--kendo-scrollbar-width', `${this.scrollbarWidth}px`);
+        }
         this.ctx.grid = this;
         this.ctx.navigable = typeof this.navigable === 'boolean' ? this.navigable : this.navigable.includes('table');
         this.groupChange = new ZoneAwareEventEmitter(this.ngZone);
@@ -34185,6 +36890,7 @@ class GridComponent {
         }
         this.initSelectionService();
         this.updateNavigationMetadata();
+        this.updatePinnedRowTracking();
     }
     ngDoCheck() {
         if (!this.isScrollable) {
@@ -34204,6 +36910,9 @@ class GridComponent {
         if (this.lockedLeafColumns.length && anyChanged(["pageSize", "skip", "sort", "group"], changes)) {
             this.changeNotification.notify();
         }
+        if (isChanged$1("skip", changes)) {
+            this.updatePinnedRowTracking();
+        }
         if (anyChanged(["pageSize", "scrollable", 'virtualColumns'], changes)) {
             this.updateNavigationMetadata();
         }
@@ -34229,6 +36938,13 @@ class GridComponent {
             if (this.isPinnable) {
                 this.ngZone.onStable.pipe(take(1)).subscribe(() => this.attachScrollSync());
             }
+            this.updatePinnedRowTracking();
+            // Pinned container height changes affect the scrollable viewport size
+            if (this.isVirtual && this.listComponent && (isChanged$1("pinnedTopRows", changes) || isChanged$1("pinnedBottomRows", changes))) {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    this.listComponent.onPinnedContainerHeightChange();
+                });
+            }
         }
         if (isChanged$1("selectable", changes) && this.shouldResetSelection(changes['selectable'])) {
             if (this.defaultSelection) {
@@ -35407,7 +38123,7 @@ class GridComponent {
         this.dragTargetContainer?.notify();
         this.dropTargetContainer?.notify();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GridComponent, deps: [{ token: i1$3.ScrollbarService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: CSVService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1$2.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }, { token: AdaptiveGridService }, { token: RowReorderService }, { token: DataMappingService }, { token: GridAIRequestResponseService }, { token: IdService }, { token: SearchService }, { token: RowPinService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GridComponent, deps: [{ token: i1$3.ScrollbarService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: CSVService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1$2.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }, { token: AdaptiveGridService }, { token: RowReorderService }, { token: DataMappingService }, { token: GridAIRequestResponseService }, { token: IdService }, { token: SearchService }, { token: RowPinService }, { token: PinnedRowTrackingService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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", pinnable: "pinnable", pinnedTopRows: "pinnedTopRows", pinnedBottomRows: "pinnedBottomRows", isRowPinnable: "isRowPinnable" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", rowPinChange: "rowPinChange", 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", csvExport: "csvExport", 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: [
             LocalizationService,
             ColumnInfoService,
@@ -35461,7 +38177,9 @@ class GridComponent {
             MenuTabbingService,
             DataMappingService,
             SearchService,
-            RowPinService
+            RowPinService,
+            StickyGroupsService,
+            PinnedRowTrackingService
         ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "windowContainer", first: true, predicate: ["windowContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "pinnedContainers", predicate: RowPinContainerComponent, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
           i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
@@ -35943,6 +38661,12 @@ class GridComponent {
 
           i18n-pinColumnHeaderLabel="kendo.grid.pinColumnHeaderLabel|The screen-reader-only content for the pin column header"
           pinColumnHeaderLabel="Actions"
+
+          i18n-rowPinLabel="kendo.grid.rowPinLabel|Sets the label for the Grid row pin column icon"
+          rowPinLabel="Pin row"
+
+          i18n-rowUnpinLabel="kendo.grid.rowUnpinLabel|Sets the label for the Grid row unpin column icon"
+          rowUnpinLabel="Unpin row"
           >
         </ng-container>
         @if (showTopToolbar) {
@@ -36142,7 +38866,9 @@ class GridComponent {
                 [trackBy]="trackBy"
                 [groups]="group"
                 [detailTemplate]="detailTemplate"
-                [filterable]="filterable">
+                [filterable]="filterable"
+                [rowHeight]="rowHeight"
+                [detailRowHeight]="detailRowHeight">
             </kendo-grid-rowpin-container>
         }
 
@@ -36194,7 +38920,9 @@ class GridComponent {
                 [trackBy]="trackBy"
                 [groups]="group"
                 [detailTemplate]="detailTemplate"
-                [filterable]="filterable">
+                [filterable]="filterable"
+                [rowHeight]="rowHeight"
+                [detailRowHeight]="detailRowHeight">
             </kendo-grid-rowpin-container>
         }
         @if (showFooter) {
@@ -36282,7 +39010,9 @@ class GridComponent {
                 [trackBy]="trackBy"
                 [groups]="group"
                 [detailTemplate]="detailTemplate"
-                [filterable]="filterable">
+                [filterable]="filterable"
+                [rowHeight]="rowHeight"
+                [detailRowHeight]="detailRowHeight">
             </kendo-grid-rowpin-container>
           }
           <table
@@ -36369,7 +39099,11 @@ class GridComponent {
                 [trackBy]="trackBy"
                 [groups]="group"
                 [detailTemplate]="detailTemplate"
-                [filterable]="filterable">
+                [filterable]="filterable"
+                [rowHeight]="rowHeight"
+                [detailRowHeight]="detailRowHeight"
+                [size]="size"
+                [loading]="loading">
             </kendo-grid-rowpin-container>
           }
         }
@@ -36487,7 +39221,7 @@ class GridComponent {
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass", "rowHeight", "detailRowHeight", "isPinContainer", "pinPosition"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }, { kind: "component", type: i57.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i57.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i57.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i57.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i57.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i57.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i57.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i57.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i57.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: RowPinContainerComponent, selector: "kendo-grid-rowpin-container", inputs: ["leafColumns", "lockedLeafColumns", "nonLockedLeafColumns", "sort", "position", "rowsToRender", "totalColumns", "lockedWidth", "nonLockedWidth", "isLocked", "selectable", "trackBy", "groups", "detailTemplate", "filterable"] }], encapsulation: i0.ViewEncapsulation.None });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass", "rowHeight", "detailRowHeight", "isPinContainer", "pinPosition"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }, { kind: "component", type: i57.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i57.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i57.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i57.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i57.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i57.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i57.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i57.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i57.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: RowPinContainerComponent, selector: "kendo-grid-rowpin-container", inputs: ["leafColumns", "lockedLeafColumns", "nonLockedLeafColumns", "sort", "position", "rowsToRender", "totalColumns", "lockedWidth", "nonLockedWidth", "isLocked", "selectable", "trackBy", "groups", "detailTemplate", "filterable", "rowHeight", "detailRowHeight", "loading", "size"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -36547,7 +39281,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         MenuTabbingService,
                         DataMappingService,
                         SearchService,
-                        RowPinService
+                        RowPinService,
+                        StickyGroupsService,
+                        PinnedRowTrackingService
                     ],
                     selector: 'kendo-grid',
                     template: `
@@ -37031,6 +39767,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 
           i18n-pinColumnHeaderLabel="kendo.grid.pinColumnHeaderLabel|The screen-reader-only content for the pin column header"
           pinColumnHeaderLabel="Actions"
+
+          i18n-rowPinLabel="kendo.grid.rowPinLabel|Sets the label for the Grid row pin column icon"
+          rowPinLabel="Pin row"
+
+          i18n-rowUnpinLabel="kendo.grid.rowUnpinLabel|Sets the label for the Grid row unpin column icon"
+          rowUnpinLabel="Unpin row"
           >
         </ng-container>
         @if (showTopToolbar) {
@@ -37230,7 +39972,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [trackBy]="trackBy"
                 [groups]="group"
                 [detailTemplate]="detailTemplate"
-                [filterable]="filterable">
+                [filterable]="filterable"
+                [rowHeight]="rowHeight"
+                [detailRowHeight]="detailRowHeight">
             </kendo-grid-rowpin-container>
         }
 
@@ -37282,7 +40026,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [trackBy]="trackBy"
                 [groups]="group"
                 [detailTemplate]="detailTemplate"
-                [filterable]="filterable">
+                [filterable]="filterable"
+                [rowHeight]="rowHeight"
+                [detailRowHeight]="detailRowHeight">
             </kendo-grid-rowpin-container>
         }
         @if (showFooter) {
@@ -37370,7 +40116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [trackBy]="trackBy"
                 [groups]="group"
                 [detailTemplate]="detailTemplate"
-                [filterable]="filterable">
+                [filterable]="filterable"
+                [rowHeight]="rowHeight"
+                [detailRowHeight]="detailRowHeight">
             </kendo-grid-rowpin-container>
           }
           <table
@@ -37457,7 +40205,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [trackBy]="trackBy"
                 [groups]="group"
                 [detailTemplate]="detailTemplate"
-                [filterable]="filterable">
+                [filterable]="filterable"
+                [rowHeight]="rowHeight"
+                [detailRowHeight]="detailRowHeight"
+                [size]="size"
+                [loading]="loading">
             </kendo-grid-rowpin-container>
           }
         }
@@ -37604,7 +40356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         RowPinContainerComponent
                     ]
                 }]
-        }], ctorParameters: () => [{ type: i1$3.ScrollbarService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: CSVService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1$2.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }, { type: AdaptiveGridService }, { type: RowReorderService }, { type: DataMappingService }, { type: GridAIRequestResponseService }, { type: IdService }, { type: SearchService }, { type: RowPinService }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: i1$3.ScrollbarService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: CSVService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1$2.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }, { type: AdaptiveGridService }, { type: RowReorderService }, { type: DataMappingService }, { type: GridAIRequestResponseService }, { type: IdService }, { type: SearchService }, { type: RowPinService }, { type: PinnedRowTrackingService }], propDecorators: { data: [{
                 type: Input
             }], pageSize: [{
                 type: Input
@@ -38063,6 +40815,9 @@ class DataBindingDirective {
      */
     onRowReorder(ev) {
         this.rowReorderService.reorderRows(ev, this.originalData);
+        if (this.grid.pinnable !== false) {
+            this.reorderPinnedRows(ev);
+        }
         this.rebind();
     }
     /**
@@ -38190,6 +40945,18 @@ class DataBindingDirective {
         }
         return process(data, { sort: this.state.sort }).data;
     }
+    reorderPinnedRows(ev) {
+        if (this.grid.pinnedTopRows?.length) {
+            if (this.grid.pinnedTopRows.some(row => row === ev.dropTargetRow?.dataItem)) {
+                this.rowReorderService.reorderRows(ev, this.grid.pinnedTopRows);
+            }
+        }
+        if (this.grid.pinnedBottomRows?.length) {
+            if (this.grid.pinnedBottomRows.some(row => row === ev.dropTargetRow?.dataItem)) {
+                this.rowReorderService.reorderRows(ev, this.grid.pinnedBottomRows);
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DataBindingDirective, deps: [{ token: GridComponent }, { token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: RowReorderService }, { token: SearchService }, { token: RowPinService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: DataBindingDirective, isStandalone: true, selector: "[kendoGridBinding]", inputs: { skip: "skip", sort: "sort", filter: "filter", pageSize: "pageSize", group: "group", data: ["kendoGridBinding", "data"] }, exportAs: ["kendoGridBinding"], usesOnChanges: true, ngImport: i0 });
 }
@@ -38287,11 +41054,20 @@ class LocalEditService {
         for (let idx = 0; idx < data.length; idx++) {
             if (item === data[idx]) {
                 data.splice(idx, 1);
+                this.removePinnedRow(item);
                 this.dataChanged({ action: 'remove', item: item });
                 break;
             }
         }
     }
+    removePinnedRow(item) {
+        if (Array.isArray(this.grid.pinnedTopRows) && this.grid.pinnedTopRows.includes(item)) {
+            this.grid.pinnedTopRows = this.grid.pinnedTopRows.filter((r) => r !== item);
+        }
+        if (Array.isArray(this.grid.pinnedBottomRows) && this.grid.pinnedBottomRows.includes(item)) {
+            this.grid.pinnedBottomRows = this.grid.pinnedBottomRows.filter((r) => r !== item);
+        }
+    }
     assignValues(target, source) {
         Object.assign(target, source);
     }