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

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

@@ -14139,7 +14139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents a directive that manages keyboard navigation for a column menu item. [See example](slug:columnmenu_grid#customizing-the-content).
+ * Represents a directive that manages keyboard navigation for a column menu item ([see example](slug:columnmenu_grid#customizing-the-content)).
  *
  * @example
  * ```html
@@ -21214,8 +21214,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1751032619,
-    version: '19.2.0-develop.8',
+    publishDate: 1751463227,
+    version: '19.2.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -23200,12 +23200,10 @@ class TableDirective {
         if (isConstrainedMode && !this.service.autoFitResize) {
             this.renderer.setStyle(this.element.nativeElement, 'width', this.service.originalWidth + 'px');
         }
-        else {
-            if (!this.virtualColumns || this.locked) {
-                const delta = deltas.reduce((sum, item) => sum + item, 0);
-                const width = this.service.originalWidth + delta;
-                this.renderer.setStyle(this.element.nativeElement, 'width', width + 'px');
-            }
+        else if (!this.virtualColumns || this.locked) {
+            const delta = deltas.reduce((sum, item) => sum + item, 0);
+            const width = this.service.originalWidth + delta;
+            this.renderer.setStyle(this.element.nativeElement, 'width', width + 'px');
         }
         this.cdr.detectChanges();
     }
@@ -23600,7 +23598,7 @@ class ListComponent {
         if (shouldCalculatePageSize) {
             const calculatedPageSize = this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
-                this.ngZone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                     this.ctx.grid.pageSize = calculatedPageSize;
                     this.ngZone.run(() => {
                         this.pageChange.emit({
@@ -23679,6 +23677,36 @@ class ListComponent {
             args.preventDefault();
         }
     }
+    updateViewportColumns(range) {
+        const columns = this.columns.nonLockedLeafColumns.toArray();
+        // eslint-disable-next-line prefer-const
+        let { startIdx, endIdx, offset } = range || this.calculateViewportColumns();
+        const start = Math.max(0, startIdx - bufferSize);
+        const end = Math.min(endIdx + bufferSize, columns.length - 1);
+        if (start < startIdx) {
+            for (let idx = startIdx - 1; idx >= start; idx--) {
+                offset -= columns[idx].width;
+            }
+        }
+        let currentColumns = columns.slice(start, end + 1);
+        this.viewportColumnsWidth = currentColumns.reduce((total, column) => total + column.width, 0);
+        const stickyBeforeStart = columns.slice(0, start).filter(c => c.sticky && !currentColumns.some(col => col === c));
+        const stickyAfterEnd = columns.slice(end, columns.length).filter(c => c.sticky && !currentColumns.some(col => col === c));
+        currentColumns = [...stickyBeforeStart, ...currentColumns, ...stickyAfterEnd];
+        if (start > 0) {
+            const offsetColumn = new ColumnBase();
+            offsetColumn.width = offset;
+            currentColumns.unshift(offsetColumn);
+        }
+        this.viewportColumns = new QueryList();
+        this.viewportColumns.reset(currentColumns);
+        this.columnsStartIdx = start;
+        this.columnsEndIdx = end;
+        this.columnInfo.columnRangeChange.emit({ start, end, offset });
+        if (!range) {
+            this.updateColumnViewport(startIdx, endIdx);
+        }
+    }
     detailExpand({ index, expand }) {
         if (expand) {
             this.rowHeightService.expandDetail(index);
@@ -23904,36 +23932,6 @@ class ListComponent {
         })
             .forEach(setHeight(this.renderer));
     }
-    updateViewportColumns(range) {
-        const columns = this.columns.nonLockedLeafColumns.toArray();
-        // eslint-disable-next-line prefer-const
-        let { startIdx, endIdx, offset } = range || this.calculateViewportColumns();
-        const start = Math.max(0, startIdx - bufferSize);
-        const end = Math.min(endIdx + bufferSize, columns.length - 1);
-        if (start < startIdx) {
-            for (let idx = startIdx - 1; idx >= start; idx--) {
-                offset -= columns[idx].width;
-            }
-        }
-        let currentColumns = columns.slice(start, end + 1);
-        this.viewportColumnsWidth = currentColumns.reduce((total, column) => total + column.width, 0);
-        const stickyBeforeStart = columns.slice(0, start).filter(c => c.sticky && !currentColumns.some(col => col === c));
-        const stickyAfterEnd = columns.slice(end, columns.length).filter(c => c.sticky && !currentColumns.some(col => col === c));
-        currentColumns = [...stickyBeforeStart, ...currentColumns, ...stickyAfterEnd];
-        if (start > 0) {
-            const offsetColumn = new ColumnBase();
-            offsetColumn.width = offset;
-            currentColumns.unshift(offsetColumn);
-        }
-        this.viewportColumns = new QueryList();
-        this.viewportColumns.reset(currentColumns);
-        this.columnsStartIdx = start;
-        this.columnsEndIdx = end;
-        this.columnInfo.columnRangeChange.emit({ start, end, offset });
-        if (!range) {
-            this.updateColumnViewport(startIdx, endIdx);
-        }
-    }
     handleColumnScroll() {
         const container = this.container.nativeElement;
         const scrollLeft = container.scrollLeft;
@@ -27645,719 +27643,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [GroupToolbarToolComponent]
             }] } });
 
+const createControl = (source) => (acc, key) => {
+    acc[key] = new FormControl(source[key]);
+    return acc;
+};
+const validateColumnsField = (columns) => expandColumns(columns.toArray())
+    .filter(isColumnComponent)
+    .filter(({ field }) => !isValidFieldName(field))
+    .forEach(({ field }) => console.warn(ColumnConfigurationErrorMessages.fieldName(field)));
+const handleExpandCollapseGroupsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ group, emit }) => emit && isPresent(group)))
+    .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
+const handleExpandCollapseDetailsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ dataItem }) => isPresent(dataItem)))
+    .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
+const isInEditedCell = (element, gridElement) => closest(element, matchesClasses('k-grid-edit-cell')) &&
+    closest(element, matchesNodeName('kendo-grid')) === gridElement;
+const NOTIFY_DELAY = 500;
 /**
- * A directive that handles in-memory data operations like [paging]({% slug paging_grid %}),
- * [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %}).
+ * Represents the Kendo UI for Angular Data Grid component.
  *
- * Use this directive with local data and enable the Grid data operations with minimal configuration.
- * ([More information and examples]({% slug local_data_grid %}#toc-using-the-data-binding-directive)).
+ * Use the `kendo-grid` component to display and manage tabular data.
  *
  * @example
  * ```html
- * <kendo-grid [kendoGridBinding]="gridData"></kendo-grid>
+ * <kendo-grid [data]="gridData"></kendo-grid>
  * ```
+ *
  * @remarks
- * Applied to: {@link GridComponent}.
+ * Supported children components are:
+ * {@link CheckboxColumnComponent},
+ * {@link ColumnChooserComponent},
+ * {@link ColumnComponent},
+ * {@link ColumnGroupComponent},
+ * {@link ColumnMenuAutoSizeAllColumnsComponent},
+ * {@link ColumnMenuAutoSizeColumnComponent},
+ * {@link ColumnMenuChooserComponent},
+ * {@link ColumnMenuComponent},
+ * {@link ColumnMenuFilterComponent},
+ * {@link ColumnMenuItemComponent},
+ * {@link ColumnMenuLockComponent},
+ * {@link ColumnMenuPositionComponent},
+ * {@link ColumnMenuSortComponent},
+ * {@link ColumnMenuStickComponent},
+ * {@link CommandColumnComponent},
+ * {@link CustomMessagesComponent},
+ * {@link ExcelComponent},
+ * {@link GridSpacerComponent},
+ * {@link PDFComponent},
+ * {@link RowReorderColumnComponent},
+ * {@link SpanColumnComponent},
+ * {@link ToolBarComponent}.
  */
-class DataBindingDirective {
-    grid;
-    changeDetector;
-    localDataChangesService;
+class GridComponent {
+    supportService;
+    selectionService;
+    cellSelectionService;
+    wrapper;
+    groupInfoService;
+    groupsService;
+    changeNotification;
+    detailsService;
+    editService;
+    filterService;
+    pdfService;
+    responsiveService;
+    renderer;
+    excelService;
+    ngZone;
+    scrollSyncService;
+    domEvents;
+    columnResizingService;
+    changeDetectorRef;
+    columnReorderService;
+    columnInfoService;
+    navigationService;
+    sortService;
+    scrollRequestService;
+    localization;
+    ctx;
+    sizingService;
+    adaptiveGridService;
     rowReorderService;
+    dataMappingService;
     /**
-     * Sets the number of records to skip in the Grid.
-     *
-     * @default 0
+     * Sets the data of the Grid. If you provide an array, the Grid gets the total count automatically.
+     * ([more information and example]({% slug binding_grid %})).
      */
-    set skip(value) {
-        if (!isPresent(value)) {
-            value = 0;
+    set data(value) {
+        this._data = value;
+        if (this.selectable && this.selectableSettings?.enabled && this.isVirtual) {
+            this.blockArrowSelection = false;
         }
-        this.grid.skip = this.state.skip = value;
-        if (this.rowReorderService) {
-            this.rowReorderService.skip = value;
+        if (this.notifyTimeout) {
+            clearTimeout(this.notifyTimeout);
+            this.notifyTimeout = null;
+        }
+        if (this.rowReorderable) {
+            this.ngZone.runOutsideAngular(() => {
+                this.notifyTimeout = setTimeout(() => {
+                    this.notifyReorderContainers();
+                }, NOTIFY_DELAY);
+            });
         }
     }
+    get data() {
+        return this._data;
+    }
+    get hintText() {
+        return this.rowReorderService.getDefaultHintText(this.columnList, this.flatData);
+    }
     /**
-     * Sets the sort descriptors for the Grid data.
-     *
+     * @hidden
      */
-    set sort(value) {
-        this.grid.sort = this.state.sort = value;
+    get customHintTemplate() {
+        if (this.rowReorderable) {
+            const allColumns = this.columnList.toArray();
+            const rowReorderColumn = allColumns.find(column => column.isRowReorderColumn);
+            return rowReorderColumn.rowDragHintTemplateRef;
+        }
     }
     /**
-     * Sets the filter descriptor for the Grid data.
-     *
+     * @hidden
      */
-    set filter(value) {
-        this.grid.filter = this.state.filter = value;
+    get hintContext() {
+        if (this.customHintTemplate) {
+            const draggedRow = this.rowReorderService?.getDraggedRow(this.flatData);
+            return {
+                $implicit: draggedRow?.dataItem,
+                rowIndex: draggedRow?.rowIndex
+            };
+        }
     }
     /**
-     * Sets the page size for the Grid pager.
+     * Defines the page size used by the Grid pager.
+     * Required for the [`paging`]({% slug paging_grid %}) feature.
+     */
+    pageSize;
+    /**
+     * Defines the height in pixels for the Grid when `scrollable` is set.
+     * You can also set the height using `style.height` with units like `px`, `%`, `em`, or `rem`.
+     */
+    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.
+     */
+    rowHeight;
+    /**
+     * Enables or disables adaptive mode. Adaptive rendering is off by default.
      *
+     * @default 'none'
      */
-    set pageSize(value) {
-        this.grid.pageSize = this.state.take = value;
+    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.
+     */
+    detailRowHeight;
+    /**
+     * Defines the number of records to skip in the pager.
+     * Required for the [`paging`]({% slug paging_grid %}) feature.
+     */
+    get skip() {
+        return this._skip;
+    }
+    set skip(value) {
+        if (typeof value === 'number' && value >= 0) {
+            this._skip = this.rowReorderService.skip = value;
+        }
     }
     /**
-     * Sets the group descriptors for the Grid data.
+     * Defines the scroll mode for the Grid.
      *
+     * @default 'scrollable'
      */
-    set group(value) {
-        this.grid.group = this.state.group = value;
-    }
+    scrollable = 'scrollable';
     /**
-     * Sets the data array for the Grid.
+     * Enables the selection feature of the Grid. The `selectable` property can be set to `true`, `false`, or an object with additional settings.
+     * [See example](slug:grid_row_selection).
      *
-     */
-    set data(value) {
-        this.originalData = value || [];
-        if (this.localDataChangesService) {
-            this.localDataChangesService.data = value;
-        }
-        this.dataChanged = true;
-    }
-    state = {
-        skip: 0
-    };
-    originalData = [];
-    dataChanged;
-    stateChangeSubscription;
-    dataChangedSubscription;
-    rowReorderSubscription;
-    constructor(grid, changeDetector, localDataChangesService, rowReorderService, ctx) {
-        this.grid = grid;
-        this.changeDetector = changeDetector;
-        this.localDataChangesService = localDataChangesService;
-        this.rowReorderService = rowReorderService;
-        if (localDataChangesService) {
-            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(this));
-        }
-        ctx && (ctx.dataBindingDirective = this);
-    }
-    /**
-     * @hidden
-     */
-    ngOnInit() {
-        this.applyState(this.state);
-        this.stateChangeSubscription = this.grid
-            .dataStateChange
-            .subscribe(this.onStateChange.bind(this));
-        if (this.rowReorderService) {
-            this.rowReorderSubscription = this.grid
-                .rowReorder
-                .subscribe(this.onRowReorder.bind(this));
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnDestroy() {
-        if (this.stateChangeSubscription) {
-            this.stateChangeSubscription.unsubscribe();
-        }
-        if (this.dataChangedSubscription) {
-            this.dataChangedSubscription.unsubscribe();
-        }
-        if (this.rowReorderSubscription) {
-            this.rowReorderSubscription.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnChanges(changes) {
-        if (anyChanged(["pageSize", "skip", "sort", "group", "filter"], changes)) {
-            this.rebind();
-        }
-    }
-    ngDoCheck() {
-        if (this.dataChanged) {
-            this.updateGridData();
-        }
-    }
-    /**
-     * @hidden
-     */
-    onStateChange(state) {
-        this.applyState(state);
-        this.rebind();
-    }
-    /**
-     * @hidden
-     */
-    onRowReorder(ev) {
-        this.rowReorderService.reorderRows(ev, this.originalData);
-        this.rebind();
-    }
-    /**
-     * @hidden
-     */
-    rebind() {
-        this.data = this.originalData;
-        this.updateGridData();
-        this.notifyDataChange();
-    }
-    /**
-     * Notifies the Grid that its data has changed.
-     */
-    notifyDataChange() {
-        this.grid.onDataChange();
-        if (this.changeDetector) {
-            this.changeDetector.markForCheck();
-        }
-    }
-    process(state) {
-        if (this.grid.isVirtual && (!isPresent(state.take) || state.take === 0)) {
-            return {
-                data: [],
-                total: this.originalData?.length || 0
-            };
-        }
-        return process(this.originalData, state);
-    }
-    applyState({ skip, take, sort, group, filter }) {
-        this.skip = skip;
-        this.pageSize = take;
-        this.sort = sort;
-        this.group = group;
-        this.filter = filter;
-    }
-    updateGridData() {
-        this.grid.data = this.process(this.state);
-        this.grid.updateNavigationMetadata();
-        this.dataChanged = false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: GridComponent }, { token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: RowReorderService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DataBindingDirective, isStandalone: true, selector: "[kendoGridBinding]", inputs: { skip: "skip", sort: "sort", filter: "filter", pageSize: "pageSize", group: "group", data: ["kendoGridBinding", "data"] }, exportAs: ["kendoGridBinding"], usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridBinding]',
-                    exportAs: 'kendoGridBinding',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: GridComponent }, { type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: RowReorderService }, { type: ContextService }]; }, propDecorators: { skip: [{
-                type: Input
-            }], sort: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], data: [{
-                type: Input,
-                args: ["kendoGridBinding"]
-            }] } });
-
-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 (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
-            }] } });
-
-const createControl = (source) => (acc, key) => {
-    acc[key] = new FormControl(source[key]);
-    return acc;
-};
-const validateColumnsField = (columns) => expandColumns(columns.toArray())
-    .filter(isColumnComponent)
-    .filter(({ field }) => !isValidFieldName(field))
-    .forEach(({ field }) => console.warn(ColumnConfigurationErrorMessages.fieldName(field)));
-const handleExpandCollapseGroupsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ group, emit }) => emit && isPresent(group)))
-    .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
-const handleExpandCollapseDetailsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ dataItem }) => isPresent(dataItem)))
-    .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
-const isInEditedCell = (element, gridElement) => closest(element, matchesClasses('k-grid-edit-cell')) &&
-    closest(element, matchesNodeName('kendo-grid')) === gridElement;
-const NOTIFY_DELAY = 500;
-/**
- * Represents the Kendo UI for Angular Data Grid component.
- *
- * Use the `kendo-grid` component to display and manage tabular data.
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData"></kendo-grid>
- * ```
- *
- * @remarks
- * Supported children components are:
- * {@link CheckboxColumnComponent},
- * {@link ColumnChooserComponent},
- * {@link ColumnComponent},
- * {@link ColumnGroupComponent},
- * {@link ColumnMenuAutoSizeAllColumnsComponent},
- * {@link ColumnMenuAutoSizeColumnComponent},
- * {@link ColumnMenuChooserComponent},
- * {@link ColumnMenuComponent},
- * {@link ColumnMenuFilterComponent},
- * {@link ColumnMenuItemComponent},
- * {@link ColumnMenuLockComponent},
- * {@link ColumnMenuPositionComponent},
- * {@link ColumnMenuSortComponent},
- * {@link ColumnMenuStickComponent},
- * {@link CommandColumnComponent},
- * {@link CustomMessagesComponent},
- * {@link ExcelComponent},
- * {@link GridSpacerComponent},
- * {@link PDFComponent},
- * {@link RowReorderColumnComponent},
- * {@link SpanColumnComponent},
- * {@link ToolBarComponent}.
- */
-class GridComponent {
-    supportService;
-    selectionService;
-    cellSelectionService;
-    wrapper;
-    groupInfoService;
-    groupsService;
-    changeNotification;
-    detailsService;
-    editService;
-    filterService;
-    pdfService;
-    responsiveService;
-    renderer;
-    excelService;
-    ngZone;
-    scrollSyncService;
-    domEvents;
-    columnResizingService;
-    changeDetectorRef;
-    columnReorderService;
-    columnInfoService;
-    navigationService;
-    sortService;
-    scrollRequestService;
-    localization;
-    ctx;
-    sizingService;
-    adaptiveGridService;
-    rowReorderService;
-    dataMappingService;
-    /**
-     * Sets the data of the Grid. If you provide an array, the Grid gets the total count automatically.
-     * ([more information and example]({% slug binding_grid %})).
-     */
-    set data(value) {
-        this._data = value;
-        if (this.selectable && this.selectableSettings?.enabled && this.isVirtual) {
-            this.blockArrowSelection = false;
-        }
-        if (this.notifyTimeout) {
-            clearTimeout(this.notifyTimeout);
-            this.notifyTimeout = null;
-        }
-        if (this.rowReorderable) {
-            this.ngZone.runOutsideAngular(() => {
-                this.notifyTimeout = setTimeout(() => {
-                    this.notifyReorderContainers();
-                }, NOTIFY_DELAY);
-            });
-        }
-    }
-    get data() {
-        return this._data;
-    }
-    get hintText() {
-        return this.rowReorderService.getDefaultHintText(this.columnList, this.flatData);
-    }
-    /**
-     * @hidden
-     */
-    get customHintTemplate() {
-        if (this.rowReorderable) {
-            const allColumns = this.columnList.toArray();
-            const rowReorderColumn = allColumns.find(column => column.isRowReorderColumn);
-            return rowReorderColumn.rowDragHintTemplateRef;
-        }
-    }
-    /**
-     * @hidden
-     */
-    get hintContext() {
-        if (this.customHintTemplate) {
-            const draggedRow = this.rowReorderService?.getDraggedRow(this.flatData);
-            return {
-                $implicit: draggedRow?.dataItem,
-                rowIndex: draggedRow?.rowIndex
-            };
-        }
-    }
-    /**
-     * Defines the page size used by the Grid pager.
-     * Required for the [`paging`]({% slug paging_grid %}) feature.
-     */
-    pageSize;
-    /**
-     * Defines the height in pixels for the Grid when `scrollable` is set.
-     * You can also set the height using `style.height` with units like `px`, `%`, `em`, or `rem`.
-     */
-    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.
-     */
-    rowHeight;
-    /**
-     * Enables or disables adaptive mode. Adaptive rendering is off by default.
-     *
-     * @default 'none'
-     */
-    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.
-     */
-    detailRowHeight;
-    /**
-     * Defines the number of records to skip in the pager.
-     * Required for the [`paging`]({% slug paging_grid %}) feature.
-     */
-    get skip() {
-        return this._skip;
-    }
-    set skip(value) {
-        if (typeof value === 'number' && value >= 0) {
-            this._skip = this.rowReorderService.skip = value;
-        }
-    }
-    /**
-     * Defines the scroll mode for the Grid.
-     *
-     * @default 'scrollable'
-     */
-    scrollable = 'scrollable';
-    /**
-     * Enables the selection feature of the Grid. The `selectable` property can be set to `true`, `false`, or an object with additional settings.
-     * [See example](slug:grid_row_selection).
-     *
-     * @default false
+     * @default false
      */
     selectable = false;
     /**
@@ -28969,10 +28435,8 @@ class GridComponent {
     dragTargetContainer;
     dropTargetContainer;
     dialogContainer;
-    /**
-     * @hidden
-     */
     adaptiveRenderer;
+    listComponent;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -29873,6 +29337,9 @@ class GridComponent {
                 source.locked = target.locked;
             }
             this.columnsContainer.refresh();
+            if (this.virtualColumns) {
+                this.listComponent.updateViewportColumns();
+            }
             this.changeDetectorRef.markForCheck();
         });
     }
@@ -30295,7 +29762,8 @@ class GridComponent {
                 column = toAdd.shift();
                 viewportColumns.push(column);
                 if (column.isColumnGroup) {
-                    toAdd.unshift(...column.childrenArray);
+                    const children = columnsArray.filter(c => c.parent && c.parent.id === column.id);
+                    toAdd.unshift(...children);
                 }
             }
             const lastFromGroup = viewportColumns[viewportColumns.length - 1];
@@ -30351,7 +29819,7 @@ class GridComponent {
         }
         if (this.groupsService.isExpanded({ groupIndex: index }) !== expand) {
             this.groupsService.toggleRow({ index }, false);
-            if (this.ctx.dataBindingDirective && this.ctx.dataBindingDirective instanceof GroupBindingDirective) {
+            if (this.ctx.dataBindingDirective && isPresent(this.ctx.dataBindingDirective.groupExpand)) {
                 this.ctx.dataBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
             }
         }
@@ -30425,7 +29893,7 @@ class GridComponent {
             ColumnMenuService,
             MenuTabbingService,
             DataMappingService
-        ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
             groupPanelEmpty="Drag a column header and drop it here to group by that column"
@@ -32242,6 +31710,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], adaptiveRenderer: [{
                 type: ViewChild,
                 args: [AdaptiveRendererComponent]
+            }], listComponent: [{
+                type: ViewChild,
+                args: [ListComponent]
             }] } });
 
 /**
@@ -32290,6 +31761,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.LocalizationService }]; } });
 
+/**
+ * A directive that handles in-memory data operations like [paging]({% slug paging_grid %}),
+ * [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %}).
+ *
+ * Use this directive with local data and enable the Grid data operations with minimal configuration.
+ * ([More information and examples]({% slug local_data_grid %}#toc-using-the-data-binding-directive)).
+ *
+ * @example
+ * ```html
+ * <kendo-grid [kendoGridBinding]="gridData"></kendo-grid>
+ * ```
+ * @remarks
+ * Applied to: {@link GridComponent}.
+ */
+class DataBindingDirective {
+    grid;
+    changeDetector;
+    localDataChangesService;
+    rowReorderService;
+    /**
+     * Sets the number of records to skip in the Grid.
+     *
+     * @default 0
+     */
+    set skip(value) {
+        if (!isPresent(value)) {
+            value = 0;
+        }
+        this.grid.skip = this.state.skip = value;
+        if (this.rowReorderService) {
+            this.rowReorderService.skip = value;
+        }
+    }
+    /**
+     * Sets the sort descriptors for the Grid data.
+     *
+     */
+    set sort(value) {
+        this.grid.sort = this.state.sort = value;
+    }
+    /**
+     * Sets the filter descriptor for the Grid data.
+     *
+     */
+    set filter(value) {
+        this.grid.filter = this.state.filter = value;
+    }
+    /**
+     * Sets the page size for the Grid pager.
+     *
+     */
+    set pageSize(value) {
+        this.grid.pageSize = this.state.take = value;
+    }
+    /**
+     * Sets the group descriptors for the Grid data.
+     *
+     */
+    set group(value) {
+        this.grid.group = this.state.group = value;
+    }
+    /**
+     * Sets the data array for the Grid.
+     *
+     */
+    set data(value) {
+        this.originalData = value || [];
+        if (this.localDataChangesService) {
+            this.localDataChangesService.data = value;
+        }
+        this.dataChanged = true;
+    }
+    state = {
+        skip: 0
+    };
+    originalData = [];
+    dataChanged;
+    stateChangeSubscription;
+    dataChangedSubscription;
+    rowReorderSubscription;
+    constructor(grid, changeDetector, localDataChangesService, rowReorderService, ctx) {
+        this.grid = grid;
+        this.changeDetector = changeDetector;
+        this.localDataChangesService = localDataChangesService;
+        this.rowReorderService = rowReorderService;
+        if (localDataChangesService) {
+            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(this));
+        }
+        ctx && (ctx.dataBindingDirective = this);
+    }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.applyState(this.state);
+        this.stateChangeSubscription = this.grid
+            .dataStateChange
+            .subscribe(this.onStateChange.bind(this));
+        if (this.rowReorderService) {
+            this.rowReorderSubscription = this.grid
+                .rowReorder
+                .subscribe(this.onRowReorder.bind(this));
+        }
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.stateChangeSubscription) {
+            this.stateChangeSubscription.unsubscribe();
+        }
+        if (this.dataChangedSubscription) {
+            this.dataChangedSubscription.unsubscribe();
+        }
+        if (this.rowReorderSubscription) {
+            this.rowReorderSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes) {
+        if (anyChanged(["pageSize", "skip", "sort", "group", "filter"], changes)) {
+            this.rebind();
+        }
+    }
+    ngDoCheck() {
+        if (this.dataChanged) {
+            this.updateGridData();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onStateChange(state) {
+        this.applyState(state);
+        this.rebind();
+    }
+    /**
+     * @hidden
+     */
+    onRowReorder(ev) {
+        this.rowReorderService.reorderRows(ev, this.originalData);
+        this.rebind();
+    }
+    /**
+     * @hidden
+     */
+    rebind() {
+        this.data = this.originalData;
+        this.updateGridData();
+        this.notifyDataChange();
+    }
+    /**
+     * Notifies the Grid that its data has changed.
+     */
+    notifyDataChange() {
+        this.grid.onDataChange();
+        if (this.changeDetector) {
+            this.changeDetector.markForCheck();
+        }
+    }
+    process(state) {
+        if (this.grid.isVirtual && (!isPresent(state.take) || state.take === 0)) {
+            return {
+                data: [],
+                total: this.originalData?.length || 0
+            };
+        }
+        return process(this.originalData, state);
+    }
+    applyState({ skip, take, sort, group, filter }) {
+        this.skip = skip;
+        this.pageSize = take;
+        this.sort = sort;
+        this.group = group;
+        this.filter = filter;
+    }
+    updateGridData() {
+        this.grid.data = this.process(this.state);
+        this.grid.updateNavigationMetadata();
+        this.dataChanged = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: GridComponent }, { token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: RowReorderService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DataBindingDirective, isStandalone: true, selector: "[kendoGridBinding]", inputs: { skip: "skip", sort: "sort", filter: "filter", pageSize: "pageSize", group: "group", data: ["kendoGridBinding", "data"] }, exportAs: ["kendoGridBinding"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridBinding]',
+                    exportAs: 'kendoGridBinding',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: GridComponent }, { type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: RowReorderService }, { type: ContextService }]; }, propDecorators: { skip: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], data: [{
+                type: Input,
+                args: ["kendoGridBinding"]
+            }] } });
+
 /**
  * Stores the row selection state of the Grid in memory
  * ([see example]({% slug selection_grid %}#toc-toggling-the-selection-functionality)).
@@ -33083,112 +32762,442 @@ class ExpandGroupDirective {
     /**
      * Fires when the `expandedGroupKeys` collection changes.
      */
