@progress/kendo-angular-grid 19.2.0-develop.1 → 19.2.0-develop.10

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

@@ -532,6 +532,9 @@ const isMultipleRangesEnabled = (selectableSettings) => {
  */
 const calcRowHeight = (tableBody) => {
     let result = 0;
+    if (!isDocumentAvailable()) {
+        return result;
+    }
     if (tableBody) {
         const row = tableBody.insertRow(0);
         const cell = row.insertCell(0);
@@ -865,7 +868,7 @@ class ContextService {
     topToolbarNavigation;
     bottomToolbarNavigation;
     navigable;
-    groupBindingDirective;
+    dataBindingDirective;
     constructor(renderer, localization) {
         this.renderer = renderer;
         this.localization = localization;
@@ -14136,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
@@ -16672,7 +16675,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class CellSelectionAggregateService {
     ctx;
-    dataChanges;
     columnInfoService;
     selectedItems = [];
     groupedAggregates = { dates: [], numbers: [], booleans: [] };
@@ -16688,9 +16690,8 @@ class CellSelectionAggregateService {
         latest: null
     };
     sub = new Subscription();
-    constructor(ctx, dataChanges, columnInfoService) {
+    constructor(ctx, columnInfoService) {
         this.ctx = ctx;
-        this.dataChanges = dataChanges;
         this.columnInfoService = columnInfoService;
     }
     ngOnDestroy() {
@@ -16851,12 +16852,12 @@ class CellSelectionAggregateService {
         this.aggregates['isFalse'] = this.aggregates['isTrue'] = null;
         this.aggregates['earliest'] = this.aggregates['latest'] = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService, deps: [{ token: ContextService }, { token: LocalDataChangesService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService, deps: [{ token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: LocalDataChangesService }, { type: ColumnInfoService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }]; } });
 
 /**
  * @hidden
@@ -16985,6 +16986,8 @@ class SelectionService {
         if (ev.shiftKey) {
             ev.rangeStartRow = { dataItem: this.lastSelectionData, index: this.lastSelectionStartIndex };
             ev.rangeEndRow = { dataItem: item.data, index: item.index };
+            this.lastSelectionData = item.data;
+            this.lastSelectionStartIndex = item.index;
         }
         this.syncCurrentSelection(ev);
         this.changes.emit(ev);
@@ -17073,13 +17076,14 @@ class SelectionService {
             item = iterator.next();
         }
     }
-    addAllTo(item, ctrlKey, preserveSelection = false) {
+    addAllTo(item, ctrlKey, preserveSelection = false, shiftKey = false) {
         const selectedRows = [];
         const deselectedRows = [];
         const start = Math.min(this.lastSelectionStartIndex, item.index);
         const end = Math.max(this.lastSelectionStartIndex, item.index);
         const iterator = this.getIterator();
         let next = iterator.next();
+        let selectedItem;
         while (!next.done) {
             if (next.value && next.value.type === "data") {
                 const idx = next.value.index;
@@ -17090,6 +17094,9 @@ class SelectionService {
                 if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
                     selectedRows.push(rowArgs);
                 }
+                if (idx === item.index && !this.nonSelectableRows.has(idx)) {
+                    selectedItem = rowArgs;
+                }
             }
             next = iterator.next();
         }
@@ -17097,10 +17104,23 @@ class SelectionService {
             const nonSelectableRows = this.currentSelection.filter(i => this.nonSelectableRows.has(i.index));
             deselectedRows.push(...nonSelectableRows);
         }
-        return {
-            deselectedRows: deselectedRows,
-            selectedRows: selectedRows
+        const selectionEvent = {
+            deselectedRows,
+            selectedRows
         };
+        if (shiftKey && selectedItem) {
+            selectionEvent.rangeStartRow = {
+                dataItem: this.lastSelectionData,
+                index: this.lastSelectionStartIndex
+            };
+            selectionEvent.rangeEndRow = {
+                dataItem: selectedItem.dataItem,
+                index: selectedItem.index
+            };
+            this.lastSelectionData = selectedItem.dataItem;
+            this.lastSelectionStartIndex = selectedItem.index;
+        }
+        return selectionEvent;
     }
     updateAll(selectAllChecked) {
         this.selectAllChecked = selectAllChecked;
@@ -19089,7 +19109,7 @@ class SelectionCheckboxDirective {
                 const ctrlKey = event.ctrlKey || event.metaKey;
                 if (event.shiftKey && this.selectionService.options.mode === 'multiple') {
                     const item = { index: this.itemIndex };
-                    ev = this.selectionService.addAllTo(item, ctrlKey);
+                    ev = this.selectionService.addAllTo(item, ctrlKey, false, event.shiftKey);
                 }
                 else {
                     ev = this.selectionService.toggleByIndex(this.itemIndex);
@@ -21194,8 +21214,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750784754,
-    version: '19.2.0-develop.1',
+    publishDate: 1751281289,
+    version: '19.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -23576,7 +23596,8 @@ class ListComponent {
         if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
             this.updateViewportColumns();
         }
-        if (this.isVirtual && this.ctx.grid && !this.ctx.grid.pageSize) {
+        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !this.ctx.grid.pageSize;
+        if (shouldCalculatePageSize) {
             const calculatedPageSize = this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
                 this.ngZone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
@@ -23658,6 +23679,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);
@@ -23883,36 +23934,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;
@@ -27624,6 +27645,538 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [GroupToolbarToolComponent]
             }] } });
 
+/**
+ * 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"]
+            }] } });
+
+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;
@@ -28416,10 +28969,8 @@ class GridComponent {
     dragTargetContainer;
     dropTargetContainer;
     dialogContainer;
-    /**
-     * @hidden
-     */
     adaptiveRenderer;
+    listComponent;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -29104,12 +29655,12 @@ class GridComponent {
         this.sort = state.sort;
         this.group = state.group;
         this.filter = state.filter;
-        this.group = state.group;
         this.skip = state.skip;
         this.pageSize = state.take;
-        this.data = state.currentData;
-        this.changeNotification.notify();
-        this.changeDetectorRef.detectChanges();
+        if (state.currentData) {
+            this.data = state.currentData;
+        }
+        this.changeDetectorRef.markForCheck();
     }
     traverseColumns(columns, callback) {
         columns.forEach((column) => {
@@ -29320,6 +29871,9 @@ class GridComponent {
                 source.locked = target.locked;
             }
             this.columnsContainer.refresh();
+            if (this.virtualColumns) {
+                this.listComponent.updateViewportColumns();
+            }
             this.changeDetectorRef.markForCheck();
         });
     }
@@ -29742,7 +30296,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];
@@ -29798,8 +30353,8 @@ class GridComponent {
         }
         if (this.groupsService.isExpanded({ groupIndex: index }) !== expand) {
             this.groupsService.toggleRow({ index }, false);
-            if (this.ctx.groupBindingDirective) {
-                this.ctx.groupBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
+            if (this.ctx.dataBindingDirective && this.ctx.dataBindingDirective instanceof GroupBindingDirective) {
+                this.ctx.dataBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
             }
         }
     }
@@ -29872,7 +30427,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"
@@ -31689,6 +32244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], adaptiveRenderer: [{
                 type: ViewChild,
                 args: [AdaptiveRendererComponent]
+            }], listComponent: [{
+                type: ViewChild,
+                args: [ListComponent]
             }] } });
 
 /**
@@ -31737,213 +32295,6 @@ 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) {
-        this.grid = grid;
-        this.changeDetector = changeDetector;
-        this.localDataChangesService = localDataChangesService;
-        this.rowReorderService = rowReorderService;
-        if (localDataChangesService) {
-            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(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 }], 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 }]; }, 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)).
@@ -32846,330 +33197,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);
-        this.groupsService = groupsService;
-        ctxService.groupBindingDirective = 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
-            }] } });
-
 /**
  * Represents the Kendo UI GridSpacer component for Angular.
  * Used to give additional white space between the Pager inner elements,
@@ -33822,6 +33849,12 @@ class UndoRedoStack {
         this.currentNode = this.currentNode.previous;
         return this.currentNode.state;
     }
+    peekNext() {
+        return this.currentNode.next?.state || null;
+    }
+    peekPrev() {
+        return this.currentNode.previous?.state || null;
+    }
     /**
      * Performs a redo operation, moving to the next state
      * @returns The next state or null if can't redo
@@ -33944,7 +33977,6 @@ class UndoRedoService {
     onUndo = new Subject();
     onRedo = new Subject();
     stackEndReached = new Subject();
-    setState = new Subject();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoService });
 }
@@ -33968,11 +34000,17 @@ class UndoRedoDirective {
     editService;
     undoRedoService;
     changeNotification;
+    ctx;
+    localDataChangesService;
     /**
      * Sets the maximum number of actions to keep in the undo-redo stack.
      * @default 10
      */
     maxStoredStates = 10;
+    /**
+     * Defines the property name of the data item unique key that will be used to identify the items when performing undo-redo actions.
+     */
+    itemIdKey;
     /**
      * Fires when you perform the undo action. Provides the Grid state to apply.
      */
@@ -33990,11 +34028,13 @@ class UndoRedoDirective {
     stack;
     subs = new Subscription();
     addToState = true;
-    constructor(host, editService, undoRedoService, changeNotification) {
+    constructor(host, editService, undoRedoService, changeNotification, ctx, localDataChangesService) {
         this.host = host;
         this.editService = editService;
         this.undoRedoService = undoRedoService;
         this.changeNotification = changeNotification;
+        this.ctx = ctx;
+        this.localDataChangesService = localDataChangesService;
         this.host.undoRedoService = this.undoRedoService;
     }
     ngOnInit() {
@@ -34006,7 +34046,7 @@ class UndoRedoDirective {
                 sort: this.host.sort,
                 filter: this.host.filter,
                 group: this.host.group
-            }, gridState: structuredClone(this.host.currentState)
+            }, gridState: this.host.currentState
         });
         this.subs = this.host.gridStateChange.subscribe((state) => {
             if (this.addToState) {
@@ -34018,7 +34058,7 @@ class UndoRedoDirective {
                         filter: state.filter,
                         group: state.group
                     },
-                    gridState: structuredClone(state)
+                    gridState: state
                 });
             }
             let stackEndPointReached;
@@ -34031,36 +34071,72 @@ class UndoRedoDirective {
             this.undoRedoService.stackEndReached.next(stackEndPointReached);
         });
         this.subs.add(this.editService.changes
-            .pipe(filter(event => event.action === 'save' || event.action === 'remove'), tap(event => this.undoRedoService.originalEvent = event))
+            .pipe(filter((event) => event.action === 'save' || event.action === 'remove'))
             .subscribe(event => {
             this.stack.add({
-                originalEvent: event,
-                gridState: structuredClone(this.host.currentState)
+                originalEvent: { ...event, dataItem: structuredClone(event.dataItem) },
+                gridState: this.host.currentState
             });
             this.addToState = false;
             this.host.gridStateChange.emit(this.stack.current.gridState);
             this.addToState = true;
             this.updateUndoRedoDisabled();
         }));
-        this.subs.add(this.changeNotification.changes.subscribe(() => this.stack.current.gridState = this.host.currentState));
+        this.subs.add(this.changeNotification.changes.subscribe(() => {
+            if (!this.ctx.dataBindingDirective) {
+                this.stack.current.gridState = this.host.currentState;
+            }
+        }));
         ['Undo', 'Redo'].forEach((action) => {
             this.subs.add(this.undoRedoService[`on${action}`].subscribe(() => {
                 if (!this.stack[`can${action}`]) {
                     return;
                 }
-                this.stack[`${action.toLowerCase()}`]();
+                let eventData;
+                if (action === 'Undo') {
+                    const isSaveOrRemove = this.stack.current.originalEvent.action === 'save' || this.stack.current.originalEvent.action === 'remove';
+                    eventData = isSaveOrRemove ? this.stack.current : this.stack.peekPrev();
+                }
+                else {
+                    eventData = this.stack.peekNext();
+                }
+                const event = new UndoRedoEvent(eventData);
                 if (hasObservers(this[`on${action}`])) {
-                    const event = new UndoRedoEvent(this.stack.current);
                     this[`on${action}`].emit(event);
                     if (event.isDefaultPrevented()) {
                         return;
                     }
                 }
+                this.stack[`${action.toLowerCase()}`]();
                 this.updateUndoRedoDisabled();
-                this.host.loadState(this.stack.current.gridState);
+                const originalAction = event.originalEvent.action;
+                const isLocalData = isPresent$1(this.ctx?.dataBindingDirective);
+                if (!isLocalData) {
+                    return;
+                }
+                const isSaveOrRemove = originalAction === 'save' || originalAction === 'remove';
+                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);
+                    }
+                    else if (action === 'Undo') {
+                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 0, event.originalEvent.dataItem);
+                    }
+                    else {
+                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 1);
+                    }
+                    this.localDataChangesService?.changes.emit();
+                }
+                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;
+                        this.host.dataStateChange.emit({ skip, take, sort, filter, group });
+                    }
+                }
             }));
         });
