@progress/kendo-angular-grid 16.10.0 → 16.10.1-develop.1

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

@@ -7,7 +7,7 @@ import { InjectionToken, EventEmitter, Injectable, SecurityContext, Optional, In
 import { merge, of, Subject, from, Subscription, interval, fromEvent, Observable, zip as zip$1, BehaviorSubject } from 'rxjs';
 import * as i9 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, isPresent as isPresent$1, closest as closest$1, isFocusable as isFocusable$1, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService, DraggableModule } from '@progress/kendo-angular-common';
-import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, tap, throttleTime, debounceTime, distinctUntilChanged, auditTime, bufferCount } from 'rxjs/operators';
+import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, tap, throttleTime, debounceTime, distinctUntilChanged, skip, auditTime, bufferCount } from 'rxjs/operators';
 import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, columnsIcon, chevronUpIcon, chevronDownIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, caretAltToLeftIcon, caretAltToRightIcon, insertMiddleIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
@@ -7992,7 +7992,8 @@ class SinglePopupService {
          */
         this.onClose = new Subject();
         this.pointerEventsSub = new Subscription();
-        this.scrollSubscription = scrollSyncService.changes.subscribe(() => this.destroy());
+        this.canClosePopup = true;
+        this.scrollSubscription = scrollSyncService.changes.pipe(skip(1)).subscribe(() => this.destroy());
     }
     /**
      * @hidden
@@ -8960,6 +8961,9 @@ class FilterMenuComponent {
         this.filterIcon = filterIcon;
         this.tabIndex = '-1';
     }
+    ngOnDestroy() {
+        this.cleanUp();
+    }
     get hasFilters() {
         return filtersByField(this.filter, (this.column || {}).field).length > 0;
     }
@@ -8978,21 +8982,24 @@ class FilterMenuComponent {
         return this.navigationService.tableEnabled;
     }
     toggle(anchor, template) {
-        var _a;
+        var _a, _b;
         this.popupRef = this.popupService.open(anchor, template, this.popupRef);
         // Needed as changes to 'popupRef' are not reflected
         // automatically when the Popup is closed by clicking outside the anchor
         const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
         if (this.popupRef) {
-            this.popupRef.popup.instance.close.pipe(take(1)).subscribe(() => {
-                this.popupRef = null;
-                const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
-                ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
-                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+            (_a = this.popupSubs) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+                this.close();
+                this.updateAria(ariaRoot);
             });
+            this.popupSubs.add(this.popupRef.popup.instance.close.subscribe(() => {
+                this.popupRef = null;
+                this.updateAria(ariaRoot);
+            }));
             const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-filter-popup');
             if (popupAriaElement) {
-                const popupId = getId$1((_a = this.idService) === null || _a === void 0 ? void 0 : _a.gridId());
+                const popupId = getId$1((_b = this.idService) === null || _b === void 0 ? void 0 : _b.gridId());
                 this.renderer.setAttribute(popupAriaElement, 'id', popupId);
                 this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
                 this.renderer.setAttribute(popupAriaElement, 'aria-label', this.filterLabel);
@@ -9011,9 +9018,7 @@ class FilterMenuComponent {
         return false;
     }
     close() {
-        this.popupService.destroy();
-        this.popupRef = null;
-        this.cdr.markForCheck();
+        this.cleanUp();
         if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
@@ -9021,6 +9026,18 @@ class FilterMenuComponent {
             this.anchor.nativeElement.focus();
         }
     }
+    updateAria(ariaRoot) {
+        ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
+        ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+    }
+    cleanUp() {
+        var _a;
+        this.popupService.destroy();
+        this.popupRef = null;
+        (_a = this.popupSubs) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.popupSubs = null;
+        this.cdr.markForCheck();
+    }
 }
 FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FilterMenuComponent, isStandalone: true, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
@@ -12142,17 +12159,20 @@ class ColumnMenuComponent {
         this.service.sortable = this.sortable;
     }
     ngOnDestroy() {
+        var _a;
         this.close();
         this.closeSubscription.unsubscribe();
+        (_a = this.popupSubs) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.closeSubscription = this.popupSubs = null;
     }
     /**
      * @hidden
      */
     toggle(e, anchor, template) {
-        var _a, _b;
+        var _a, _b, _c;
         if (e) {
             e.preventDefault();
-            e.stopImmediatePropagation();
+            e instanceof KeyboardEvent && e.stopImmediatePropagation();
         }
         this.expandedFilter = this.getExpandedState(this.settings.filter);
         this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
@@ -12162,15 +12182,23 @@ class ColumnMenuComponent {
         // automatically when the Popup is closed by clicking outside the anchor
         const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
         if (this.popupRef) {
-            this.popupRef.popup.instance.close.pipe(take(1)).subscribe(() => {
-                this.popupRef = null;
-                const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
-                ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
-                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+            (_a = this.popupSubs) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+                var _a;
+                (_a = this.popupSubs) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+                this.popupSubs = null;
+                this.close(true);
+                this.updateAria(ariaRoot);
             });
+            this.popupSubs.add(this.popupRef.popup.instance.close.subscribe(() => {
+                var _a;
+                (_a = this.popupSubs) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+                this.popupSubs = this.popupRef = null;
+                this.updateAria(ariaRoot);
+            }));
             const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup');
             if (popupAriaElement) {
-                const popupId = getId((_a = this.idService) === null || _a === void 0 ? void 0 : _a.gridId());
+                const popupId = getId((_b = this.idService) === null || _b === void 0 ? void 0 : _b.gridId());
                 this.renderer.setAttribute(popupAriaElement, 'id', popupId);
                 this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
                 this.renderer.setAttribute(popupAriaElement, 'aria-label', this.columnMenuTitle);
@@ -12181,7 +12209,7 @@ class ColumnMenuComponent {
                 this.renderer.addClass(popupAriaElement, 'k-column-menu-tabbed');
                 this.renderer.addClass(popupAriaElement, 'k-column-menu');
                 this.cdr.detectChanges();
-                (_b = this.tabStrip) === null || _b === void 0 ? void 0 : _b.selectTab(0);
+                (_c = this.tabStrip) === null || _c === void 0 ? void 0 : _c.selectTab(0);
             }
         }
         else {
@@ -12221,6 +12249,10 @@ class ColumnMenuComponent {
     getExpandedState(menuItemSettings) {
         return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
     }
+    updateAria(ariaRoot) {
+        ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
+        ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+    }
 }
 ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: NavigationService }, { token: SinglePopupService }, { token: ColumnMenuService }, { token: ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
@@ -13904,6 +13936,10 @@ class CellSelectionAggregateService {
             earliest: null,
             latest: null
         };
+        this.sub = new Subscription();
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
     }
     isAggregateIncluded(aggregate) {
         const { cellAggregates } = this.ctx.grid.selectable;
@@ -13913,8 +13949,15 @@ class CellSelectionAggregateService {
         return true;
     }
     init() {
+        this.sub.add(this.ctx.grid.dataStateChange.subscribe(_ => {
+            // nullifies aggregates and sets default count to avoid mismatching state -
+            // https://github.com/telerik/kendo-angular-private/issues/2964
+            this.nullifyAggregates();
+            if (this.isAggregateIncluded('count')) {
+                this.aggregates['count'] = 0;
+            }
+        }));
         if (this.ctx.grid.selectable.cellAggregates) {
-            this.data = this.dataChanges.data ? this.dataChanges.data : this.ctx.grid.data;
             if (this.isAggregateIncluded('count')) {
                 this.aggregates['count'] = 0;
             }
@@ -13953,10 +13996,12 @@ class CellSelectionAggregateService {
                 });
             }
             else if (!this.isRowSelection) {
-                const itemKey = this.data[item.itemKey];
+                // Enables working with the current Grid data regardless of its form (array, GridDataResult, GroupedResult).
+                // Currently gets the item by index only - https://github.com/telerik/kendo-angular-private/issues/2964
+                const selectedItem = this.ctx.grid.flatData.flatMap(recursiveFlatMap)[item.itemKey];
                 const field = fields[item.columnKey];
-                if (itemKey && itemKey.hasOwnProperty(field)) {
-                    const cellValue = itemKey[fields[item.columnKey]];
+                if (selectedItem && selectedItem.hasOwnProperty(field)) {
+                    const cellValue = selectedItem[fields[item.columnKey]];
                     this.groupAggregates(cellValue);
                 }
             }
@@ -19466,8 +19511,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1727163888,
-    version: '16.10.0',
+    publishDate: 1727264542,
+    version: '16.10.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -23476,6 +23521,12 @@ class GridComponent {
             }
         }
     }
+    ngAfterContentInit() {
+        this.shouldGenerateColumns = !this.columns.length;
+        this.autoGenerateColumns();
+        this.columnList = new ColumnList(this.columns);
+        this.columnsChangeSubscription = this.columns.changes.subscribe(() => this.verifySettings());
+    }
     ngAfterViewInit() {
         this.attachScrollSync();
         this.attachElementEventHandlers();
@@ -23487,12 +23538,6 @@ class GridComponent {
         this.verifySettings();
         this.initSelectionService();
     }
-    ngAfterContentInit() {
-        this.shouldGenerateColumns = !this.columns.length;
-        this.autoGenerateColumns();
-        this.columnList = new ColumnList(this.columns);
-        this.columnsChangeSubscription = this.columns.changes.subscribe(() => this.verifySettings());
-    }
     ngOnInit() {
         if (this.navigable.length) {
             this.navigationService.init(this.navigationMetadata(), this.navigable);
@@ -23903,6 +23948,12 @@ class GridComponent {
     handleReorderEvents(ev, evType) {
         this.rowReorderService[evType](ev);
     }
+    /**
+     * @hidden
+     */
+    get flatData() {
+        return isArray(this.data) ? this.data : this.data.data;
+    }
     /**
      * @hidden
      */
@@ -24424,9 +24475,6 @@ class GridComponent {
         (_a = this.dragTargetContainer) === null || _a === void 0 ? void 0 : _a.notify();
         (_b = this.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.notify();
     }
-    get flatData() {
-        return isArray(this.data) ? this.data : this.data.data;
-    }
 }
 GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1$2.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
 GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", 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", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
@@ -24734,293 +24782,293 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
-            <kendo-pager
-                *ngIf="showTopPager"
-                [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
-                [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-                class="k-grid-pager-top k-pager"
-                [template]="pagerTemplate"
-                [pageSize]="pageSize"
-                [total]="view.total"
-                [skip]="skip"
-                [size]="size"
-                [options]="pageable"
-                (pageChange)="notifyPageChange('pager', $event)">
-            </kendo-pager>
-            <kendo-grid-group-panel
-                *ngIf="showGroupPanel"
-                [navigable]="navigation.toolbarEnabled"
-                [text]="groupableEmptyText"
-                [groups]="group"
-                role="toolbar"
-                [attr.aria-label]="messageFor('groupPanelLabel')"
-                [attr.aria-controls]="ariaRootId"
-                (change)="groupChange.emit($event)">
-            </kendo-grid-group-panel>
-            <div #ariaRoot
-                class="k-grid-aria-root"
-                role="grid"
-                kendoDragTargetContainer
-                kendoDropTargetContainer
-                mode="manual"
-                [dragDisabled]="!rowReorderable"
-                [dropDisabled]="!rowReorderable"
-                [dragTargetFilter]="getDefaultSelectors('dragTarget')"
-                [dropTargetFilter]="getDefaultSelectors('dropTarget')"
-                [dragHandle]="getDefaultSelectors('handle')"
-                [hint]="{hintTemplate: defaultHint}"
-                (onPress)="handleReorderEvents($event, 'press')"
-                (onDragStart)="handleReorderEvents($event, 'dragStart')"
-                (onDrag)="handleReorderEvents($event, 'drag')"
-                (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
-                (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
-                (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
-                (onDrop)="handleReorderEvents($event, 'drop')"
-                [dragData]="gridData"
-                [id]="ariaRootId"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-rowcount]="ariaRowCount"
-                [attr.aria-colcount]="ariaColCount">
-                <ng-container *ngIf="isScrollable">
-                    <div *ngIf="!hideHeader"
-                        class="k-grid-header"
+        <kendo-pager
+            *ngIf="showTopPager"
+            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
+            class="k-grid-pager-top k-pager"
+            [template]="pagerTemplate"
+            [pageSize]="pageSize"
+            [total]="view.total"
+            [skip]="skip"
+            [size]="size"
+            [options]="pageable"
+            (pageChange)="notifyPageChange('pager', $event)">
+        </kendo-pager>
+        <kendo-grid-group-panel
+            *ngIf="showGroupPanel"
+            [navigable]="navigation.toolbarEnabled"
+            [text]="groupableEmptyText"
+            [groups]="group"
+            role="toolbar"
+            [attr.aria-label]="messageFor('groupPanelLabel')"
+            [attr.aria-controls]="ariaRootId"
+            (change)="groupChange.emit($event)">
+        </kendo-grid-group-panel>
+        <div #ariaRoot
+            class="k-grid-aria-root"
+            role="grid"
+            kendoDragTargetContainer
+            kendoDropTargetContainer
+            mode="manual"
+            [dragDisabled]="!rowReorderable"
+            [dropDisabled]="!rowReorderable"
+            [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+            [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+            [dragHandle]="getDefaultSelectors('handle')"
+            [hint]="{hintTemplate: defaultHint}"
+            (onPress)="handleReorderEvents($event, 'press')"
+            (onDragStart)="handleReorderEvents($event, 'dragStart')"
+            (onDrag)="handleReorderEvents($event, 'drag')"
+            (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+            (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+            (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+            (onDrop)="handleReorderEvents($event, 'drop')"
+            [dragData]="gridData"
+            [id]="ariaRootId"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-rowcount]="ariaRowCount"
+            [attr.aria-colcount]="ariaColCount">
+            <ng-container *ngIf="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                    [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                        #lockedHeader
                         role="presentation"
-                        [style.padding]="headerPadding">
-                        <div *ngIf="isLocked"
-                            #lockedHeader
+                        class="k-grid-header-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            kendoGridResizableTable
+                            [locked]="true"
                             role="presentation"
-                            class="k-grid-header-locked"
-                            [style.width.px]="lockedWidth">
-                            <table
-                                kendoGridResizableTable
-                                [locked]="true"
-                                role="presentation"
-                                class="k-grid-header-table"
-                                [style.width.px]="lockedWidth"
-                                kendoGridTable
-                                [size]="size">
-                                <colgroup kendoGridColGroup
-                                    [columns]="$any(lockedLeafColumns)"
-                                    [groups]="group"
-                                    [detailTemplate]="detailTemplate">
-                                </colgroup>
-                                <thead kendoGridHeader
-                                    role="rowgroup"
-                                    [resizable]="resizable"
-                                    [scrollable]="true"
-                                    [columns]="$any(lockedColumns)"
-                                    [totalColumnLevels]="totalColumnLevels"
-                                    [sort]="sort"
-                                    [groups]="group"
-                                    [filter]="filter"
-                                    [filterable]="filterable"
-                                    [groupable]="showGroupPanel"
-                                    [reorderable]="reorderable"
-                                    [sortable]="sortable"
-                                    [columnMenu]="columnMenuOptions"
-                                    [columnMenuTemplate]="columnMenuTemplate"
-                                    [totalColumnsCount]="leafColumns.length"
-                                    [totalColumns]="columnsContainer"
-                                    [detailTemplate]="detailTemplate"
-                                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                                </thead>
-                            </table>
-                        </div>
-                        <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                            [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                            [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                            <table
-                                role="presentation"
-                                class="k-grid-header-table"
-                                [style.width.px]="nonLockedWidth"
-                                kendoGridResizableTable
-                                [virtualColumns]="virtualColumns"
-                                kendoGridTable
-                                [size]="size">
-                                <colgroup kendoGridColGroup
-                                    [columns]="headerLeafColumns"
-                                    [groups]="isLocked ? [] : group"
-                                    [detailTemplate]="detailTemplate">
-                                </colgroup>
-                                <thead kendoGridHeader
-                                    [resizable]="resizable"
-                                    role="rowgroup"
-                                    [scrollable]="true"
-                                    [columns]="headerColumns"
-                                    [totalColumnLevels]="totalColumnLevels"
-                                    [sort]="sort"
-                                    [filter]="filter"
-                                    [filterable]="filterable"
-                                    [groupable]="showGroupPanel"
-                                    [reorderable]="reorderable"
-                                    [groups]="isLocked ? [] : group"
-                                    [sortable]="sortable"
-                                    [columnMenu]="columnMenuOptions"
-                                    [columnMenuTemplate]="columnMenuTemplate"
-                                    [lockedColumnsCount]="lockedLeafColumns.length"
-                                    [totalColumnsCount]="leafColumns.length"
-                                    [totalColumns]="columnsContainer"
-                                    [detailTemplate]="detailTemplate"
-                                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                                </thead>
-                            </table>
-                            <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                                <div [style.width.px]="columnsContainer.unlockedWidth"></div>
-                            </div>
+                            class="k-grid-header-table"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                role="rowgroup"
+                                [resizable]="resizable"
+                                [scrollable]="true"
+                                [columns]="$any(lockedColumns)"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [groups]="group"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                    </div>
+                    <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 2">
+                        <table
+                            role="presentation"
+                            class="k-grid-header-table"
+                            [style.width.px]="nonLockedWidth"
+                            kendoGridResizableTable
+                            [virtualColumns]="virtualColumns"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="headerLeafColumns"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                [resizable]="resizable"
+                                role="rowgroup"
+                                [scrollable]="true"
+                                [columns]="headerColumns"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [groups]="isLocked ? [] : group"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
                         </div>
                     </div>
-                    <kendo-grid-list
-                        [data]="$any(view)"
-                        [rowHeight]="rowHeight"
-                        [detailRowHeight]="detailRowHeight"
-                        [total]="totalCount"
-                        [take]="pageSize"
+                </div>
+                <kendo-grid-list
+                    [data]="$any(view)"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
+                    [groups]="group"
+                    [groupable]="groupable"
+                    [skip]="skip"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
+                    [selectable]="selectable"
+                    [filterable]="filterable"
+                    [detailTemplate]="detailTemplate"
+                    [noRecordsTemplate]="noRecordsTemplate"
+                    [size]="size"
+                    (pageChange)="notifyPageChange('list', $event)"
+                    [rowClass]="rowClass"
+                    [rowSticky]="rowSticky"
+                    [loading]="loading"
+                    [isVirtual]="isVirtual"
+                    [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
+                    [loadingTemplate]="loadingTemplate?.templateRef"
+                    [virtualColumns]="virtualColumns"
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"
+                    kendoDraggable
+                    kendoGridSelectionMarquee
+                    [enableDrag]="marqueeSelection"
+                    [sort]="sort">
+                </kendo-grid-list>
+                <div
+                    *ngIf="showFooter"
+                    class="k-grid-footer"
+                    [style.padding]="headerPadding">
+                    <div
+                        *ngIf="lockedLeafColumns.length"
+                        class="k-grid-footer-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            kendoGridResizableTable
+                            [locked]="true"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [scrollable]="true"
+                                [groups]="group"
+                                [columns]="$any(lockedLeafColumns)"
+                                [detailTemplate]="detailTemplate"
+                                [logicalRowIndex]="ariaRowCount"
+                                [totalColumns]="columnsContainer">
+                            </tfoot>
+                        </table>
+                    </div>
+                    <div #footer
+                        class="k-grid-footer-wrap" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 3">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [style.width.px]="nonLockedWidth"
+                            kendoGridTable
+                            kendoGridResizableTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(headerLeafColumns)"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [logicalRowIndex]="ariaRowCount"
+                                [scrollable]="true"
+                                [groups]="isLocked ? [] : group"
+                                [columns]="$any(headerColumns)"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [totalColumns]="columnsContainer">
+                            </tfoot>
+                        </table>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="!isScrollable">
+                <table
+                    [style.table-layout]="resizable ? 'fixed' : null"
+                    kendoGridTable
+                    kendoGridResizableTable
+                    role="presentation"
+                    [size]="size">
+                    <colgroup kendoGridColGroup
+                        [columns]="$any(leafColumns)"
+                        [groups]="group"
+                        [detailTemplate]="detailTemplate">
+                    </colgroup>
+                    <thead kendoGridHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [totalColumns]="columnsContainer"
+                        [groups]="group"
+                        [groupable]="showGroupPanel"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                    </thead>
+                    <tbody kendoGridTableBody
+                        [isLoading]="loading"
                         [groups]="group"
-                        [groupable]="groupable"
+                        [data]="$any(view)"
                         [skip]="skip"
-                        [trackBy]="trackBy"
-                        [columns]="columnsContainer"
+                        [columns]="$any(leafColumns)"
                         [selectable]="selectable"
                         [filterable]="filterable"
-                        [detailTemplate]="detailTemplate"
                         [noRecordsTemplate]="noRecordsTemplate"
-                        [size]="size"
-                        (pageChange)="notifyPageChange('list', $event)"
+                        [detailTemplate]="detailTemplate"
+                        [showGroupFooters]="showGroupFooters"
+                        [trackBy]="trackBy"
                         [rowClass]="rowClass"
-                        [rowSticky]="rowSticky"
-                        [loading]="loading"
-                        [isVirtual]="isVirtual"
-                        [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
-                        [loadingTemplate]="loadingTemplate?.templateRef"
-                        [virtualColumns]="virtualColumns"
-                        (scrollBottom)="notifyScrollBottom()"
-                        (contentScroll)="contentScroll.emit($event)"
                         kendoDraggable
                         kendoGridSelectionMarquee
-                        [enableDrag]="marqueeSelection"
-                        [sort]="sort">
-                    </kendo-grid-list>
-                    <div
+                        [enableDrag]="marqueeSelection">
+                    </tbody>
+                    <tfoot kendoGridFooter
                         *ngIf="showFooter"
-                        class="k-grid-footer"
-                        [style.padding]="headerPadding">
-                        <div
-                            *ngIf="lockedLeafColumns.length"
-                            class="k-grid-footer-locked"
-                            [style.width.px]="lockedWidth">
-                            <table
-                                role="presentation"
-                                class="k-grid-footer-table"
-                                kendoGridResizableTable
-                                [locked]="true"
-                                [style.width.px]="lockedWidth"
-                                kendoGridTable
-                                [size]="size">
-                                <colgroup kendoGridColGroup
-                                    [columns]="$any(lockedLeafColumns)"
-                                    [groups]="group"
-                                    [detailTemplate]="detailTemplate">
-                                </colgroup>
-                                <tfoot kendoGridFooter
-                                    [scrollable]="true"
-                                    [groups]="group"
-                                    [columns]="$any(lockedLeafColumns)"
-                                    [detailTemplate]="detailTemplate"
-                                    [logicalRowIndex]="ariaRowCount"
-                                    [totalColumns]="columnsContainer">
-                                </tfoot>
-                            </table>
-                        </div>
-                        <div #footer
-                            class="k-grid-footer-wrap" data-scrollable
-                            [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                            [lockedWidth]="lockedWidth + scrollbarWidth + 3">
-                            <table
-                                role="presentation"
-                                class="k-grid-footer-table"
-                                [style.width.px]="nonLockedWidth"
-                                kendoGridTable
-                                kendoGridResizableTable
-                                [size]="size">
-                                <colgroup kendoGridColGroup
-                                    [columns]="$any(headerLeafColumns)"
-                                    [groups]="isLocked ? [] : group"
-                                    [detailTemplate]="detailTemplate">
-                                </colgroup>
-                                <tfoot kendoGridFooter
-                                    [logicalRowIndex]="ariaRowCount"
-                                    [scrollable]="true"
-                                    [groups]="isLocked ? [] : group"
-                                    [columns]="$any(headerColumns)"
-                                    [lockedColumnsCount]="lockedLeafColumns.length"
-                                    [detailTemplate]="detailTemplate"
-                                    [totalColumns]="columnsContainer">
-                                </tfoot>
-                            </table>
-                        </div>
-                    </div>
-                </ng-container>
-                <ng-container *ngIf="!isScrollable">
-                    <table
-                        [style.table-layout]="resizable ? 'fixed' : null"
-                        kendoGridTable
-                        kendoGridResizableTable
-                        role="presentation"
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(leafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            *ngIf="!hideHeader"
-                            [resizable]="resizable"
-                            [scrollable]="false"
-                            [columns]="$any(visibleColumns)"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [totalColumns]="columnsContainer"
-                            [groups]="group"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [sort]="sort"
-                            [sortable]="sortable"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                        <tbody kendoGridTableBody
-                            [isLoading]="loading"
-                            [groups]="group"
-                            [data]="$any(view)"
-                            [skip]="skip"
-                            [columns]="$any(leafColumns)"
-                            [selectable]="selectable"
-                            [filterable]="filterable"
-                            [noRecordsTemplate]="noRecordsTemplate"
-                            [detailTemplate]="detailTemplate"
-                            [showGroupFooters]="showGroupFooters"
-                            [trackBy]="trackBy"
-                            [rowClass]="rowClass"
-                            kendoDraggable
-                            kendoGridSelectionMarquee
-                            [enableDrag]="marqueeSelection">
-                        </tbody>
-                        <tfoot kendoGridFooter
-                            *ngIf="showFooter"
-                            [scrollable]="false"
-                            [logicalRowIndex]="ariaRowCount"
-                            [groups]="group"
-                            [columns]="$any(leafColumns)"
-                            [detailTemplate]="detailTemplate"
-                            [totalColumns]="columnsContainer">
-                        </tfoot>
-                    </table>
-                </ng-container>
-                <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading></div>
-            </div>
+                        [scrollable]="false"
+                        [logicalRowIndex]="ariaRowCount"
+                        [groups]="group"
+                        [columns]="$any(leafColumns)"
+                        [detailTemplate]="detailTemplate"
+                        [totalColumns]="columnsContainer">
+                    </tfoot>
+                </table>
+            </ng-container>
+            <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading></div>
+        </div>
         <kendo-grid-status-bar
             *ngIf="showStatusBar"
             [statusBarTemplate]="statusBarTemplate">
@@ -25371,293 +25419,293 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
-            <kendo-pager
-                *ngIf="showTopPager"
-                [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
-                [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-                class="k-grid-pager-top k-pager"
-                [template]="pagerTemplate"
-                [pageSize]="pageSize"
-                [total]="view.total"
-                [skip]="skip"
-                [size]="size"
-                [options]="pageable"
-                (pageChange)="notifyPageChange('pager', $event)">
-            </kendo-pager>
-            <kendo-grid-group-panel
-                *ngIf="showGroupPanel"
-                [navigable]="navigation.toolbarEnabled"
-                [text]="groupableEmptyText"
-                [groups]="group"
-                role="toolbar"
-                [attr.aria-label]="messageFor('groupPanelLabel')"
-                [attr.aria-controls]="ariaRootId"
-                (change)="groupChange.emit($event)">
-            </kendo-grid-group-panel>
-            <div #ariaRoot
-                class="k-grid-aria-root"
-                role="grid"
-                kendoDragTargetContainer
-                kendoDropTargetContainer
-                mode="manual"
-                [dragDisabled]="!rowReorderable"
-                [dropDisabled]="!rowReorderable"
-                [dragTargetFilter]="getDefaultSelectors('dragTarget')"
-                [dropTargetFilter]="getDefaultSelectors('dropTarget')"
-                [dragHandle]="getDefaultSelectors('handle')"
-                [hint]="{hintTemplate: defaultHint}"
-                (onPress)="handleReorderEvents($event, 'press')"
-                (onDragStart)="handleReorderEvents($event, 'dragStart')"
-                (onDrag)="handleReorderEvents($event, 'drag')"
-                (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
-                (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
-                (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
-                (onDrop)="handleReorderEvents($event, 'drop')"
-                [dragData]="gridData"
-                [id]="ariaRootId"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-rowcount]="ariaRowCount"
-                [attr.aria-colcount]="ariaColCount">
-                <ng-container *ngIf="isScrollable">
-                    <div *ngIf="!hideHeader"
-                        class="k-grid-header"
+        <kendo-pager
+            *ngIf="showTopPager"
+            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
+            class="k-grid-pager-top k-pager"
+            [template]="pagerTemplate"
+            [pageSize]="pageSize"
+            [total]="view.total"
+            [skip]="skip"
+            [size]="size"
+            [options]="pageable"
+            (pageChange)="notifyPageChange('pager', $event)">
+        </kendo-pager>
+        <kendo-grid-group-panel
+            *ngIf="showGroupPanel"
+            [navigable]="navigation.toolbarEnabled"
+            [text]="groupableEmptyText"
+            [groups]="group"
+            role="toolbar"
+            [attr.aria-label]="messageFor('groupPanelLabel')"
+            [attr.aria-controls]="ariaRootId"
+            (change)="groupChange.emit($event)">
+        </kendo-grid-group-panel>
+        <div #ariaRoot
+            class="k-grid-aria-root"
+            role="grid"
+            kendoDragTargetContainer
+            kendoDropTargetContainer
+            mode="manual"
+            [dragDisabled]="!rowReorderable"
+            [dropDisabled]="!rowReorderable"
+            [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+            [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+            [dragHandle]="getDefaultSelectors('handle')"
+            [hint]="{hintTemplate: defaultHint}"
+            (onPress)="handleReorderEvents($event, 'press')"
+            (onDragStart)="handleReorderEvents($event, 'dragStart')"
+            (onDrag)="handleReorderEvents($event, 'drag')"
+            (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+            (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+            (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+            (onDrop)="handleReorderEvents($event, 'drop')"
+            [dragData]="gridData"
+            [id]="ariaRootId"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-rowcount]="ariaRowCount"
+            [attr.aria-colcount]="ariaColCount">
+            <ng-container *ngIf="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                    [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                        #lockedHeader
                         role="presentation"
-                        [style.padding]="headerPadding">
-                        <div *ngIf="isLocked"
-                            #lockedHeader
+                        class="k-grid-header-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            kendoGridResizableTable
+                            [locked]="true"
                             role="presentation"
-                            class="k-grid-header-locked"
-                            [style.width.px]="lockedWidth">
-                            <table
-                                kendoGridResizableTable
-                                [locked]="true"
-                                role="presentation"
-                                class="k-grid-header-table"
-                                [style.width.px]="lockedWidth"
-                                kendoGridTable
-                                [size]="size">
-                                <colgroup kendoGridColGroup
-                                    [columns]="$any(lockedLeafColumns)"
-                                    [groups]="group"
-                                    [detailTemplate]="detailTemplate">
-                                </colgroup>
-                                <thead kendoGridHeader
-                                    role="rowgroup"
-                                    [resizable]="resizable"
-                                    [scrollable]="true"
-                                    [columns]="$any(lockedColumns)"
-                                    [totalColumnLevels]="totalColumnLevels"
-                                    [sort]="sort"
-                                    [groups]="group"
-                                    [filter]="filter"
-                                    [filterable]="filterable"
-                                    [groupable]="showGroupPanel"
-                                    [reorderable]="reorderable"
-                                    [sortable]="sortable"
-                                    [columnMenu]="columnMenuOptions"
-                                    [columnMenuTemplate]="columnMenuTemplate"
-                                    [totalColumnsCount]="leafColumns.length"
-                                    [totalColumns]="columnsContainer"
-                                    [detailTemplate]="detailTemplate"
-                                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                                </thead>
-                            </table>
-                        </div>
-                        <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                            [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                            [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                            <table
-                                role="presentation"
-                                class="k-grid-header-table"
-                                [style.width.px]="nonLockedWidth"
-                                kendoGridResizableTable
-                                [virtualColumns]="virtualColumns"
-                                kendoGridTable
-                                [size]="size">
-                                <colgroup kendoGridColGroup
-                                    [columns]="headerLeafColumns"
-                                    [groups]="isLocked ? [] : group"
-                                    [detailTemplate]="detailTemplate">
-                                </colgroup>
-                                <thead kendoGridHeader
-                                    [resizable]="resizable"
-                                    role="rowgroup"
-                                    [scrollable]="true"
-                                    [columns]="headerColumns"
-                                    [totalColumnLevels]="totalColumnLevels"
-                                    [sort]="sort"
-                                    [filter]="filter"
-                                    [filterable]="filterable"
-                                    [groupable]="showGroupPanel"
-                                    [reorderable]="reorderable"
-                                    [groups]="isLocked ? [] : group"
-                                    [sortable]="sortable"
-                                    [columnMenu]="columnMenuOptions"
-                                    [columnMenuTemplate]="columnMenuTemplate"
-                                    [lockedColumnsCount]="lockedLeafColumns.length"
-                                    [totalColumnsCount]="leafColumns.length"
-                                    [totalColumns]="columnsContainer"
-                                    [detailTemplate]="detailTemplate"
-                                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                                </thead>
-                            </table>
-                            <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                                <div [style.width.px]="columnsContainer.unlockedWidth"></div>
-                            </div>
+                            class="k-grid-header-table"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                role="rowgroup"
+                                [resizable]="resizable"
+                                [scrollable]="true"
+                                [columns]="$any(lockedColumns)"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [groups]="group"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                    </div>
+                    <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 2">
+                        <table
+                            role="presentation"
+                            class="k-grid-header-table"
+                            [style.width.px]="nonLockedWidth"
+                            kendoGridResizableTable
+                            [virtualColumns]="virtualColumns"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="headerLeafColumns"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                [resizable]="resizable"
+                                role="rowgroup"
+                                [scrollable]="true"
+                                [columns]="headerColumns"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [groups]="isLocked ? [] : group"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
                         </div>
                     </div>
-                    <kendo-grid-list
-                        [data]="$any(view)"
-                        [rowHeight]="rowHeight"
-                        [detailRowHeight]="detailRowHeight"
-                        [total]="totalCount"
-                        [take]="pageSize"
+                </div>
+                <kendo-grid-list
+                    [data]="$any(view)"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
+                    [groups]="group"
+                    [groupable]="groupable"
+                    [skip]="skip"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
+                    [selectable]="selectable"
+                    [filterable]="filterable"
+                    [detailTemplate]="detailTemplate"
+                    [noRecordsTemplate]="noRecordsTemplate"
+                    [size]="size"
+                    (pageChange)="notifyPageChange('list', $event)"
+                    [rowClass]="rowClass"
+                    [rowSticky]="rowSticky"
+                    [loading]="loading"
+                    [isVirtual]="isVirtual"
+                    [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
+                    [loadingTemplate]="loadingTemplate?.templateRef"
+                    [virtualColumns]="virtualColumns"
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"
+                    kendoDraggable
+                    kendoGridSelectionMarquee
+                    [enableDrag]="marqueeSelection"
+                    [sort]="sort">
+                </kendo-grid-list>
+                <div
+                    *ngIf="showFooter"
+                    class="k-grid-footer"
+                    [style.padding]="headerPadding">
+                    <div
+                        *ngIf="lockedLeafColumns.length"
+                        class="k-grid-footer-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            kendoGridResizableTable
+                            [locked]="true"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [scrollable]="true"
+                                [groups]="group"
+                                [columns]="$any(lockedLeafColumns)"
+                                [detailTemplate]="detailTemplate"
+                                [logicalRowIndex]="ariaRowCount"
+                                [totalColumns]="columnsContainer">
+                            </tfoot>
+                        </table>
+                    </div>
+                    <div #footer
+                        class="k-grid-footer-wrap" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 3">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [style.width.px]="nonLockedWidth"
+                            kendoGridTable
+                            kendoGridResizableTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(headerLeafColumns)"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [logicalRowIndex]="ariaRowCount"
+                                [scrollable]="true"
+                                [groups]="isLocked ? [] : group"
+                                [columns]="$any(headerColumns)"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [totalColumns]="columnsContainer">
+                            </tfoot>
+                        </table>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="!isScrollable">
+                <table
+                    [style.table-layout]="resizable ? 'fixed' : null"
+                    kendoGridTable
+                    kendoGridResizableTable
+                    role="presentation"
+                    [size]="size">
+                    <colgroup kendoGridColGroup
+                        [columns]="$any(leafColumns)"
+                        [groups]="group"
+                        [detailTemplate]="detailTemplate">
+                    </colgroup>
+                    <thead kendoGridHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [totalColumns]="columnsContainer"
+                        [groups]="group"
+                        [groupable]="showGroupPanel"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                    </thead>
+                    <tbody kendoGridTableBody
+                        [isLoading]="loading"
                         [groups]="group"
-                        [groupable]="groupable"
+                        [data]="$any(view)"
                         [skip]="skip"
-                        [trackBy]="trackBy"
-                        [columns]="columnsContainer"
+                        [columns]="$any(leafColumns)"
                         [selectable]="selectable"
                         [filterable]="filterable"
-                        [detailTemplate]="detailTemplate"
                         [noRecordsTemplate]="noRecordsTemplate"
-                        [size]="size"
-                        (pageChange)="notifyPageChange('list', $event)"
+                        [detailTemplate]="detailTemplate"
+                        [showGroupFooters]="showGroupFooters"
+                        [trackBy]="trackBy"
                         [rowClass]="rowClass"
-                        [rowSticky]="rowSticky"
-                        [loading]="loading"
-                        [isVirtual]="isVirtual"
-                        [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
-                        [loadingTemplate]="loadingTemplate?.templateRef"
-                        [virtualColumns]="virtualColumns"
-                        (scrollBottom)="notifyScrollBottom()"
-                        (contentScroll)="contentScroll.emit($event)"
                         kendoDraggable
                         kendoGridSelectionMarquee
-                        [enableDrag]="marqueeSelection"
-                        [sort]="sort">
-                    </kendo-grid-list>
-                    <div
+                        [enableDrag]="marqueeSelection">
+                    </tbody>
+                    <tfoot kendoGridFooter
                         *ngIf="showFooter"
-                        class="k-grid-footer"
-                        [style.padding]="headerPadding">
-                        <div
-                            *ngIf="lockedLeafColumns.length"
-                            class="k-grid-footer-locked"
-                            [style.width.px]="lockedWidth">
-                            <table
-                                role="presentation"
-                                class="k-grid-footer-table"
-                                kendoGridResizableTable
-                                [locked]="true"
-                                [style.width.px]="lockedWidth"
-                                kendoGridTable
-                                [size]="size">
-                                <colgroup kendoGridColGroup
-                                    [columns]="$any(lockedLeafColumns)"
-                                    [groups]="group"
-                                    [detailTemplate]="detailTemplate">
-                                </colgroup>
-                                <tfoot kendoGridFooter
-                                    [scrollable]="true"
-                                    [groups]="group"
-                                    [columns]="$any(lockedLeafColumns)"
-                                    [detailTemplate]="detailTemplate"
-                                    [logicalRowIndex]="ariaRowCount"
-                                    [totalColumns]="columnsContainer">
-                                </tfoot>
-                            </table>
-                        </div>
-                        <div #footer
-                            class="k-grid-footer-wrap" data-scrollable
-                            [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                            [lockedWidth]="lockedWidth + scrollbarWidth + 3">
-                            <table
-                                role="presentation"
-                                class="k-grid-footer-table"
-                                [style.width.px]="nonLockedWidth"
-                                kendoGridTable
-                                kendoGridResizableTable
-                                [size]="size">
-                                <colgroup kendoGridColGroup
-                                    [columns]="$any(headerLeafColumns)"
-                                    [groups]="isLocked ? [] : group"
-                                    [detailTemplate]="detailTemplate">
-                                </colgroup>
-                                <tfoot kendoGridFooter
-                                    [logicalRowIndex]="ariaRowCount"
-                                    [scrollable]="true"
-                                    [groups]="isLocked ? [] : group"
-                                    [columns]="$any(headerColumns)"
-                                    [lockedColumnsCount]="lockedLeafColumns.length"
-                                    [detailTemplate]="detailTemplate"
-                                    [totalColumns]="columnsContainer">
-                                </tfoot>
-                            </table>
-                        </div>
-                    </div>
-                </ng-container>
-                <ng-container *ngIf="!isScrollable">
-                    <table
-                        [style.table-layout]="resizable ? 'fixed' : null"
-                        kendoGridTable
-                        kendoGridResizableTable
-                        role="presentation"
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(leafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            *ngIf="!hideHeader"
-                            [resizable]="resizable"
-                            [scrollable]="false"
-                            [columns]="$any(visibleColumns)"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [totalColumns]="columnsContainer"
-                            [groups]="group"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [sort]="sort"
-                            [sortable]="sortable"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                        <tbody kendoGridTableBody
-                            [isLoading]="loading"
-                            [groups]="group"
-                            [data]="$any(view)"
-                            [skip]="skip"
-                            [columns]="$any(leafColumns)"
-                            [selectable]="selectable"
-                            [filterable]="filterable"
-                            [noRecordsTemplate]="noRecordsTemplate"
-                            [detailTemplate]="detailTemplate"
-                            [showGroupFooters]="showGroupFooters"
-                            [trackBy]="trackBy"
-                            [rowClass]="rowClass"
-                            kendoDraggable
-                            kendoGridSelectionMarquee
-                            [enableDrag]="marqueeSelection">
-                        </tbody>
-                        <tfoot kendoGridFooter
-                            *ngIf="showFooter"
-                            [scrollable]="false"
-                            [logicalRowIndex]="ariaRowCount"
-                            [groups]="group"
-                            [columns]="$any(leafColumns)"
-                            [detailTemplate]="detailTemplate"
-                            [totalColumns]="columnsContainer">
-                        </tfoot>
-                    </table>
-                </ng-container>
-                <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading></div>
-            </div>
+                        [scrollable]="false"
+                        [logicalRowIndex]="ariaRowCount"
+                        [groups]="group"
+                        [columns]="$any(leafColumns)"
+                        [detailTemplate]="detailTemplate"
+                        [totalColumns]="columnsContainer">
+                    </tfoot>
+                </table>
+            </ng-container>
+            <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading></div>
+        </div>
         <kendo-grid-status-bar
             *ngIf="showStatusBar"
             [statusBarTemplate]="statusBarTemplate">