@progress/kendo-angular-grid 19.2.0-develop.14 → 19.2.0-develop.3

package/README.md

@@ -4,14 +4,9 @@
 
 ## Kendo UI for Angular Data Grid Component
 
-> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)—a commercial UI library.
-> * To use this package, you must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or start a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
-> * Adding a valid license key file ensures a seamless experience during the trial period—no watermarks, no warnings, and full access to all components and features.
-> * Trial users can register for a free license key file. Without it, your trial may be interrupted by visual indicators or functionality limitations.
-> * Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
-> * Learn more: https://www.telerik.com/kendo-angular-ui/components/licensing
->
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
+> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)—a commercial UI library.
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
+> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
 
 The [Kendo UI for Angular Data Grid](https://www.telerik.com/kendo-angular-ui/components/grid) includes a comprehensive set of ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row and column virtualization, exporting to PDF and Excel, and accessibility support. This Data Grid Component (sometimes called a Data Table) is built on Angular from the ground up, by a company with a long history of making enterprise-ready Grids. This results in an Angular data grid that delivers lighting fast performance and is highly customizable.
 

package/aggregates/selection-aggregate.service.d.ts

@@ -7,6 +7,7 @@ import { CellSelectionItem, SelectionEvent } from '../selection/types';
 import { RowArgs } from '../rendering/common/row-args';
 import { ContextService } from '../common/provider.service';
 import { ColumnInfoService } from '../common/column-info.service';
+import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -21,12 +22,13 @@ interface GroupedAggregates {
  */
 export declare class CellSelectionAggregateService {
     private ctx;
+    private dataChanges;
     private columnInfoService;
     selectedItems: Array<CellSelectionItem | RowArgs>;
     groupedAggregates: GroupedAggregates;
     aggregates: SelectionAggregates;
     private sub;
-    constructor(ctx: ContextService, columnInfoService: ColumnInfoService);
+    constructor(ctx: ContextService, dataChanges: LocalDataChangesService, columnInfoService: ColumnInfoService);
     ngOnDestroy(): void;
     isAggregateIncluded(aggregate: SelectionAggregate): boolean;
     init(): void;

package/column-menu/column-menu-item.directive.d.ts

@@ -6,7 +6,7 @@ import { ChangeDetectorRef, ElementRef, NgZone, Renderer2 } from '@angular/core'
 import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
- * 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

package/common/provider.service.d.ts

@@ -7,7 +7,6 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import type { GridComponent } from '../grid.component';
 import { GridToolbarNavigationService } from '../rendering/toolbar/toolbar-navigation.service';
 import type { GroupBindingDirective } from '../grouping/group-scroll-binding.directive';
-import type { DataBindingDirective } from '../databinding.directive';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -25,7 +24,7 @@ export declare class ContextService {
     topToolbarNavigation: GridToolbarNavigationService;
     bottomToolbarNavigation: GridToolbarNavigationService;
     navigable: boolean;
-    dataBindingDirective: DataBindingDirective | GroupBindingDirective;
+    groupBindingDirective: GroupBindingDirective;
     constructor(renderer: Renderer2, localization: LocalizationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;

package/databinding.directive.d.ts

@@ -10,7 +10,6 @@ import { GridDataResult } from './data/data.collection';
 import { LocalDataChangesService } from './editing/local-data-changes.service';
 import { RowReorderEvent } from './row-reordering/types';
 import { RowReorderService } from './row-reordering/row-reorder.service';
-import { ContextService } from './common/provider.service';
 import * as i0 from "@angular/core";
 /**
  * A directive that handles in-memory data operations like [paging]({% slug paging_grid %}),
@@ -68,7 +67,7 @@ export declare class DataBindingDirective implements OnInit, OnDestroy, DoCheck,
     private stateChangeSubscription;
     private dataChangedSubscription;
     private rowReorderSubscription;
-    constructor(grid: GridComponent, changeDetector?: ChangeDetectorRef, localDataChangesService?: LocalDataChangesService, rowReorderService?: RowReorderService, ctx?: ContextService);
+    constructor(grid: GridComponent, changeDetector?: ChangeDetectorRef, localDataChangesService?: LocalDataChangesService, rowReorderService?: RowReorderService);
     /**
      * @hidden
      */

package/esm2022/aggregates/selection-aggregate.service.mjs

@@ -5,16 +5,19 @@
 import { Injectable } from '@angular/core';
 import { ContextService } from '../common/provider.service';
 import { ColumnInfoService } from '../common/column-info.service';
+import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { recursiveFlatMap } from '../utils';
 import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
-import * as i2 from "../common/column-info.service";
+import * as i2 from "../editing/local-data-changes.service";
+import * as i3 from "../common/column-info.service";
 /**
  * @hidden
  */
 export class CellSelectionAggregateService {
     ctx;
+    dataChanges;
     columnInfoService;
     selectedItems = [];
     groupedAggregates = { dates: [], numbers: [], booleans: [] };
@@ -30,8 +33,9 @@ export class CellSelectionAggregateService {
         latest: null
     };
     sub = new Subscription();
-    constructor(ctx, columnInfoService) {
+    constructor(ctx, dataChanges, columnInfoService) {
         this.ctx = ctx;
+        this.dataChanges = dataChanges;
         this.columnInfoService = columnInfoService;
     }
     ngOnDestroy() {
@@ -192,9 +196,9 @@ export 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: i1.ContextService }, { token: i2.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService, deps: [{ token: i1.ContextService }, { token: i2.LocalDataChangesService }, { token: i3.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: i1.ContextService }, { type: i2.ColumnInfoService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.LocalDataChangesService }, { type: i3.ColumnInfoService }]; } });

package/esm2022/column-menu/column-menu-item.directive.mjs

@@ -12,7 +12,7 @@ import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 /**
- * 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

package/esm2022/common/provider.service.mjs

@@ -23,7 +23,7 @@ export class ContextService {
     topToolbarNavigation;
     bottomToolbarNavigation;
     navigable;
-    dataBindingDirective;
+    groupBindingDirective;
     constructor(renderer, localization) {
         this.renderer = renderer;
         this.localization = localization;

package/esm2022/databinding.directive.mjs

@@ -8,12 +8,10 @@ import { GridComponent } from './grid.component';
 import { anyChanged, isPresent } from './utils';
 import { LocalDataChangesService } from './editing/local-data-changes.service';
 import { RowReorderService } from './row-reordering/row-reorder.service';
-import { ContextService } from './common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./grid.component";
 import * as i2 from "./editing/local-data-changes.service";
 import * as i3 from "./row-reordering/row-reorder.service";
-import * as i4 from "./common/provider.service";
 /**
  * A directive that handles in-memory data operations like [paging]({% slug paging_grid %}),
  * [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %}).
@@ -94,7 +92,7 @@ export class DataBindingDirective {
     stateChangeSubscription;
     dataChangedSubscription;
     rowReorderSubscription;
-    constructor(grid, changeDetector, localDataChangesService, rowReorderService, ctx) {
+    constructor(grid, changeDetector, localDataChangesService, rowReorderService) {
         this.grid = grid;
         this.changeDetector = changeDetector;
         this.localDataChangesService = localDataChangesService;
@@ -102,7 +100,6 @@ export class DataBindingDirective {
         if (localDataChangesService) {
             this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(this));
         }
-        ctx && (ctx.dataBindingDirective = this);
     }
     /**
      * @hidden
@@ -197,7 +194,7 @@ export class DataBindingDirective {
         this.grid.updateNavigationMetadata();
         this.dataChanged = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }, { token: i3.RowReorderService }, { token: i4.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }, { token: i3.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: [{
@@ -207,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoGridBinding',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }, { type: i3.RowReorderService }, { type: i4.ContextService }]; }, propDecorators: { skip: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }, { type: i3.RowReorderService }]; }, propDecorators: { skip: [{
                 type: Input
             }], sort: [{
                 type: Input

package/esm2022/grid.component.mjs

@@ -921,8 +921,10 @@ export class GridComponent {
     dragTargetContainer;
     dropTargetContainer;
     dialogContainer;
+    /**
+     * @hidden
+     */
     adaptiveRenderer;
-    listComponent;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -1607,12 +1609,12 @@ export 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;
-        if (state.currentData) {
-            this.data = state.currentData;
-        }
-        this.changeDetectorRef.markForCheck();
+        this.data = state.currentData;
+        this.changeNotification.notify();
+        this.changeDetectorRef.detectChanges();
     }
     traverseColumns(columns, callback) {
         columns.forEach((column) => {
@@ -1823,9 +1825,6 @@ export class GridComponent {
                 source.locked = target.locked;
             }
             this.columnsContainer.refresh();
-            if (this.virtualColumns) {
-                this.listComponent.updateViewportColumns();
-            }
             this.changeDetectorRef.markForCheck();
         });
     }
@@ -2248,8 +2247,7 @@ export class GridComponent {
                 column = toAdd.shift();
                 viewportColumns.push(column);
                 if (column.isColumnGroup) {
-                    const children = columnsArray.filter(c => c.parent && c.parent.id === column.id);
-                    toAdd.unshift(...children);
+                    toAdd.unshift(...column.childrenArray);
                 }
             }
             const lastFromGroup = viewportColumns[viewportColumns.length - 1];
@@ -2305,8 +2303,8 @@ export class GridComponent {
         }
         if (this.groupsService.isExpanded({ groupIndex: index }) !== expand) {
             this.groupsService.toggleRow({ index }, false);
-            if (this.ctx.dataBindingDirective && isPresent(this.ctx.dataBindingDirective.groupExpand)) {
-                this.ctx.dataBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
+            if (this.ctx.groupBindingDirective) {
+                this.ctx.groupBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
             }
         }
     }
@@ -2379,7 +2377,7 @@ export 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: "listComponent", first: true, predicate: ListComponent, 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: "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"
@@ -4196,7 +4194,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], adaptiveRenderer: [{
                 type: ViewChild,
                 args: [AdaptiveRendererComponent]
-            }], listComponent: [{
-                type: ViewChild,
-                args: [ListComponent]
             }] } });