-        this.subs.add(this.undoRedoService.setState.subscribe((state) => this.stack.add({ originalEvent: 'dataChange', gridState: state })));
     }
     ngOnDestroy() {
         this.stack.clear();
@@ -34102,8 +34178,15 @@ class UndoRedoDirective {
         }
         this.undoRedoService.stackEndReached.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, deps: [{ token: GridComponent }, { token: EditService }, { token: UndoRedoService }, { token: ChangeNotificationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UndoRedoDirective, isStandalone: true, selector: "[kendoGridUndoRedo]", inputs: { maxStoredStates: "maxStoredStates" }, outputs: { onUndo: "undo", onRedo: "redo" }, providers: [UndoRedoService], exportAs: ["kendoGridUndoRedo"], ngImport: i0 });
+    getGridDataItems(data) {
+        return Array.isArray(data) ? data.flatMap(recursiveFlatMap) :
+            data.data.flatMap(recursiveFlatMap);
+    }
+    isDataStateChangeEvent(event) {
+        return event && ['skip', 'take', 'sort', 'filter', 'group'].some(prop => prop in event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, deps: [{ token: GridComponent }, { token: EditService }, { token: UndoRedoService }, { token: ChangeNotificationService }, { token: ContextService }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UndoRedoDirective, isStandalone: true, selector: "[kendoGridUndoRedo]", inputs: { maxStoredStates: "maxStoredStates", itemIdKey: "itemIdKey" }, outputs: { onUndo: "undo", onRedo: "redo" }, providers: [UndoRedoService], exportAs: ["kendoGridUndoRedo"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, decorators: [{
             type: Directive,
@@ -34113,7 +34196,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoGridUndoRedo',
                     providers: [UndoRedoService]
                 }]
-        }], ctorParameters: function () { return [{ type: GridComponent }, { type: EditService }, { type: UndoRedoService }, { type: ChangeNotificationService }]; }, propDecorators: { maxStoredStates: [{
+        }], ctorParameters: function () { return [{ type: GridComponent }, { type: EditService }, { type: UndoRedoService }, { type: ChangeNotificationService }, { type: ContextService }, { type: LocalDataChangesService }]; }, propDecorators: { maxStoredStates: [{
+                type: Input
+            }], itemIdKey: [{
                 type: Input
             }], onUndo: [{
                 type: Output,