-    expandedGroupKeysChange = new EventEmitter();
+    expandedGroupKeysChange = new EventEmitter();
+    /**
+     * Sets the item format stored in the `expandedGroupKeys` collection.
+     * Accepts a property name or a function that returns a unique key for each group
+     * ([see example]({% slug groups_expanded_state_grid %}#toc-custom-group-key-format)).
+     */
+    get expandGroupBy() {
+        return this._expandGroupBy;
+    }
+    set expandGroupBy(key) {
+        if (typeof key === 'function') {
+            this._expandGroupBy = key;
+        }
+    }
+    /**
+     * Holds the collection of expanded group keys.
+     * Set this property to control which group rows are expanded.
+     */
+    get expandedGroupKeys() {
+        return this._expandedGroupKeys;
+    }
+    set expandedGroupKeys(expandedGroups) {
+        this._expandedGroupKeys = (expandedGroups || []).slice();
+    }
+    /**
+     * Specifies if group items are expanded by default.
+     * @default false
+     */
+    groupsInitiallyExpanded = false;
+    _expandGroupBy;
+    _expandedGroupKeys;
+    subscriptions = new Subscription();
+    constructor(grid) {
+        this.grid = grid;
+        this.grid.isGroupExpanded = this.isExpanded.bind(this);
+        this.subscriptions.add(merge(this.grid.groupExpand.pipe(map(e => ({ expand: true, ...e }))), this.grid.groupCollapse.pipe(map(e => ({ expand: false, ...e })))).subscribe(this.toggleState.bind(this)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    get keyGetter() {
+        return this.expandGroupBy || DEFAULT_KEY_GETTER;
+    }
+    /**
+     * @hidden
+     */
+    isExpanded(groupArgs) {
+        const itemIndex = this.getItemIndex(groupArgs);
+        return itemIndex > -1 ? !this.groupsInitiallyExpanded : this.groupsInitiallyExpanded;
+    }
+    getItemIndex(groupArgs) {
+        if (this.expandGroupBy) {
+            return this.expandedGroupKeys.indexOf(this.keyGetter(groupArgs));
+        }
+        return this.expandedGroupKeys.findIndex(item => {
+            let index = 0;
+            let parentGroup = groupArgs.parentGroup;
+            while (isPresent(parentGroup)) {
+                if (!isPresent(item.parentGroupKeys) || !isPresent(item.parentGroupKeys[index]) ||
+                    parentGroup.group.value !== item.parentGroupKeys[index].value ||
+                    parentGroup.group.field !== item.parentGroupKeys[index].field) {
+                    return false;
+                }
+                parentGroup = parentGroup.parentGroup;
+                index++;
+            }
+            return item.value === groupArgs.group.value && item.field === groupArgs.group.field;
+        });
+    }
+    toggleState(groupArgs) {
+        const key = this.keyGetter(groupArgs);
+        if (Boolean(this.groupsInitiallyExpanded) !== groupArgs.expand) {
+            this.expandedGroupKeys.push(key);
+        }
+        else {
+            const index = this.expandedGroupKeys.findIndex(group => {
+                if (this.expandGroupBy) {
+                    return group === key;
+                }
+                else if (key.parentGroupKeys?.length === 0) {
+                    return group.value === key.value;
+                }
+                return JSON.stringify(group) === JSON.stringify(key);
+            });
+            this.expandedGroupKeys.splice(index, 1);
+        }
+        this.expandedGroupKeysChange.emit(this.expandedGroupKeys.slice());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandGroupDirective, deps: [{ token: GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExpandGroupDirective, isStandalone: true, selector: "[kendoGridExpandGroupBy]", inputs: { expandGroupBy: ["kendoGridExpandGroupBy", "expandGroupBy"], expandedGroupKeys: "expandedGroupKeys", groupsInitiallyExpanded: "groupsInitiallyExpanded" }, outputs: { expandedGroupKeysChange: "expandedGroupKeysChange" }, exportAs: ["kendoGridExpandGroupBy"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridExpandGroupBy]',
+                    exportAs: 'kendoGridExpandGroupBy',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: GridComponent }]; }, propDecorators: { expandedGroupKeysChange: [{
+                type: Output
+            }], expandGroupBy: [{
+                type: Input,
+                args: ['kendoGridExpandGroupBy']
+            }], expandedGroupKeys: [{
+                type: Input
+            }], groupsInitiallyExpanded: [{
+                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;
+    }
     /**
-     * Sets the item format stored in the `expandedGroupKeys` collection.
-     * Accepts a property name or a function that returns a unique key for each group
-     * ([see example]({% slug groups_expanded_state_grid %}#toc-custom-group-key-format)).
+     * Defines the descriptors by which the data will be sorted.
      */
-    get expandGroupBy() {
-        return this._expandGroupBy;
+    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();
+        }
     }
-    set expandGroupBy(key) {
-        if (typeof key === 'function') {
-            this._expandGroupBy = key;
+    /**
+     * 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();
         }
     }
     /**
-     * Holds the collection of expanded group keys.
-     * Set this property to control which group rows are expanded.
+     * Defines the descriptors by which the data will be grouped.
      */
-    get expandedGroupKeys() {
-        return this._expandedGroupKeys;
+    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;
+        }
     }
-    set expandedGroupKeys(expandedGroups) {
-        this._expandedGroupKeys = (expandedGroups || []).slice();
+    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();
     }
     /**
-     * Specifies if group items are expanded by default.
-     * @default false
+     * @hidden
      */
-    groupsInitiallyExpanded = false;
-    _expandGroupBy;
-    _expandedGroupKeys;
-    subscriptions = new Subscription();
-    constructor(grid) {
-        this.grid = grid;
-        this.grid.isGroupExpanded = this.isExpanded.bind(this);
-        this.subscriptions.add(merge(this.grid.groupExpand.pipe(map(e => ({ expand: true, ...e }))), this.grid.groupCollapse.pipe(map(e => ({ expand: false, ...e })))).subscribe(this.toggleState.bind(this)));
+    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() });
+            }
+        });
     }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
