@progress/kendo-angular-grid 19.3.1-develop.3 → 20.0.0-develop.1

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

@@ -6,7 +6,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, 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, normalizeNumpadKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, closest as closest$1, hasObservers, ResizeSensorComponent, closestInScope as closestInScope$1, isFocusable as isFocusable$1, PreventableEvent as PreventableEvent$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, normalizeNumpadKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, closest as closest$1, hasObservers, ResizeSensorComponent, isFirefox, firefoxMaxHeight, closestInScope as closestInScope$1, isFocusable as isFocusable$1, PreventableEvent as PreventableEvent$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
@@ -16,7 +16,7 @@ import * as i1$2 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i53 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService, PagerTemplateDirective, KENDO_PAGER } from '@progress/kendo-angular-pager';
-import { orderBy, isCompositeFilterDescriptor, groupBy, process, filterBy } from '@progress/kendo-data-query';
+import { orderBy, isCompositeFilterDescriptor, groupBy, process } from '@progress/kendo-data-query';
 import { NgFor, NgIf, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgClass, NgStyle, NgSwitchDefault, KeyValuePipe } from '@angular/common';
 import { getter } from '@progress/kendo-common';
 import * as i1$4 from '@progress/kendo-angular-intl';
@@ -867,6 +867,7 @@ class ContextService {
     topToolbarNavigation;
     bottomToolbarNavigation;
     navigable;
+    scroller;
     dataBindingDirective;
     highlightDirective;
     constructor(renderer, localization) {
@@ -2170,9 +2171,6 @@ const GridConfigurationErrorMessages = {
     functionType: (propName, fn) => `${propName} must be a function, but received ${JSON.stringify(fn)}.`,
     incompatibleFeatures: (feat1Name, feat2Name) => `'Having both ${feat1Name} and ${feat2Name} is not supported.'`,
     nonLockedColumnPresent: 'There should be at least one non-locked column. See https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-known-limitations',
-    rowHeightVirtual: `The virtual scrolling functionality requires setting the rowHeight (and detailRowHeight when there are detail rows).
-        Row height and detail row height settings should be set only when virtual scrolling mode is enabled.
-        See https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-getting-started.`,
     focusNavigable: 'The Grid should be configured as navigable to control focus. See https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation/.',
     expandCollapseMethods: (expandMethodName, collapseMethodName, directiveName, callbackName) => `The ${expandMethodName} and ${collapseMethodName} methods should not be called
         when using the ${directiveName} directive or the ${callbackName} callback.
@@ -2180,9 +2178,6 @@ const GridConfigurationErrorMessages = {
     requiredEditService: `The default edit service of the editing directives works only when binding to plain array.
         Please provide an editService. See https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/#toc-custom-editing-service.`,
     requiredModule: (exportedType, moduleName, componentSelector) => `Creating ${exportedType} requires including the ${moduleName} and adding the ${componentSelector} component.`,
-    groupBindingDirectives: `Using the "kendoGridGroupBinding" directive in combination with the "kendoGridExpandGroupBy" directive
-        or the "isGroupExpanded" callback is not supported. To use grouping with the "kendoGridGroupBinding" directive,
-        set the Grid "groupable" property to "true".`,
     unsupportedMethod: (methodName, suggestedMethodName) => `Using ${methodName} in this context is not supported. Use ${suggestedMethodName} instead.`,
     unsupportedToolbarConfig: `
         Defining both a toolbar template and a ToolBarComponent within the Grid is not supported.
@@ -3522,7 +3517,7 @@ class NavigationService {
     isShiftPressed = false;
     currentSelection = [];
     get activeDataRow() {
-        return Math.max(0, this.activeRowIndex - this.meta.headerRows);
+        return Math.min(Math.max(0, this.activeRowIndex - this.meta.headerRows), this.meta.maxLogicalRowIndex);
     }
     constructor(zone, domEvents, pagerContextService, scrollRequestService, groupsService, detailsService, focusRoot, editService, cd, ctx, resizeService, focusableParent) {
         this.zone = zone;
@@ -4084,8 +4079,10 @@ class NavigationService {
         const dataRowIndex = this.activeDataRow;
         if (this.meta && (this.meta.isVirtual &&
             args.rowIndex >= this.meta.headerRows &&
+            args.rowIndex <= this.meta.maxLogicalRowIndex - this.meta.footerRow &&
             this.viewport &&
-            !this.viewport.containsRow(dataRowIndex) && dataRowIndex > -1)) {
+            !this.viewport.containsRow(dataRowIndex) &&
+            dataRowIndex > -1)) {
             this.scrollRequestService.scrollTo({ row: dataRowIndex });
         }
         if (this.meta.virtualColumns && args.colIndex >= this.meta.columns.lockedLeafColumns.length) {
@@ -5716,8 +5713,11 @@ class GroupHeaderComponent {
     prefixGroupCell(item) {
         return new Array(item.level);
     }
-    toggleGroup(item) {
+    toggleGroup(item, event) {
         this.groupsService.toggleRow(item);
+        if (this.ctx.navigable) {
+            this.ctx.grid.navigationService.focusCellByElement(event.target.closest('td'));
+        }
         return false;
     }
     groupSpan(item) {
@@ -5793,7 +5793,7 @@ class GroupHeaderComponent {
             [colSpan]="logicalColSpan()">
             <p class="k-reset">
                 <ng-container *ngIf="!skipGroupDecoration">
-                    <a href="#" tabindex="-1" (click)="toggleGroup(item)"
+                    <a href="#" tabindex="-1" (click)="toggleGroup(item, $event)"
                         role="presentation"
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
@@ -5884,7 +5884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [colSpan]="logicalColSpan()">
             <p class="k-reset">
                 <ng-container *ngIf="!skipGroupDecoration">
-                    <a href="#" tabindex="-1" (click)="toggleGroup(item)"
+                    <a href="#" tabindex="-1" (click)="toggleGroup(item, $event)"
                         role="presentation"
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
@@ -15735,6 +15735,7 @@ class PDFService {
     exportClick = new EventEmitter();
     dataChanged = new EventEmitter();
     exporting;
+    restoreDOMVirtualization = new EventEmitter();
     save(component) {
         this.emitEvent(this.savePDF, component);
     }
@@ -16061,6 +16062,7 @@ class PDFComponent extends PDFExportComponent {
     drawSubscription;
     renderAllPages;
     originalColumns;
+    restoreDOMVirtualization;
     constructor(pdfService, suspendService, ngZone, element, ctx) {
         super(element);
         this.pdfService = pdfService;
@@ -16109,6 +16111,16 @@ class PDFComponent extends PDFExportComponent {
         this.pdfService.exporting = true;
         this.initProgress();
         this.renderAllPages = this.allPages && pageSize < total;
+        if (component.isVirtual && component.pageable) {
+            component.scrollable = 'scrollable';
+            this.restoreDOMVirtualization = true;
+            if (!this.renderAllPages) {
+                this.changePage(component.skip, pageSize, callback, columns);
+                if (!(columns.length || component.virtualColumns)) {
+                    return;
+                }
+            }
+        }
         if (this.renderAllPages) {
             this.skip = component.skip;
             this.pageSize = pageSize;
@@ -16191,6 +16203,11 @@ class PDFComponent extends PDFExportComponent {
         if (this.component) {
             const originalColumns = this.originalColumns;
             delete this.originalColumns;
+            if (this.restoreDOMVirtualization) {
+                this.component.scrollable = 'virtual';
+                this.pdfService.restoreDOMVirtualization.emit();
+                this.restoreDOMVirtualization = false;
+            }
             if (this.renderAllPages) {
                 this.changePage(this.skip, this.pageSize, this.reset, originalColumns);
             }
@@ -20240,6 +20257,8 @@ class TableBodyComponent {
     rowSticky;
     totalColumns;
     rowClass = () => null;
+    rowHeight;
+    detailRowHeight;
     hostClass = true;
     groupHeaderSlaveCellsCount;
     groupHeaderColumns;
@@ -20352,7 +20371,8 @@ class TableBodyComponent {
         }
     }
     logicalRowIndex(rowIndex) {
-        let pos = this.skip + rowIndex;
+        const skip = this.skip + (this.ctx.scroller?.virtualSkip ?? 0);
+        let pos = rowIndex + skip;
         if (this.hasDetailTemplate && !this.isStackedMode) {
             pos *= 2;
         }
@@ -20444,9 +20464,6 @@ class TableBodyComponent {
         }, []);
         return colsToRender;
     }
-    showGroupHeader(item) {
-        return !item.data.skipHeader;
-    }
     addStickyColumnStyles(column) {
         const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
         return { ...column.style, ...stickyStyles };
@@ -20610,9 +20627,10 @@ class TableBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: DetailsService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: EditService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: SelectionService }, { token: CellSelectionService }, { token: ColumnInfoService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableBodyComponent, isStandalone: true, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", rowsToRender: "rowsToRender", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableBodyComponent, isStandalone: true, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", rowsToRender: "rowsToRender", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
@@ -20682,6 +20700,7 @@ class TableBodyComponent {
     </tr>
     <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
         <tr *ngIf="item.type === 'group'"
+            [style.height.px]="rowHeight"
             kendoGridGroupHeader
                 [columns]="columns"
                 [groups]="groups"
@@ -20700,6 +20719,7 @@ class TableBodyComponent {
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
         </tr>
         <tr *ngIf="item.showDataItem"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -20801,6 +20821,7 @@ class TableBodyComponent {
         </tr>
         <tr *ngIf="item.showDetailRow"
             class="k-detail-row"
+            [style.height.px]="detailRowHeight"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -20855,6 +20876,7 @@ class TableBodyComponent {
         </tr>
         <tr *ngIf="item.type === 'footer'"
             class="k-group-footer"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
@@ -20928,6 +20950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
@@ -20997,6 +21020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </tr>
     <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
         <tr *ngIf="item.type === 'group'"
+            [style.height.px]="rowHeight"
             kendoGridGroupHeader
                 [columns]="columns"
                 [groups]="groups"
@@ -21015,6 +21039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
         </tr>
         <tr *ngIf="item.showDataItem"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -21116,6 +21141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </tr>
         <tr *ngIf="item.showDetailRow"
             class="k-detail-row"
+            [style.height.px]="detailRowHeight"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -21170,6 +21196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </tr>
         <tr *ngIf="item.type === 'footer'"
             class="k-group-footer"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
@@ -21285,6 +21312,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], rowClass: [{
                 type: Input
+            }], rowHeight: [{
+                type: Input
+            }], detailRowHeight: [{
+                type: Input
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-tbody']
@@ -22025,8 +22056,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1755524728,
-    version: '19.3.1-develop.3',
+    publishDate: 1755704951,
+    version: '20.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -22137,10 +22168,6 @@ const isGroupItem = (source) => {
     return source.items !== undefined &&
         source.field !== undefined;
 };
-const isVirtualGroupItem = (source) => {
-    return source.offset !== undefined &&
-        source.skipHeader !== undefined;
-};
 const flattenGroups = (groups) => (groups.reduce((acc, curr) => {
     if (isGroupItem(curr)) {
         return acc.concat(flattenGroups(curr.items));
@@ -22163,9 +22190,6 @@ const itemAt = (data, index) => {
 const getIterator = (data, { footers, level, dataIndex, parentGroupIndex, groupIndex, parentGroup }) => {
     const first = data[0];
     if (isPresent(first) && isGroupItem(first)) {
-        if (isVirtualGroupItem(first)) {
-            groupIndex = isPresent(first.offset) ? first.offset : groupIndex;
-        }
         return new GroupIterator(data, footers, level, dataIndex, parentGroupIndex, groupIndex, parentGroup);
     }
     return new ItemIterator(data, dataIndex, parentGroupIndex, parentGroup);
@@ -22938,12 +22962,13 @@ class NavigationMetadata {
     gridElement;
     virtualColumns;
     columns;
+    footerRow;
     isStacked;
     get maxLogicalRowIndex() {
         const dataRows = this.hasDetailTemplate ? this.dataRows * 2 : this.dataRows;
-        return this.headerRows + dataRows - 1;
+        return this.headerRows + dataRows + this.footerRow - 1;
     }
-    constructor(dataRows, headerRows, isVirtual, hasPager, hasDetailTemplate, gridElement, virtualColumns, columns, isStacked) {
+    constructor(dataRows, headerRows, isVirtual, hasPager, hasDetailTemplate, gridElement, virtualColumns, columns, footerRow, isStacked) {
         this.dataRows = dataRows;
         this.headerRows = headerRows;
         this.isVirtual = isVirtual;
@@ -22952,6 +22977,7 @@ class NavigationMetadata {
         this.gridElement = gridElement;
         this.virtualColumns = virtualColumns;
         this.columns = columns;
+        this.footerRow = footerRow;
         this.isStacked = isStacked;
     }
 }
@@ -23811,26 +23837,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$3.DraggableDirective }, { type: SelectionService }, { type: CellSelectionService }, { type: DomEventsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
-/**
- * @hidden
- */
-const update = (arr, idx, value) => ([
-    ...arr.slice(0, idx + 1),
-    ...(arr.slice(idx + 1).map(x => x + value))
-]);
 /**
  * @hidden
  */
 class RowHeightService {
     total;
-    rowHeight;
-    detailRowHeight;
     offsets = [];
     heights = [];
-    constructor(total = 0, rowHeight, detailRowHeight) {
+    constructor(total = 0, rowHeight) {
         this.total = total;
-        this.rowHeight = rowHeight;
-        this.detailRowHeight = detailRowHeight;
         let agg = 0;
         for (let idx = 0; idx < total; idx++) {
             this.offsets.push(agg);
@@ -23841,66 +23856,35 @@ class RowHeightService {
     height(rowIndex) {
         return this.heights[rowIndex];
     }
-    expandDetail(rowIndex) {
-        if (this.height(rowIndex) === this.rowHeight) {
-            this.updateRowHeight(rowIndex, this.detailRowHeight);
-        }
-    }
-    collapseDetail(rowIndex) {
-        if (this.height(rowIndex) > this.rowHeight) {
-            this.updateRowHeight(rowIndex, this.detailRowHeight * -1);
-        }
-    }
-    isExpanded(rowIndex) {
-        return this.height(rowIndex) > this.rowHeight;
-    }
     index(position) {
-        if (position < 0) {
-            return undefined;
-        }
-        const result = this.offsets.reduce((prev, current, idx) => {
-            if (prev !== undefined) {
-                return prev;
-            }
-            else if (current === position) {
-                return idx;
+        for (let i = 0; i < this.offsets.length; i++) {
+            if (position === this.offsets[i]) {
+                return i;
             }
-            else if (current > position) {
-                return idx - 1;
+            if (position < this.offsets[i]) {
+                return i - 1;
             }
-            return undefined;
-        }, undefined);
-        return result === undefined ? this.total - 1 : result;
-    }
-    offset(rowIndex, adjustIndex = false) {
-        if (adjustIndex) {
-            let targetOffset = 0;
-            let targetIndex = 0;
-            for (let i = 0; i < rowIndex; i++) {
-                targetOffset += this.rowHeight;
-                targetIndex++;
-                if (targetIndex === rowIndex) {
-                    return targetOffset;
-                }
-                if (this.isExpanded(i)) {
-                    targetOffset += this.detailRowHeight;
-                    targetIndex++;
-                    if (targetIndex === rowIndex) {
-                        return targetOffset;
-                    }
-                }
-            }
-            return targetOffset;
         }
+        return this.total - 1;
+    }
+    offset(rowIndex) {
         return this.offsets[rowIndex];
     }
     totalHeight() {
-        return this.heights.reduce((prev, curr) => prev + curr, 0);
+        if (!this.offsets.length) {
+            return 0;
+        }
+        const lastOffset = this.offsets[this.offsets.length - 1];
+        const lastHeight = this.heights[this.heights.length - 1];
+        return lastOffset + lastHeight;
     }
-    updateRowHeight(rowIndex, value) {
-        if (this.total > 0) {
-            this.heights[rowIndex] += value;
-            this.offsets = update(this.offsets, rowIndex, value);
+    update(startIndex, rowHeights) {
+        let agg = this.offsets[startIndex];
+        for (let i = startIndex; i < this.heights.length; i++) {
+            this.offsets[i] = agg;
+            const currHeight = rowHeights[i - startIndex] || this.heights[i];
+            agg += currHeight;
+            this.heights[i] = currHeight;
         }
     }
 }
@@ -23910,8 +23894,10 @@ class RowHeightService {
  */
 class ScrollAction {
     offset;
-    constructor(offset) {
+    changeVirtualData;
+    constructor(offset, changeVirtualData) {
         this.offset = offset;
+        this.changeVirtualData = changeVirtualData;
     }
 }
 /**
@@ -23936,16 +23922,29 @@ const SCROLL_BOTTOM_THRESHOLD = 2;
  */
 class ScrollerService {
     scrollObservable;
-    firstLoaded = 0;
-    lastLoaded;
-    lastScrollTop;
-    take;
-    total;
+    ctx;
+    total = 0;
     rowHeightService;
+    table = null;
+    tableBody = null;
+    container = null;
+    scrollHeightContainer = null;
+    scrollableVirtual = false;
+    tableTransformOffset = 0;
+    virtualSkip = 0;
+    virtualPageSize = 0;
+    firstToLoad = 0;
+    lastLoaded = 0;
+    scrollSyncing = false;
+    take;
     scrollSubscription;
     subscription;
-    constructor(scrollObservable) {
+    lastScrollTop = 0;
+    firstLoaded = 0;
+    expandedRows = {};
+    constructor(scrollObservable, ctx) {
         this.scrollObservable = scrollObservable;
+        this.ctx = ctx;
     }
     create(rowHeightService, skip, take, total) {
         this.rowHeightService = rowHeightService;
@@ -23954,13 +23953,50 @@ class ScrollerService {
         this.take = take;
         this.total = total;
         this.lastScrollTop = 0;
-        const subject = new BehaviorSubject(new ScrollAction(this.rowHeightService.offset(skip)));
+        const offset = this.rowHeightService.offset(skip);
+        const subject = new BehaviorSubject(new ScrollAction(offset, this.scrollableVirtual && (Boolean(this.ctx.grid?.pageable) || Boolean(this.ctx.grid?.group?.length))));
         this.subscription = Observable.create(observer => {
             this.unsubscribe();
             this.scrollSubscription = this.scrollObservable.subscribe(x => this.onScroll(x, observer));
         }).subscribe(x => subject.next(x));
         return subject;
     }
+    reset(skipScroll = false) {
+        if (!skipScroll) {
+            this.firstToLoad = 0;
+            this.firstLoaded = 0;
+            this.lastLoaded = 0;
+            this.virtualSkip = 0;
+        }
+        this.rowHeightService = undefined;
+        if (skipScroll) {
+            this.scrollSyncing = true;
+        }
+        if (!skipScroll && this.container && this.container.scrollTop !== 0) {
+            this.scrollSyncing = true;
+            this.container.scrollTop = 0;
+            this.lastScrollTop = 0;
+            this.translate(0, true);
+            this.tableTransformOffset = 0;
+        }
+    }
+    update(skipAdjust = false) {
+        const itemHeights = this.getItemHeights();
+        if (this.firstLoaded > this.firstToLoad) {
+            // Scrolled up
+            const count = Math.min(this.firstLoaded - this.firstToLoad, this.take);
+            const newItemsHeight = this.getTotalHeight(count, itemHeights);
+            const newItemsExpectedHeight = this.getExpectedTotalHeight(count);
+            const diff = newItemsHeight - newItemsExpectedHeight;
+            if (!skipAdjust && diff !== 0) {
+                this.adjustScroll(diff);
+            }
+        }
+        this.rowHeightService?.update(this.firstToLoad, itemHeights);
+        this.scrollHeightContainer && this.setScrollHeightContainerHeight();
+        this.firstLoaded = this.firstToLoad;
+        this.lastLoaded = this.firstLoaded + itemHeights.length - 1;
+    }
     destroy() {
         this.unsubscribe();
         if (this.subscription) {
@@ -23968,42 +24004,49 @@ class ScrollerService {
         }
     }
     onScroll({ scrollTop, offsetHeight, scrollHeight, clientHeight }, observer) {
+        if (this.scrollSyncing) {
+            this.scrollSyncing = false;
+            return;
+        }
         if (!isDocumentAvailable() || (this.lastScrollTop === scrollTop)) {
             return;
         }
         const up = this.lastScrollTop >= scrollTop;
+        const down = !up;
         this.lastScrollTop = scrollTop;
         let firstItemIndex = this.rowHeightService.index(scrollTop);
-        let firstItemOffset = this.rowHeightService.offset(firstItemIndex);
         const lastItemIndex = this.rowHeightService.index(scrollTop + offsetHeight);
-        if (!up) {
-            if (lastItemIndex >= this.lastLoaded && this.lastLoaded < this.total) {
-                const overflow = (firstItemIndex + this.take) - this.total;
-                if (overflow > 0) {
-                    firstItemIndex = firstItemIndex - overflow;
-                    firstItemOffset = this.rowHeightService.offset(firstItemIndex);
-                }
-                this.firstLoaded = firstItemIndex;
-                observer.next(new ScrollAction(firstItemOffset));
-                let nextTake = this.firstLoaded + this.take;
-                this.lastLoaded = Math.min(nextTake, this.total);
-                nextTake = nextTake > this.total ? this.total - this.firstLoaded : this.take;
-                observer.next(new PageAction(this.firstLoaded, this.take));
-            }
-            else {
-                const atBottom = scrollHeight - clientHeight - scrollTop < SCROLL_BOTTOM_THRESHOLD;
-                if (atBottom) {
-                    observer.next(new ScrollBottomAction());
-                }
+        const overflow = Math.max(firstItemIndex + (this.virtualPageSize || this.take) - this.total, 0);
+        firstItemIndex = Math.max(firstItemIndex - overflow, 0);
+        if (lastItemIndex < this.lastLoaded) {
+            this.lastLoaded = lastItemIndex;
+        }
+        if (down) {
+            const atBottom = scrollHeight - clientHeight - scrollTop < SCROLL_BOTTOM_THRESHOLD;
+            if (atBottom) {
+                observer.next(new ScrollBottomAction());
             }
         }
-        if (up && firstItemIndex < this.firstLoaded) {
-            const nonVisibleBuffer = Math.floor(this.take * 0.3);
-            this.firstLoaded = Math.max(firstItemIndex - nonVisibleBuffer, 0);
-            observer.next(new ScrollAction(this.rowHeightService.offset(this.firstLoaded)));
-            this.lastLoaded = Math.min(this.firstLoaded + this.take, this.total);
-            observer.next(new PageAction(this.firstLoaded, this.take));
+        if (!this.scrollableVirtual) {
+            return;
+        }
+        if (down && lastItemIndex >= this.lastLoaded && this.lastLoaded < this.total - 1) {
+            this.firstToLoad = firstItemIndex;
+            this.loadPage(observer);
+        }
+        else if (up && firstItemIndex < this.firstLoaded) {
+            const nonVisibleBuffer = Math.max(Math.floor((this.virtualPageSize || this.take) * 0.3) - overflow, 0);
+            this.firstToLoad = Math.max(firstItemIndex - nonVisibleBuffer, 0);
+            this.loadPage(observer);
+        }
+    }
+    loadPage(observer) {
+        if (!this.rowHeightService) {
+            return;
         }
+        this.translate(this.rowHeightService.offset(this.firstToLoad));
+        observer.next(new ScrollAction(this.rowHeightService.offset(this.firstToLoad)));
+        this.virtualPageChange(this.firstToLoad, observer);
     }
     unsubscribe() {
         if (this.scrollSubscription) {
@@ -24011,6 +24054,87 @@ class ScrollerService {
             this.scrollSubscription = undefined;
         }
     }
+    translate(dY, forceSet) {
+        if (this.scrollableVirtual && this.table) {
+            if (forceSet) {
+                this.table.style.transform = 'translateY(' + dY + 'px)';
+            }
+            else {
+                this.tableTransformOffset = dY;
+            }
+        }
+    }
+    adjustScroll(scrollOffset, initialAdjust = false) {
+        if (Number.isNaN(scrollOffset)) {
+            return;
+        }
+        this.scrollSyncing = true;
+        if (this.container) {
+            if (initialAdjust) {
+                this.container.scrollTop = scrollOffset;
+                this.translate(scrollOffset, true);
+                this.tableTransformOffset = scrollOffset;
+                this.firstToLoad = this.rowHeightService.index(scrollOffset);
+            }
+            else {
+                this.container.scrollTop += scrollOffset;
+            }
+        }
+    }
+    isExpanded(rowIndex) {
+        return this.expandedRows[rowIndex] || false;
+    }
+    resetVirtualSkip = () => {
+        if (this.scrollableVirtual && this.virtualSkip) {
+            this.virtualSkip = 0;
+        }
+    };
+    setScrollHeightContainerHeight() {
+        if (this.scrollableVirtual) {
+            let containerHeight = this.rowHeightService?.totalHeight() || 0;
+            containerHeight = isFirefox ? Math.min(firefoxMaxHeight, containerHeight) : containerHeight;
+            this.scrollHeightContainer.style.height = containerHeight + 'px';
+        }
+        else {
+            this.scrollHeightContainer.style.height = '0';
+        }
+    }
+    getItemHeights() {
+        const result = [];
+        if (this.tableBody) {
+            Array.from(this.tableBody.children).forEach((item, index) => {
+                const itemHeight = item.getBoundingClientRect().height;
+                if (item.classList.contains('k-detail-row')) {
+                    result[result.length - 1] += itemHeight;
+                    this.expandedRows[index] = true;
+                }
+                else {
+                    result.push(itemHeight);
+                }
+            });
+        }
+        return result;
+    }
+    getTotalHeight(count, itemHeights) {
+        return itemHeights.slice(0, count).reduce((sum, current) => sum + current, 0);
+    }
+    getExpectedTotalHeight(count) {
+        const service = this.rowHeightService;
+        if (!service) {
+            return 0;
+        }
+        const lastItemIndex = this.firstToLoad + (count - 1);
+        return service.offset(lastItemIndex) + service.height(lastItemIndex) - service.offset(this.firstToLoad);
+    }
+    virtualPageChange = (skip, observer) => {
+        if (this.ctx.grid.pageable || this.ctx.grid.group?.length) {
+            this.virtualSkip = skip;
+            observer.next(new ScrollAction(this.rowHeightService?.offset(skip) || 0, true));
+        }
+        else if (skip !== this.ctx.grid.skip) {
+            observer.next(new PageAction(Math.max(0, skip), this.take));
+        }
+    };
 }
 
 /**
@@ -24304,8 +24428,8 @@ const SCROLLER_FACTORY_TOKEN = new InjectionToken('grid-scroll-service-factory')
 /**
  * @hidden
  */
-function DEFAULT_SCROLLER_FACTORY(observable) {
-    return new ScrollerService(observable);
+function DEFAULT_SCROLLER_FACTORY(observable, ctx) {
+    return new ScrollerService(observable, ctx);
 }
 const wheelDeltaY = (e) => {
     const deltaY = e.wheelDeltaY;
@@ -24322,7 +24446,7 @@ const preventLockedScroll = (args, element) => {
     const scrollTop = element.scrollTop;
     const allowScroll = (scrollTop === 0 && 0 < delta) || (element.scrollHeight <= element.offsetHeight + scrollTop && delta < 0);
     if (!allowScroll) {
-        event.preventDefault();
+        args.preventDefault();
     }
 };
 const translateY = (renderer, value) => el => renderer.setStyle(el, "transform", `translateY(${value}px)`);
@@ -24378,9 +24502,9 @@ class ListComponent {
     contentScroll = new EventEmitter();
     pageChange = new EventEmitter();
     scrollBottom = new EventEmitter();
-    totalHeight;
     columnsStartIdx = 0;
     allItems = [];
+    itemsToRender = [];
     get showFooter() {
         return this.groupable && this.groupable.showFooter;
     }
@@ -24406,6 +24530,7 @@ class ListComponent {
     columnsEndIdx;
     viewportColumnsWidth;
     scrollLeft = 0;
+    virtualPageSize;
     observer;
     get lockedLeafColumns() {
         return this.columns.lockedLeafColumns;
@@ -24439,6 +24564,8 @@ class ListComponent {
     columnUpdateFrame;
     hasLockedContainer;
     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) {
         this.changeNotification = changeNotification;
         this.suspendService = suspendService;
@@ -24456,14 +24583,24 @@ class ListComponent {
         this.pdfService = pdfService;
         this.columnInfo = columnInfo;
         this.dataMappingService = dataMappingService;
-        this.scroller = scrollerFactory(this.dispatcher);
-        this.subscriptions = detailsService.changes.subscribe(x => this.detailExpand(x));
+        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(this.pdfService.restoreDOMVirtualization.subscribe(() => {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.init();
+                this.setScrollerOptions();
+                this.scroller.update();
+            });
+        }));
     }
     ngOnInit() {
         this.minRowHeight = this.isVirtual ? 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(() => {
+            this.skipScroll = this.isVirtual;
+        }));
         this.subscriptions.add(this.ngZone.runOutsideAngular(this.handleRowNavigationLocked.bind(this)));
         this.subscriptions.add(merge(this.columns.changes, this.resizeService.changes).subscribe(() => {
             if (this.virtualColumns) {
@@ -24482,48 +24619,110 @@ class ListComponent {
         const changesInSkip = changes['skip'];
         const hasInitialSkip = changesInSkip && changesInSkip.firstChange && changesInSkip.currentValue > 0;
         if (hasInitialSkip) {
-            this.handleInitialScrollToSkip();
+            this.handleSkipOnData = true;
+        }
+        if (isChanged$1('isVirtual', changes)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.scroller.reset();
+                this.rowHeightService = this.scroller.rowHeightService = new RowHeightService(this.total, this.rowHeight || this.minRowHeight);
+                this.setScrollerOptions();
+                this.scroller.update();
+            });
         }
         if (isChanged$1("skip", changes) && !this.rebind) {
             this.skipScroll = true;
-            this.container.nativeElement.scrollTop = this.rowHeightService.offset(this.skip);
+            this.container.nativeElement.scrollTop = (this.isVirtual && this.ctx.grid?.pageable) ? 0 : this.rowHeightService.offset(this.skip);
         }
         if (anyChanged(['total', 'take'], changes)) {
             this.init();
         }
         this.rebind = false;
     }
+    zoneSub;
+    get totalIsAllItems() {
+        return this.isVirtual && (Boolean(this.ctx.grid?.pageable || this.ctx.grid?.group?.length));
+    }
     ngDoCheck() {
         if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
             this.updateViewportColumns();
         }
-        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !isPresent(this.ctx.grid.pageSize);
-        if (shouldCalculatePageSize) {
-            const calculatedPageSize = this.calcVirtualPageSize();
+        if (!isPresent(this.virtualPageSize) && !this.ctx.grid?.pageable && isPresent(this.ctx.grid?.pageSize)) {
+            this.virtualPageSize = this.ctx.grid.pageSize;
+        }
+        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && !isPresent(this.virtualPageSize) && (!isPresent(this.ctx.grid?.pageSize) || this.ctx.grid?.pageable);
+        const previousTotal = this.allItems.length;
+        this.allItems = this.dataMappingService.dataMapper(this.data, this.nonLockedColumnsToRender, this.lockedLeafColumns, this.detailTemplate, this.showFooter);
+        if (!this.isVirtual || (this.isVirtual && !this.ctx.grid?.pageable && !this.ctx.grid?.group?.length)) {
+            this.itemsToRender = this.allItems;
+        }
+        const totalChanged = previousTotal !== this.allItems.length;
+        if (this.totalIsAllItems && totalChanged) {
+            this.scroller.reset(this.skipScroll);
+            this.scroller.total = this.allItems.length;
+        }
+        if (shouldCalculatePageSize || !isPresent(this.scroller.rowHeightService)) {
+            const calculatedPageSize = this.virtualPageSize ?? this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
                 this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                    this.ctx.grid.pageSize = calculatedPageSize;
-                    this.ngZone.run(() => {
-                        this.pageChange.emit({
-                            skip: this.skip || 0,
-                            take: calculatedPageSize
+                    if (!isPresent(this.ctx.grid?.pageSize)) {
+                        this.ctx.grid.pageSize = calculatedPageSize;
+                        this.ngZone.run(() => {
+                            this.pageChange.emit({
+                                skip: this.skip || 0,
+                                take: calculatedPageSize
+                            });
                         });
-                    });
+                    }
+                    if (this.ctx.grid?.pageable || this.ctx.grid?.group?.length) {
+                        this.virtualPageSize = this.scroller.virtualPageSize = calculatedPageSize;
+                        this.ngZone.run(() => this.itemsToRender = this.allItems.slice(this.scroller.virtualSkip, this.scroller.virtualSkip + this.virtualPageSize));
+                    }
                 });
             }
         }
-        this.allItems = this.dataMappingService.dataMapper(this.data, this.nonLockedColumnsToRender, this.lockedLeafColumns, this.detailTemplate, this.showFooter);
+        if (!this.zoneSub) {
+            this.zoneSub = this.ngZone.onStable.subscribe(() => {
+                if (!this.scroller.rowHeightService) {
+                    const total = this.isVirtual && (this.ctx.grid?.pageable || this.ctx.grid?.group?.length) ? this.allItems.length : this.total;
+                    this.scroller.rowHeightService = this.rowHeightService = new RowHeightService(total, this.rowHeight || this.minRowHeight);
+                }
+                if (this.allItems.length && this.handleSkipOnData && this.isVirtual && this.skip > 0 && this.total > 0) {
+                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                        this.scroller.adjustScroll(this.scroller.rowHeightService.offset(this.skip), true);
+                        this.handleSkipOnData = false;
+                    });
+                }
+                if (this.isVirtual && this.ctx.grid?.group?.length && this.scroller.total !== this.allItems.length) {
+                    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();
+                // 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);
+                    if (offset > this.container.nativeElement.scrollTop) {
+                        this.scroller.adjustScroll(offset - this.container.nativeElement.scrollTop);
+                    }
+                    this.scrollToIndex = null;
+                }
+                if (this.isVirtual) {
+                    this.ctx.grid?.updateNavigationMetadata();
+                    this.resetNavigationViewport();
+                }
+                this.zoneSub.unsubscribe();
+                this.zoneSub = null;
+            });
+        }
     }
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
         }
-        if (this.skip && this.isVirtual) {
-            this.container.nativeElement.scrollTop = this.rowHeightService.offset(this.skip);
-        }
-        this.resetNavigationViewport();
         this.attachContainerScroll();
         this.initResizeService();
+        this.setScrollerOptions();
     }
     ngAfterViewChecked() {
         const isLocked = this.isLocked;
@@ -24541,6 +24740,10 @@ class ListComponent {
         if (this.subscriptions) {
             this.subscriptions.unsubscribe();
         }
+        if (this.zoneSub) {
+            this.zoneSub.unsubscribe();
+            this.zoneSub = null;
+        }
         if (this.resizeService) {
             this.resizeService.destroy();
         }
@@ -24551,10 +24754,16 @@ class ListComponent {
         if (this.suspendService.scroll) {
             return;
         }
-        this.rowHeightService = new RowHeightService(this.total, this.rowHeight || this.minRowHeight, this.detailRowHeight);
-        this.totalHeight = this.rowHeightService.totalHeight();
+        const total = this.isVirtual && this.ctx.grid?.pageable ? this.ctx.grid.pageSize : this.total;
+        this.rowHeightService = this.scroller.rowHeightService = new RowHeightService(total, this.rowHeight || this.minRowHeight);
         if (!isUniversal()) {
-            this.ngZone.runOutsideAngular(this.createScroller.bind(this));
+            if (this.skipScroll) {
+                this.setScrollerOptions();
+                this.scroller.update();
+            }
+            else {
+                this.ngZone.runOutsideAngular(this.createScroller.bind(this));
+            }
         }
     }
     lockedScroll() {
@@ -24618,14 +24827,47 @@ class ListComponent {
     get isStacked() {
         return this.ctx.grid?.isStacked;
     }
-    detailExpand({ index, expand }) {
-        if (expand) {
-            this.rowHeightService.expandDetail(index);
+    resetNavigationViewport() {
+        if (!isDocumentAvailable) {
+            return;
         }
-        else {
-            this.rowHeightService.collapseDetail(index);
+        if (this.skipScroll || this.scroller.scrollSyncing) {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.skipScroll = this.scroller.scrollSyncing = false;
+                });
+            });
+            return;
+        }
+        if (!this.container || !this.navigationService.tableEnabled ||
+            !this.navigationService.needsViewport() || this.allItems.length === 0) {
+            return;
+        }
+        const { scrollTop, offsetHeight } = this.container.nativeElement;
+        const scrollBottom = scrollTop + offsetHeight;
+        const firstItemIndex = this.rowHeightService.index(scrollTop);
+        const lastItemIndex = this.rowHeightService.index(scrollBottom);
+        const lastItemOffset = this.rowHeightService.offset(lastItemIndex);
+        let viewportStart = firstItemIndex;
+        let viewportEnd = lastItemIndex;
+        if (isPresent(this.detailTemplate)) {
+            viewportStart *= 2;
+            viewportEnd *= 2;
+            const firstItemHeight = this.rowHeightService.offset(firstItemIndex);
+            if (firstItemHeight + this.rowHeight < scrollTop) {
+                viewportStart++;
+            }
+            const lastItemHeight = this.rowHeightService.height(lastItemIndex);
+            const lastItemExpanded = this.scroller.isExpanded(lastItemIndex);
+            const lastItemDetailOverflows = lastItemOffset + lastItemHeight > scrollBottom;
+            if (lastItemExpanded && !lastItemDetailOverflows) {
+                viewportEnd++;
+            }
         }
-        this.totalHeight = this.rowHeightService.totalHeight();
+        const offset = this.isVirtual && this.ctx.grid?.pageable ? this.skip : 0;
+        this.navigationService.setViewport(viewportStart + offset, viewportEnd + offset);
+    }
+    detailExpand() {
         this.resetNavigationViewport();
     }
     attachContainerScroll() {
@@ -24669,12 +24911,16 @@ class ListComponent {
         this.scrollerSubscription.add(observable.pipe(filter((x) => x instanceof ScrollBottomAction))
             .subscribe(() => this.scrollBottom.emit()));
     }
-    scroll({ offset = 0 }) {
+    scroll(scrollActionArgs) {
+        this.skipScroll = false;
         if (this.isVirtual) {
             [
                 maybeNativeElement(this.table),
                 maybeNativeElement(this.lockedTable)
-            ].filter(isPresent).forEach(translateY(this.renderer, offset));
+            ].filter(isPresent).forEach(translateY(this.renderer, scrollActionArgs.offset));
+            if (this.virtualPageSize && scrollActionArgs.changeVirtualData && (this.ctx.grid.pageable || this.ctx.grid.group?.length)) {
+                this.ngZone.run(() => this.itemsToRender = this.allItems.slice(this.scroller.virtualSkip, this.scroller.virtualSkip + this.virtualPageSize));
+            }
         }
         this.resetNavigationViewport();
     }
@@ -24684,24 +24930,13 @@ class ListComponent {
             this.lockedContainer.nativeElement.scrollTop = scrollTop;
         }
     }
-    handleInitialScrollToSkip() {
-        const shouldScroll = () => this.isVirtual && this.skip > 0 && this.total > 0;
-        const sub = this.changeNotification.changes
-            .pipe(filter(shouldScroll))
-            .subscribe(() => {
-            this.scrollTo({ row: this.skip });
-            sub.unsubscribe();
-        });
-    }
     handleRowSync() {
         const isLocked = () => isPresent(this.lockedContainer);
         const onStable = () => this.ngZone.onStable.asObservable().pipe(take(1));
         return merge(this.changeNotification.changes, this.groupsService.changes
             .pipe(filter(isLocked), switchMapTo(onStable())), this.editService.changed, this.resizeService.changes, this.columnResizingService.changes
             .pipe(filter(change => change.type === 'end')), this.supportService.changes)
-            .pipe(tap(() => {
-            this.resetNavigationViewport();
-        }), filter(isLocked))
+            .pipe(filter(isLocked))
             .subscribe(() => {
             const scrollTop = this.container.nativeElement.scrollTop;
             const scrollLeft = this.container.nativeElement.scrollLeft;
@@ -24730,9 +24965,9 @@ class ListComponent {
         if (isPresent(this.detailTemplate) && adjustIndexForDetailTemplate) {
             itemIndex = Math.floor(itemIndex / 2);
         }
-        const offset = this.rowHeightService.offset(itemIndex, !adjustIndexForDetailTemplate);
+        const offset = this.rowHeightService.offset(itemIndex);
         this.container.nativeElement.scrollTop = offset;
-        this.resetNavigationViewport();
+        this.scrollToIndex = itemIndex;
     }
     scrollTo({ row, column }, adjustIndex = false) {
         if (isNumber(row)) {
@@ -24785,39 +25020,8 @@ class ListComponent {
                 return dataAttribute && +dataAttribute === this.ctx.grid.skip + dataItemIndex;
             });
             row && row.scrollIntoView();
-            this.isVirtual && this.resetNavigationViewport();
-        }
-    }
-    resetNavigationViewport() {
-        if (!isDocumentAvailable) {
-            return;
-        }
-        if (!this.container || !this.navigationService.tableEnabled ||
-            !this.navigationService.needsViewport() || this.data.length === 0) {
-            return;
-        }
-        const { scrollTop, offsetHeight } = this.container.nativeElement;
-        const scrollBottom = scrollTop + offsetHeight;
-        const firstItemIndex = this.rowHeightService.index(scrollTop);
-        const lastItemIndex = this.rowHeightService.index(scrollBottom);
-        const lastItemOffset = this.rowHeightService.offset(lastItemIndex);
-        let viewportStart = firstItemIndex;
-        let viewportEnd = lastItemIndex;
-        if (isPresent(this.detailTemplate)) {
-            viewportStart *= 2;
-            viewportEnd *= 2;
-            const firstItemHeight = this.rowHeightService.offset(firstItemIndex);
-            if (firstItemHeight + this.rowHeight < scrollTop) {
-                viewportStart++;
-            }
-            const lastItemHeight = this.rowHeightService.height(lastItemIndex);
-            const lastItemExpanded = this.rowHeightService.isExpanded(lastItemIndex);
-            const lastItemDetailOverflows = lastItemOffset + lastItemHeight > scrollBottom;
-            if (lastItemExpanded && !lastItemDetailOverflows) {
-                viewportEnd++;
-            }
+            this.resetNavigationViewport();
         }
-        this.navigationService.setViewport(viewportStart, viewportEnd);
     }
     cleanupScroller() {
         if (this.scrollerSubscription) {
@@ -24921,6 +25125,14 @@ class ListComponent {
         }
         return 0;
     };
+    setScrollerOptions() {
+        this.scroller.scrollableVirtual = this.isVirtual;
+        this.scroller.table = this.table.nativeElement;
+        this.scroller.tableBody = this.table.nativeElement.tBodies[0];
+        this.scroller.container = this.container.nativeElement;
+        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: "16.2.12", 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: BrowserSupportService }, { token: NavigationService }, { token: ScrollRequestService }, { token: ContextService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }, { token: DataMappingService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
             {
@@ -24958,7 +25170,9 @@ class ListComponent {
                     role="presentation"
                     [groups]="groups"
                     [isLocked]="true"
-                    [rowsToRender]="allItems"
+                    [rowsToRender]="itemsToRender"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
@@ -24976,8 +25190,8 @@ class ListComponent {
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
-            <div [style.height.px]="totalHeight"></div>
+        <div class="k-height-container" *ngIf="isVirtual" role="presentation">
+            <div></div>
         </div>
     </div>
     <div 
@@ -25005,7 +25219,7 @@ class ListComponent {
                 <tbody kendoGridTableBody
                     role="rowgroup"
                     [skipGroupDecoration]="isLocked"
-                    [rowsToRender]="allItems"
+                    [rowsToRender]="itemsToRender"
                     [groups]="groups"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"
@@ -25023,20 +25237,22 @@ class ListComponent {
                     [virtualColumns]="virtualColumns"
                     [isLoading]="loading"
                     [isVirtual]="isVirtual"
-                    [cellLoadingTemplate]="cellLoadingTemplate">
+                    [cellLoadingTemplate]="cellLoadingTemplate"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight">
                 </tbody>
             </table>
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
         <div *ngIf="isVirtual" class="k-height-container" role="presentation">
-            <div [style.height.px]="totalHeight"></div>
+            <div></div>
         </div>
         <div *ngIf="virtualColumns && !isStacked" class="k-width-container" role="presentation">
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -25079,7 +25295,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     role="presentation"
                     [groups]="groups"
                     [isLocked]="true"
-                    [rowsToRender]="allItems"
+                    [rowsToRender]="itemsToRender"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
@@ -25097,8 +25315,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
-            <div [style.height.px]="totalHeight"></div>
+        <div class="k-height-container" *ngIf="isVirtual" role="presentation">
+            <div></div>
         </div>
     </div>
     <div 
@@ -25126,7 +25344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <tbody kendoGridTableBody
                     role="rowgroup"
                     [skipGroupDecoration]="isLocked"
-                    [rowsToRender]="allItems"
+                    [rowsToRender]="itemsToRender"
                     [groups]="groups"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"
@@ -25144,14 +25362,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [virtualColumns]="virtualColumns"
                     [isLoading]="loading"
                     [isVirtual]="isVirtual"
-                    [cellLoadingTemplate]="cellLoadingTemplate">
+                    [cellLoadingTemplate]="cellLoadingTemplate"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight">
                 </tbody>
             </table>
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
         <div *ngIf="isVirtual" class="k-height-container" role="presentation">
-            <div [style.height.px]="totalHeight"></div>
+            <div></div>
         </div>
         <div *ngIf="virtualColumns && !isStacked" class="k-width-container" role="presentation">
             <div [style.width.px]="totalWidth"></div>
@@ -29365,9 +29585,7 @@ class GridComponent {
      */
     height;
     /**
-     * Represents the row height in pixels for each Grid row (`tr`) element.
-     * Required for [virtual scrolling]({% slug scrollmmodes_grid %}).
-     * Set `rowHeight` to match the actual DOM row height. The property does not change the height of the rows in the UI.
+     * Sets the `style.height` attribute of each Grid data or group header/footer row (`tr`) element in the DOM in pixels.
      */
     rowHeight;
     /**
@@ -29377,9 +29595,7 @@ class GridComponent {
      */
     adaptiveMode = 'none';
     /**
-     * Represents the height in pixels for each Grid detail row (`tr`) element.
-     * Required for [virtual scrolling]({% slug scrollmmodes_grid %}).
-     * Set `detailRowHeight` to match the actual DOM detail row height. The property does not change the height of the rows in the UI.
+     * Sets the `style.height` attribute of each Grid detail row (`tr.k-detail-row`) element in the DOM in pixels.
      */
     detailRowHeight;
     /**
@@ -29490,14 +29706,14 @@ class GridComponent {
      */
     get showTopPager() {
         const position = this.pageable.position;
-        return !this.isVirtual && this.pageable !== false && ['top', 'both'].indexOf(position) > -1;
+        return this.pageable !== false && ['top', 'both'].indexOf(position) > -1;
     }
     /**
      * @hidden
      */
     get showBottomPager() {
         const position = this.pageable.position;
-        return !this.isVirtual && this.pageable !== false && position !== 'top';
+        return this.pageable !== false && position !== 'top';
     }
     /**
      * @hidden
@@ -29962,7 +30178,7 @@ class GridComponent {
     cellLoadingTemplateChildren;
     get cellLoadingTemplate() {
         if (this._cellLoadingTemplate) {
-            return this._customDetailTemplate;
+            return this._cellLoadingTemplate;
         }
         return this.cellLoadingTemplateChildren ? this.cellLoadingTemplateChildren.first : undefined;
     }
@@ -30492,6 +30708,7 @@ class GridComponent {
     }
     ngOnInit() {
         if (this.navigable.length) {
+            this.ctx.navigable = this.navigable.includes('table');
             this.navigationService.init(this.navigationMetadata(), this.navigable);
         }
         this.isStacked && this.generateStackedColumns();
@@ -30578,6 +30795,15 @@ class GridComponent {
         }
         this.columnRangeChangeSubscription.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (this.isVirtual) {
+            this.ctx.scroller.update();
+            this.listComponent.resetNavigationViewport();
+        }
+    }
     /**
      * @hidden
      */
@@ -31120,12 +31346,6 @@ class GridComponent {
             if (this.columnList.filter(x => x.locked && x.parent && !x.parent.isLocked).length) {
                 throw new Error(ColumnConfigurationErrorMessages.lockedParent);
             }
-            if (this.detailRowHeight && !this.isVirtual) {
-                console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
-            }
-            if (!this.detailRowHeight && this.isVirtual && this.detailTemplate) {
-                console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
-            }
             if (!this.isStacked && stickyColumns && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
                 console.warn(ColumnConfigurationErrorMessages.requiredWidth('Sticky'));
             }
@@ -31193,11 +31413,21 @@ class GridComponent {
     }
     attachStateChangesEmitter() {
         this.stateChangeSubscription =
-            merge(this.pageChange.pipe(map(x => ({
+            merge(this.pageChange.pipe(tap(() => {
+                if (this.pageable) {
+                    this.ctx.scroller?.reset();
+                }
+            }), map(x => ({
                 filter: this.filter, group: this.group, skip: x.skip, sort: this.sort, take: x.take
-            }))), this.sortChange.pipe(map(sort => ({ filter: this.filter, group: this.group, skip: this.skip, sort: sort, take: this.pageSize }))), this.groupChange.pipe(map(group => ({
-                filter: this.filter, group: group, skip: this.skip, sort: this.sort, take: this.pageSize
-            }))), this.filterChange.pipe(map(filter => ({
+            }))), this.sortChange.pipe(tap(() => {
+                this.ctx.scroller?.reset();
+            }), map(sort => ({ filter: this.filter, group: this.group, skip: this.isVirtual && !this.pageable ? 0 : this.skip, sort: sort, take: this.pageSize }))), this.groupChange.pipe(tap(() => {
+                this.ctx.scroller?.reset();
+            }), map(group => ({
+                filter: this.filter, group: group, skip: this.pageable ? this.skip : 0, sort: this.sort, take: (this.pageable || !group?.length) ? this.pageSize : undefined
+            }))), this.filterChange.pipe(tap(() => {
+                this.ctx.scroller?.reset();
+            }), map(filter => ({
                 filter: filter, group: this.group, skip: 0, sort: this.sort, take: this.pageSize
             }))))
                 .subscribe(x => {
@@ -31206,11 +31436,18 @@ class GridComponent {
                 if (this.selectable && this.selectableSettings?.enabled && this.isVirtual) {
                     this.blockArrowSelection = true;
                 }
+                this.isVirtual && this.ctx.scroller?.resetVirtualSkip();
                 this.dataStateChange.emit(x);
                 hasObservers(this.gridStateChange) && this.gridStateChange.emit({ ...this.currentState, ...x });
             });
         this.stateChangeSubscription.add(merge(this.columnReorder, this.columnResize, this.columnVisibilityChange, this.columnLockedChange, this.columnStickyChange).pipe(flatMap(() => this.ngZone.onStable.pipe(take(1))))
-            .subscribe(() => this.ngZone.run(() => hasObservers(this.gridStateChange) && this.gridStateChange.emit(this.currentState))));
+            .subscribe(() => this.ngZone.run(() => {
+            hasObservers(this.gridStateChange) && this.gridStateChange.emit(this.currentState);
+            if (this.isVirtual) {
+                this.ctx.scroller?.update();
+                this.listComponent?.resetNavigationViewport();
+            }
+        })));
     }
     attachEditHandlers() {
         if (!this.editService) {
@@ -31395,12 +31632,25 @@ class GridComponent {
     _rowClass = () => null;
     navigationMetadata() {
         const isVirtual = this.isVirtual;
-        const pageSize = this.pageSize;
-        const dataRows = isVirtual ? this.view.total : pageSize;
+        const dataVirtualization = isVirtual && !this.pageable && !this.group?.length;
+        const groupedVirtual = isVirtual && this.group?.length > 0;
+        let dataRows;
+        if (this.pageable) {
+            dataRows = this.skip + Math.min(this.pageSize, this.view.length); // last page might have less rows than the rest
+        }
+        else {
+            dataRows = this.view.total;
+        }
+        if (groupedVirtual) {
+            dataRows = this.ctx.scroller?.total ?? 0;
+            if (!dataVirtualization) {
+                dataRows += this.skip;
+            }
+        }
         const addRowOffset = this.editService.hasNewItem ? 1 : 0;
         const filterRowOffset = hasFilterRow(this.filterable) ? 1 : 0;
         const headerRows = this.isStacked ? 0 : this.totalColumnLevels + 1 + filterRowOffset + addRowOffset;
-        return new NavigationMetadata(dataRows, headerRows, isVirtual, this.hasPager, isPresent(this.detailTemplate), this.wrapper, this.virtualColumns, this.columnsContainer, this.isStacked);
+        return new NavigationMetadata(dataRows, headerRows, isVirtual, this.hasPager, isPresent(this.detailTemplate), this.wrapper, this.virtualColumns, this.columnsContainer, this.showFooter ? 1 : 0, this.isStacked);
     }
     applyAutoSize() {
         const cols = this.columns.filter((c) => this.autoSize ? c.autoSize !== false : c.autoSize);
@@ -31482,10 +31732,8 @@ class GridComponent {
         }
         if (this.groupsService.isExpanded({ groupIndex: index }) !== expand) {
             this.groupsService.toggleRow({ index }, false);
-            if (this.ctx.dataBindingDirective && isPresent(this.ctx.dataBindingDirective.groupExpand)) {
-                this.ctx.dataBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
-            }
         }
+        this.changeDetectorRef.markForCheck();
     }
     shouldResetSelection(selectableChanges) {
         const previousValue = selectableChanges.previousValue;
@@ -32233,6 +32481,8 @@ class GridComponent {
                     </thead>
                     <tbody kendoGridTableBody
                         [isLoading]="loading"
+                        [rowHeight]="rowHeight"
+                        [detailRowHeight]="detailRowHeight"
                         [groups]="group"
                         [rowsToRender]="rowsToRender"
                         [skip]="skip"
@@ -32347,11 +32597,11 @@ class GridComponent {
         <div #dialogContainer></div>
 
         <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
-
+        <kendo-resize-sensor *ngIf="isVirtual" (resize)="onResize()"></kendo-resize-sensor>
         <div *ngIf="aiAssistantToolbarTool" #windowContainer></div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { 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]", inputs: ["licenseMessage"] }, { kind: "component", type: i53.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i53.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i53.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i53.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i53.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i53.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i53.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i53.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i53.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" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { 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]", inputs: ["licenseMessage"] }, { kind: "component", type: i53.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i53.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i53.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i53.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i53.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i53.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i53.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i53.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i53.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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -33088,6 +33338,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </thead>
                     <tbody kendoGridTableBody
                         [isLoading]="loading"
+                        [rowHeight]="rowHeight"
+                        [detailRowHeight]="detailRowHeight"
                         [groups]="group"
                         [rowsToRender]="rowsToRender"
                         [skip]="skip"
@@ -33202,7 +33454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <div #dialogContainer></div>
 
         <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
-
+        <kendo-resize-sensor *ngIf="isVirtual" (resize)="onResize()"></kendo-resize-sensor>
         <div *ngIf="aiAssistantToolbarTool" #windowContainer></div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
@@ -33213,7 +33465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TableDirective, GridTableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective,
                         ListComponent, DragTargetContainerDirective, DropTargetContainerDirective, DraggableDirective,
                         GridMarqueeDirective, FooterComponent, TableBodyComponent, LoadingComponent, StatusBarComponent,
-                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet, AdaptiveRendererComponent
+                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet, AdaptiveRendererComponent, ResizeSensorComponent
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: BrowserSupportService }, { 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: 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 }]; }, propDecorators: { data: [{
@@ -33611,9 +33863,6 @@ class DataBindingDirective {
             this.rowReorderSubscription.unsubscribe();
         }
     }
-    /**
-     * @hidden
-     */
     ngOnChanges(changes) {
         if (anyChanged(["pageSize", "skip", "sort", "group", "filter"], changes)) {
             this.rebind();
@@ -33656,7 +33905,7 @@ class DataBindingDirective {
         }
     }
     process(state) {
-        if (this.grid.isVirtual && (!isPresent(state.take) || state.take === 0)) {
+        if (this.grid.isVirtual && ((!isPresent(state.take) || state.take === 0) && !state.group?.length)) {
             return {
                 data: [],
                 total: this.originalData?.length || 0
@@ -33672,6 +33921,9 @@ class DataBindingDirective {
         this.filter = filter;
     }
     updateGridData() {
+        if (this.grid.isVirtual && !this.grid.pageable && this.state.group?.length) {
+            this.state.take = undefined;
+        }
         this.grid.data = this.process(this.state);
         this.grid.updateNavigationMetadata();
         this.dataChanged = false;
@@ -34622,336 +34874,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const hasGroups = (items) => items && items.length && items[0].field && items[0].items;
-const groupDescriptorsPresent = (descriptors) => isPresent(descriptors) && descriptors.length > 0;
-const processGroups = (data, state) => process(data, state).data;
-const removeParentDescriptors = (parents, owner) => g => g.field !== owner.field && !parents.some(y => y.field === g.field);
-const findGroup = (groupIndex, groups) => {
-    const parents = [];
-    return {
-        group: groupIndex.split("_").reduce((acc, x) => {
-            const idx = parseInt(x, 10);
-            if (acc.items) {
-                parents.push(acc);
-                return acc.items[idx];
-            }
-            return isArray(acc) ? acc[idx] : acc;
-        }, groups),
-        parents
-    };
-};
-const findChildren = (data, parents) => {
-    const filters = parents.map(p => ({ field: p.field, operator: "eq", value: p.value }));
-    return filterBy(data, {
-        filters: filters,
-        logic: "and"
-    });
-};
-/**
- * @hidden
- */
-const count = (groups, includeFooters = false) => (groups.reduce((acc, group) => {
-    if (!group.skipHeader) {
-        acc++;
-    }
-    if (group.items) {
-        const children = count(group.items, includeFooters);
-        if (includeFooters && children && !group.hideFooter) {
-            acc++;
-        }
-        acc += children;
-    }
-    return acc;
-}, 0));
-/**
- * @hidden
- */
-const noDescriptors = (descriptors) => !isPresent(descriptors) || !descriptors.length;
-/**
- * @hidden
- */
-const slice = (groups, skip, take, includeFooters = false) => {
-    if (!isPresent(take)) {
-        return groups;
-    }
-    const result = [];
-    for (let idx = 0, length = groups.length; idx < length; idx++) {
-        if (take <= 0) {
-            break;
-        }
-        const group = groups[idx];
-        const groupItems = group.items;
-        let itemCount = count(groupItems, includeFooters);
-        if (includeFooters && groupItems.length) {
-            itemCount++;
-        }
-        const skipHeader = skip > 0;
-        if (skip) {
-            skip--;
-            if (itemCount && skip >= itemCount) {
-                skip -= itemCount;
-                continue;
-            }
-        }
-        if (!skipHeader || itemCount) {
-            const items = [];
-            let hideFooter = true;
-            if (!skipHeader) {
-                take--;
-            }
-            if (take) {
-                if (hasGroups(groupItems)) {
-                    const children = slice(groupItems, skip, take, includeFooters);
-                    items.push(...children);
-                    take -= count(children, includeFooters);
-                }
-                else {
-                    items.push(...groupItems.slice(skip, Math.min(skip + take, groupItems.length)));
-                    take -= items.length;
-                }
-                if (take && includeFooters) {
-                    hideFooter = false;
-                    take--;
-                }
-                skip = 0;
-            }
-            result.push({
-                aggregates: group.aggregates,
-                field: group.field,
-                hideFooter,
-                items,
-                offset: idx,
-                skipHeader,
-                value: group.value
-            });
-        }
-    }
-    return result;
-};
-const skippedHeaders = (groupItem) => {
-    let total = 0;
-    while (groupItem) {
-        if (groupItem.skipHeader) {
-            total++;
-        }
-        groupItem = groupItem.items && groupItem.items[0] || null;
-    }
-    return total;
-};
-/**
- * A directive which encapsulates the in-memory handling of grouping with virtual scrolling.
- * @remarks
- * Applied to: {@link GridComponent}.
- */
-class GroupBindingDirective extends DataBindingDirective {
-    groupsService;
-    /**
-     * The array of data which will be used to populate the Grid.
-     */
-    set kendoGridGroupBinding(value) {
-        this.groups = null;
-        this.grid.resetGroupsState();
-        this.data = value;
-    }
-    /**
-     * @hidden
-     */
-    set data(value) {
-        this.originalData = value || [];
-        this.dataChanged = true;
-    }
-    /**
-     * Defines the descriptors by which the data will be sorted.
-     */
-    set sort(value) {
-        const noCurrentDescriptors = noDescriptors(this.state.sort);
-        const noIncomingDescriptors = noDescriptors(value);
-        const clear = this.state.sort !== value && !(noCurrentDescriptors && noIncomingDescriptors);
-        this.grid.sort = this.state.sort = value;
-        if (clear) {
-            this.groups = null;
-            this.grid.resetGroupsState();
-        }
-    }
-    /**
-     * Defines the descriptor by which the data will be filtered.
-     */
-    set filter(value) {
-        const clear = diffFilters(this.state.filter, value);
-        if (clear) {
-            this.state.filter = value;
-            this.grid.filter = cloneFilters(value);
-            this.groups = null;
-            this.grid.resetGroupsState();
-        }
-    }
-    /**
-     * Defines the descriptors by which the data will be grouped.
-     */
-    set group(value) {
-        // don't clear if no groups are present in previous and current value
-        const groupsPresent = groupDescriptorsPresent(this.state.group) || groupDescriptorsPresent(value);
-        const clear = this.state.group !== value && groupsPresent;
-        this.grid.group = this.state.group = value;
-        if (clear) {
-            this.groups = null;
-            this.grid.resetGroupsState();
-            this.skip = 0;
-        }
-    }
-    groups;
-    gridSubs = new Subscription();
-    constructor(changeDetector, localDataChangesService, ctxService, groupsService) {
-        super(ctxService.grid, changeDetector, localDataChangesService, null, ctxService);
-        this.groupsService = groupsService;
-        ctxService.dataBindingDirective = this;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.gridSubs.add(this.grid.groupExpand.subscribe(this.groupExpand.bind(this)));
-        this.gridSubs.add(this.grid.groupCollapse.subscribe(this.groupCollapse.bind(this)));
-    }
-    ngAfterContentInit() {
-        if (isDevMode() && this.grid.isGroupExpanded) {
-            throw new Error(GridConfigurationErrorMessages.groupBindingDirectives);
-        }
-    }
-    ngOnDestroy() {
-        this.gridSubs.unsubscribe();
-    }
-    /**
-     * @hidden
-     */
-    toggleAll(expand) {
-        this.skip = 0;
-        this.grid.scrollTo({ row: 0, column: 0 });
-        this.groups.forEach((gr, idx) => {
-            const expanded = this.groupsService.isExpanded({
-                group: gr,
-                groupIndex: idx.toString(),
-                parentGroup: undefined
-            });
-            const performToggle = (expand && !expanded) || (!expand && expanded);
-            if (performToggle) {
-                this.grid.groupsService.toggleRow({
-                    type: 'group',
-                    data: gr,
-                    index: idx.toString(),
-                    level: 0,
-                    parentGroup: undefined
-                });
-                this[expand ? 'groupExpand' : 'groupCollapse']({ groupIndex: idx.toString() });
-            }
-        });
-    }
-    /**
-     * Collapses all expanded root level groups.
-     */
-    collapseAll() {
-        this.toggleAll(false);
-    }
-    /**
-     * Expands all expanded root level groups.
-     */
-    expandAll() {
-        this.toggleAll(true);
-    }
-    /**
-     * @hidden
-     */
-    groupExpand({ groupIndex }) {
-        const { group, parents } = findGroup(groupIndex, this.groups);
-        if (!group) {
-            return;
-        }
-        this.groupsService.expandChildren(groupIndex);
-        if (!group.items.length) {
-            const descriptors = this.state.group.filter(removeParentDescriptors(parents, group));
-            const children = findChildren(this.originalData, parents.concat(group));
-            group.items = processGroups(children, {
-                filter: this.state.filter,
-                group: descriptors,
-                sort: this.state.sort
-            });
-        }
-        this.grid.data = this.dataResult(this.state.skip, this.state.take);
-    }
-    /**
-     * @hidden
-     */
-    groupCollapse({ groupIndex }) {
-        const { group } = findGroup(groupIndex, this.groups);
-        if (group) {
-            group.items = [];
-        }
-        else {
-            return;
-        }
-        this.grid.data = this.dataResult(this.state.skip, this.state.take);
-    }
-    process(state) {
-        if (this.grid.isVirtual && (!isPresent(state.take) || state.take === 0)) {
-            return {
-                data: [],
-                total: this.originalData?.length || 0
-            };
-        }
-        if (state.group && state.group.length) {
-            const groups = this.processGroups(state);
-            this.grid.skip -= skippedHeaders(groups.data[0]);
-            return groups;
-        }
-        else {
-            this.groups = null;
-        }
-        return super.process(state);
-    }
-    processGroups(state) {
-        if (!this.groups || !this.groups.length) {
-            this.groups = processGroups(this.originalData, {
-                filter: state.filter,
-                group: state.group,
-                sort: state.sort
-            });
-        }
-        return this.dataResult(state.skip, state.take);
-    }
-    dataResult(skip, take) {
-        const includeFooters = this.grid.showGroupFooters;
-        return {
-            data: slice(this.groups, skip, take, includeFooters),
-            total: count(this.groups, includeFooters)
-        };
-    }
-    applyState({ skip, take, sort, group, filter }) {
-        this.skip = skip;
-        this.state.take = take;
-        // this.pageSize = take; // do need to update take as the process with slice correctly
-        this.sort = sort;
-        this.group = group;
-        this.filter = filter;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupBindingDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: ContextService }, { token: GroupsService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupBindingDirective, isStandalone: true, selector: "[kendoGridGroupBinding]", inputs: { kendoGridGroupBinding: "kendoGridGroupBinding", sort: "sort", filter: "filter", group: "group" }, exportAs: ["kendoGridGroupBinding"], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupBinding]',
-                    exportAs: 'kendoGridGroupBinding',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: ContextService }, { type: GroupsService }]; }, propDecorators: { kendoGridGroupBinding: [{
-                type: Input,
-                args: ["kendoGridGroupBinding"]
-            }], sort: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }] } });
-
 /**
  * Represents the Kendo UI GridSpacer component for Angular.
  * Used to give additional white space between the Pager inner elements,
@@ -37473,7 +37395,6 @@ const KENDO_GRID_DECLARATIONS = [
     ExternalEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
-    GroupBindingDirective,
     GridMarqueeDirective,
     GridSpacerComponent,
     GridToolbarFocusableDirective,
@@ -37500,7 +37421,6 @@ const KENDO_GRID_EXPORTS = [
     SelectionDirective,
     HighlightDirective,
     CustomMessagesComponent,
-    GroupBindingDirective,
     TemplateEditingDirective,
     ReactiveEditingDirective,
     InCellEditingDirective,
@@ -37592,9 +37512,9 @@ const KENDO_GRID = [
  */
 class GridModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, HighlightDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GroupBindingDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, FormComponent, DialogFormComponent, FormFormFieldComponent, UndoRedoDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, TableDirective,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, HighlightDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, FormComponent, DialogFormComponent, FormFormFieldComponent, UndoRedoDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, TableDirective,
             UndoCommandToolbarDirective,
-            RedoCommandToolbarDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, HighlightDirective, CustomMessagesComponent, GroupBindingDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, UndoRedoDirective, UndoCommandToolbarDirective, RedoCommandToolbarDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent] });
+            RedoCommandToolbarDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, HighlightDirective, CustomMessagesComponent, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, EditCommandToolbarDirective, SaveCommandToolbarDirective, RemoveCommandToolbarDirective, CancelCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, SortCommandToolbarDirective, FilterCommandToolbarDirective, AIAssistantToolbarDirective, GroupCommandToolbarDirective, SelectAllToolbarToolComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, UndoRedoDirective, UndoCommandToolbarDirective, RedoCommandToolbarDirective, i54.ToolBarComponent, i54.ToolbarCustomMessagesComponent, i54.ToolBarButtonComponent, i54.ToolBarButtonGroupComponent, i54.ToolBarDropDownButtonComponent, i54.ToolBarSeparatorComponent, i54.ToolBarSpacerComponent, i54.ToolBarSplitButtonComponent, i54.ToolBarToolComponent, i53.CustomMessagesComponent, i53.PagerFocusableDirective, i53.PagerInfoComponent, i53.PagerInputComponent, i53.PagerNextButtonsComponent, i53.PagerNumericButtonsComponent, i53.PagerPageSizesComponent, i53.PagerPrevButtonsComponent, i53.PagerTemplateDirective, i53.PagerComponent, i53.PagerSpacerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, providers: [
             PopupService,
             ResizeBatchService,
@@ -37721,5 +37641,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AIAssistantToolbarDirective, AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CancelCommandToolbarDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_AI_REQUEST_OPTIONS, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditCommandToolbarDirective, EditService as EditServiceClass, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterCommandToolbarDirective, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarAIResponseErrorEvent, GridToolbarAIResponseSuccessEvent, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupCommandToolbarDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, HighlightDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RedoCommandToolbarDirective, RemoveCommandDirective, RemoveCommandToolbarDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, SaveCommandToolbarDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectAllToolbarToolComponent, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortCommandToolbarDirective, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, UndoCommandToolbarDirective, UndoRedoDirective, UndoRedoEvent, convertDateStringsInFilter, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isDateField, isFilterable, slice };
+export { AIAssistantToolbarDirective, AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CancelCommandToolbarDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_AI_REQUEST_OPTIONS, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditCommandToolbarDirective, EditService as EditServiceClass, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterCommandToolbarDirective, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarAIResponseErrorEvent, GridToolbarAIResponseSuccessEvent, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupCommandToolbarDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, HighlightDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RedoCommandToolbarDirective, RemoveCommandDirective, RemoveCommandToolbarDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, SaveCommandToolbarDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectAllToolbarToolComponent, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortCommandToolbarDirective, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, UndoCommandToolbarDirective, UndoRedoDirective, UndoRedoEvent, convertDateStringsInFilter, defaultTrackBy, hasFilterMenu, hasFilterRow, isDateField, isFilterable };