package/esm2022/grouping/group-scroll-binding.directive.mjs

@@ -196,9 +196,9 @@ export class GroupBindingDirective extends DataBindingDirective {
     groups;
     gridSubs = new Subscription();
     constructor(changeDetector, localDataChangesService, ctxService, groupsService) {
-        super(ctxService.grid, changeDetector, localDataChangesService, null, ctxService);
+        super(ctxService.grid, changeDetector, localDataChangesService);
         this.groupsService = groupsService;
-        ctxService.dataBindingDirective = this;
+        ctxService.groupBindingDirective = this;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -284,12 +284,6 @@ export class GroupBindingDirective extends DataBindingDirective {
         this.grid.data = this.dataResult(this.state.skip, this.state.take);
     }
     process(state) {
-        if (this.grid.isVirtual && (!isPresent(state.take) || state.take === 0)) {
-            return {
-                data: [],
-                total: this.originalData?.length || 0
-            };
-        }
         if (state.group && state.group.length) {
             const groups = this.processGroups(state);
             this.grid.skip -= skippedHeaders(groups.data[0]);

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1751450548,
-    version: '19.2.0-develop.14',
+    publishDate: 1750851099,
+    version: '19.2.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rendering/list.component.mjs

@@ -270,11 +270,10 @@ export class ListComponent {
         if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
             this.updateViewportColumns();
         }
-        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !this.ctx.grid.pageSize;
-        if (shouldCalculatePageSize) {
+        if (this.isVirtual && this.ctx.grid && !this.ctx.grid.pageSize) {
             const calculatedPageSize = this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
-                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.ngZone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
                     this.ctx.grid.pageSize = calculatedPageSize;
                     this.ngZone.run(() => {
                         this.pageChange.emit({
@@ -353,36 +352,6 @@ export 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);
@@ -608,6 +577,36 @@ export 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;

package/esm2022/state-management/undo-redo.directive.mjs

@@ -8,20 +8,15 @@ import { GridComponent } from '../grid.component';
 import { UndoRedoEvent } from './grid-state.models';
 import { Subscription } from 'rxjs';
 import { EditService } from '../editing/edit.service';
-import { filter } from 'rxjs/operators';
+import { filter, tap } from 'rxjs/operators';
 import { UndoRedoService } from './undo-redo.service';
-import { hasObservers, isPresent } from '@progress/kendo-angular-common';
+import { hasObservers } from '@progress/kendo-angular-common';
 import { ChangeNotificationService } from '../data/change-notification.service';
-import { ContextService } from '../common/provider.service';
-import { LocalDataChangesService } from '../editing/local-data-changes.service';
-import { recursiveFlatMap } from '../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/edit.service";
 import * as i3 from "./undo-redo.service";
 import * as i4 from "../data/change-notification.service";
-import * as i5 from "../common/provider.service";
-import * as i6 from "../editing/local-data-changes.service";
 /**
  * Represents the directive that manages undo-redo operations in the Grid.
  * Use this directive to enable undo and redo functionality for user actions in the Grid.
@@ -38,17 +33,11 @@ export 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.
      */
@@ -66,17 +55,24 @@ export class UndoRedoDirective {
     stack;
     subs = new Subscription();
     addToState = true;
-    constructor(host, editService, undoRedoService, changeNotification, ctx, localDataChangesService) {
+    constructor(host, editService, undoRedoService, changeNotification) {
         this.host = host;
         this.editService = editService;
         this.undoRedoService = undoRedoService;
         this.changeNotification = changeNotification;
-        this.ctx = ctx;
-        this.localDataChangesService = localDataChangesService;
         this.host.undoRedoService = this.undoRedoService;
     }
     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: structuredClone(this.host.currentState)
+        });
         this.subs = this.host.gridStateChange.subscribe((state) => {
             if (this.addToState) {
                 this.stack.add({
@@ -87,7 +83,7 @@ export class UndoRedoDirective {
                         filter: state.filter,
                         group: state.group
                     },
-                    gridState: state
+                    gridState: structuredClone(state)
                 });
             }
             let stackEndPointReached;
@@ -100,83 +96,36 @@ export class UndoRedoDirective {
             this.undoRedoService.stackEndReached.next(stackEndPointReached);
         });
         this.subs.add(this.editService.changes
-            .pipe(filter((event) => event.action === 'save' || event.action === 'remove'))
+            .pipe(filter(event => event.action === 'save' || event.action === 'remove'), tap(event => this.undoRedoService.originalEvent = event))
             .subscribe(event => {
             this.stack.add({
-                originalEvent: { ...event, dataItem: structuredClone(event.dataItem) },
-                gridState: this.host.currentState
+                originalEvent: event,
+                gridState: structuredClone(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(() => {
-            if (!this.ctx.dataBindingDirective) {
-                this.stack.current.gridState = this.host.currentState;
-            }
-        }));
+        this.subs.add(this.changeNotification.changes.subscribe(() => 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;
                 }
-                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);
+                this.stack[`${action.toLowerCase()}`]();
                 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();
-                const originalAction = event.originalEvent.action;
-                const isLocalData = isPresent(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]);
-                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 1, 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 } = event.gridState;
-                        this.host.dataStateChange.emit({ skip, take, sort, filter, group });
-                    }
-                }
+                this.host.loadState(this.stack.current.gridState);
             }));
         });
-    }
-    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
-        });
+        this.subs.add(this.undoRedoService.setState.subscribe((state) => this.stack.add({ originalEvent: 'dataChange', gridState: state })));
     }
     ngOnDestroy() {
         this.stack.clear();
@@ -218,15 +167,8 @@ export class UndoRedoDirective {
         }
         this.undoRedoService.stackEndReached.next(false);
     }
-    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: i1.GridComponent }, { token: i2.EditService }, { token: i3.UndoRedoService }, { token: i4.ChangeNotificationService }, { token: i5.ContextService }, { token: i6.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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, deps: [{ token: i1.GridComponent }, { token: i2.EditService }, { token: i3.UndoRedoService }, { token: i4.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, decorators: [{
             type: Directive,
@@ -236,9 +178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoGridUndoRedo',
                     providers: [UndoRedoService]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.EditService }, { type: i3.UndoRedoService }, { type: i4.ChangeNotificationService }, { type: i5.ContextService }, { type: i6.LocalDataChangesService }]; }, propDecorators: { maxStoredStates: [{
-                type: Input
-            }], itemIdKey: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.EditService }, { type: i3.UndoRedoService }, { type: i4.ChangeNotificationService }]; }, propDecorators: { maxStoredStates: [{
                 type: Input
             }], onUndo: [{
                 type: Output,

package/esm2022/state-management/undo-redo.service.mjs

@@ -13,6 +13,7 @@ export 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 });
 }

package/esm2022/state-management/undo-redo.stack.mjs

@@ -139,12 +139,6 @@ export 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