+    /**
+     * Collapses all expanded root level groups.
+     */
+    collapseAll() {
+        this.toggleAll(false);
     }
-    get keyGetter() {
-        return this.expandGroupBy || DEFAULT_KEY_GETTER;
+    /**
+     * Expands all expanded root level groups.
+     */
+    expandAll() {
+        this.toggleAll(true);
     }
     /**
      * @hidden
      */
-    isExpanded(groupArgs) {
-        const itemIndex = this.getItemIndex(groupArgs);
-        return itemIndex > -1 ? !this.groupsInitiallyExpanded : this.groupsInitiallyExpanded;
+    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);
     }
-    getItemIndex(groupArgs) {
-        if (this.expandGroupBy) {
-            return this.expandedGroupKeys.indexOf(this.keyGetter(groupArgs));
+    /**
+     * @hidden
+     */
+    groupCollapse({ groupIndex }) {
+        const { group } = findGroup(groupIndex, this.groups);
+        if (group) {
+            group.items = [];
         }
-        return this.expandedGroupKeys.findIndex(item => {
-            let index = 0;
-            let parentGroup = groupArgs.parentGroup;
-            while (isPresent(parentGroup)) {
-                if (!isPresent(item.parentGroupKeys) || !isPresent(item.parentGroupKeys[index]) ||
-                    parentGroup.group.value !== item.parentGroupKeys[index].value ||
-                    parentGroup.group.field !== item.parentGroupKeys[index].field) {
-                    return false;
-                }
-                parentGroup = parentGroup.parentGroup;
-                index++;
-            }
-            return item.value === groupArgs.group.value && item.field === groupArgs.group.field;
-        });
+        else {
+            return;
+        }
+        this.grid.data = this.dataResult(this.state.skip, this.state.take);
     }
-    toggleState(groupArgs) {
-        const key = this.keyGetter(groupArgs);
-        if (Boolean(this.groupsInitiallyExpanded) !== groupArgs.expand) {
-            this.expandedGroupKeys.push(key);
+    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 {
-            const index = this.expandedGroupKeys.findIndex(group => {
-                if (this.expandGroupBy) {
-                    return group === key;
-                }
-                else if (key.parentGroupKeys?.length === 0) {
-                    return group.value === key.value;
-                }
-                return JSON.stringify(group) === JSON.stringify(key);
+            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
             });
-            this.expandedGroupKeys.splice(index, 1);
         }
-        this.expandedGroupKeysChange.emit(this.expandedGroupKeys.slice());
+        return this.dataResult(state.skip, state.take);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandGroupDirective, deps: [{ token: GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExpandGroupDirective, isStandalone: true, selector: "[kendoGridExpandGroupBy]", inputs: { expandGroupBy: ["kendoGridExpandGroupBy", "expandGroupBy"], expandedGroupKeys: "expandedGroupKeys", groupsInitiallyExpanded: "groupsInitiallyExpanded" }, outputs: { expandedGroupKeysChange: "expandedGroupKeysChange" }, exportAs: ["kendoGridExpandGroupBy"], ngImport: i0 });
+    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: ExpandGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupBindingDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGridExpandGroupBy]',
-                    exportAs: 'kendoGridExpandGroupBy',
+                    selector: '[kendoGridGroupBinding]',
+                    exportAs: 'kendoGridGroupBinding',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: GridComponent }]; }, propDecorators: { expandedGroupKeysChange: [{
-                type: Output
-            }], expandGroupBy: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: ContextService }, { type: GroupsService }]; }, propDecorators: { kendoGridGroupBinding: [{
                 type: Input,
-                args: ['kendoGridExpandGroupBy']
-            }], expandedGroupKeys: [{
+                args: ["kendoGridGroupBinding"]
+            }], sort: [{
                 type: Input
-            }], groupsInitiallyExpanded: [{
+            }], filter: [{
+                type: Input
+            }], group: [{
                 type: Input
             }] } });
 
@@ -34034,15 +34043,6 @@ class UndoRedoDirective {
     }
     ngOnInit() {
         this.stack = new UndoRedoStack(this.maxStoredStates);
-        this.stack.add({
-            originalEvent: {
-                skip: this.host.skip,
-                take: this.host.pageSize,
-                sort: this.host.sort,
-                filter: this.host.filter,
-                group: this.host.group
-            }, gridState: this.host.currentState
-        });
         this.subs = this.host.gridStateChange.subscribe((state) => {
             if (this.addToState) {
                 this.stack.add({
@@ -34113,7 +34113,7 @@ class UndoRedoDirective {
                 if (isSaveOrRemove) {
                     if (originalAction === 'save') {
                         const stateItem = this.getGridDataItems(this.stack.current.gridState.currentData).find(item => item[this.itemIdKey] === event.originalEvent.dataItem[this.itemIdKey]);
-                        Object.assign(event.originalEvent.originalDataItem, stateItem);
+                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 1, stateItem);
                     }
                     else if (action === 'Undo') {
                         this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 0, event.originalEvent.dataItem);
@@ -34126,13 +34126,24 @@ class UndoRedoDirective {
                 else {
                     this.host.loadState({ ...this.stack.current.gridState, currentData: null });
                     if (this.isDataStateChangeEvent(event.originalEvent)) {
-                        const { skip, take, sort, filter, group } = this.stack.current.gridState;
+                        const { skip, take, sort, filter, group } = event.gridState;
                         this.host.dataStateChange.emit({ skip, take, sort, filter, group });
                     }
                 }
             }));
         });
     }
+    ngAfterViewInit() {
+        this.stack.add({
+            originalEvent: {
+                skip: this.host.skip,
+                take: this.host.pageSize,
+                sort: this.host.sort,
+                filter: this.host.filter,
+                group: this.host.group
+            }, gridState: this.host.currentState
+        });
+    }
     ngOnDestroy() {
         this.stack.clear();
         this.stack = null;