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

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

@@ -7,7 +7,6 @@ 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
@@ -22,13 +21,12 @@ 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, dataChanges: LocalDataChangesService, columnInfoService: ColumnInfoService);
+    constructor(ctx: ContextService, 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,6 +7,7 @@ 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
@@ -24,7 +25,7 @@ export declare class ContextService {
     topToolbarNavigation: GridToolbarNavigationService;
     bottomToolbarNavigation: GridToolbarNavigationService;
     navigable: boolean;
-    groupBindingDirective: GroupBindingDirective;
+    dataBindingDirective: DataBindingDirective | GroupBindingDirective;
     constructor(renderer: Renderer2, localization: LocalizationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;

package/databinding.directive.d.ts

@@ -10,6 +10,7 @@ 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 %}),
@@ -67,7 +68,7 @@ export declare class DataBindingDirective implements OnInit, OnDestroy, DoCheck,
     private stateChangeSubscription;
     private dataChangedSubscription;
     private rowReorderSubscription;
-    constructor(grid: GridComponent, changeDetector?: ChangeDetectorRef, localDataChangesService?: LocalDataChangesService, rowReorderService?: RowReorderService);
+    constructor(grid: GridComponent, changeDetector?: ChangeDetectorRef, localDataChangesService?: LocalDataChangesService, rowReorderService?: RowReorderService, ctx?: ContextService);
     /**
      * @hidden
      */

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

@@ -5,19 +5,16 @@
 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 "../editing/local-data-changes.service";
-import * as i3 from "../common/column-info.service";
+import * as i2 from "../common/column-info.service";
 /**
  * @hidden
  */
 export class CellSelectionAggregateService {
     ctx;
-    dataChanges;
     columnInfoService;
     selectedItems = [];
     groupedAggregates = { dates: [], numbers: [], booleans: [] };
@@ -33,9 +30,8 @@ export class CellSelectionAggregateService {
         latest: null
     };
     sub = new Subscription();
-    constructor(ctx, dataChanges, columnInfoService) {
+    constructor(ctx, columnInfoService) {
         this.ctx = ctx;
-        this.dataChanges = dataChanges;
         this.columnInfoService = columnInfoService;
     }
     ngOnDestroy() {
@@ -196,9 +192,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.LocalDataChangesService }, { token: i3.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.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.LocalDataChangesService }, { type: i3.ColumnInfoService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.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;
-    groupBindingDirective;
+    dataBindingDirective;
     constructor(renderer, localization) {
         this.renderer = renderer;
         this.localization = localization;

package/esm2022/databinding.directive.mjs

@@ -8,10 +8,12 @@ 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 %}).
@@ -92,7 +94,7 @@ export class DataBindingDirective {
     stateChangeSubscription;
     dataChangedSubscription;
     rowReorderSubscription;
-    constructor(grid, changeDetector, localDataChangesService, rowReorderService) {
+    constructor(grid, changeDetector, localDataChangesService, rowReorderService, ctx) {
         this.grid = grid;
         this.changeDetector = changeDetector;
         this.localDataChangesService = localDataChangesService;
@@ -100,6 +102,7 @@ export class DataBindingDirective {
         if (localDataChangesService) {
             this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(this));
         }
+        ctx && (ctx.dataBindingDirective = this);
     }
     /**
      * @hidden
@@ -194,7 +197,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 }], 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 }, { token: i4.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: [{
@@ -204,7 +207,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 }]; }, propDecorators: { skip: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }, { type: i3.RowReorderService }, { type: i4.ContextService }]; }, propDecorators: { skip: [{
                 type: Input
             }], sort: [{
                 type: Input

package/esm2022/grid.component.mjs

@@ -100,6 +100,7 @@ import { AdaptiveGridService } from './common/adaptiveness.service';
 import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.component';
 import { ColumnMenuService } from './column-menu/column-menu.service';
 import { MenuTabbingService } from './filtering/menu/menu-tabbing.service';
+import { GroupBindingDirective } from './grouping/group-scroll-binding.directive';
 import { DataMappingService } from './data/data-mapping.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
@@ -921,10 +922,8 @@ export class GridComponent {
     dragTargetContainer;
     dropTargetContainer;
     dialogContainer;
-    /**
-     * @hidden
-     */
     adaptiveRenderer;
+    listComponent;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -1609,12 +1608,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;
-        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) => {
@@ -1825,6 +1824,9 @@ export class GridComponent {
                 source.locked = target.locked;
             }
             this.columnsContainer.refresh();
+            if (this.virtualColumns) {
+                this.listComponent.updateViewportColumns();
+            }
             this.changeDetectorRef.markForCheck();
         });
     }
@@ -2247,7 +2249,8 @@ export 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];
@@ -2303,8 +2306,8 @@ export 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 });
             }
         }
     }
@@ -2377,7 +2380,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: "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"
@@ -4194,4 +4197,7 @@ 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);
+        super(ctxService.grid, changeDetector, localDataChangesService, null, ctxService);
         this.groupsService = groupsService;
-        ctxService.groupBindingDirective = this;
+        ctxService.dataBindingDirective = this;
     }
     ngOnInit() {
         super.ngOnInit();

package/esm2022/package-metadata.mjs

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

package/esm2022/rendering/list.component.mjs

@@ -270,7 +270,8 @@ export 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(() => {
@@ -352,6 +353,36 @@ 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);
@@ -577,36 +608,6 @@ 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/selection/selection-checkbox.directive.mjs

@@ -82,7 +82,7 @@ export 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);

package/esm2022/selection/selection.service.mjs

@@ -143,6 +143,8 @@ export 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);
@@ -231,13 +233,14 @@ export 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;
@@ -248,6 +251,9 @@ export 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();
         }
@@ -255,10 +261,23 @@ export 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;

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

@@ -8,15 +8,20 @@ import { GridComponent } from '../grid.component';
 import { UndoRedoEvent } from './grid-state.models';
 import { Subscription } from 'rxjs';
 import { EditService } from '../editing/edit.service';
-import { filter, tap } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
 import { UndoRedoService } from './undo-redo.service';
-import { hasObservers } from '@progress/kendo-angular-common';
+import { hasObservers, isPresent } 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.
@@ -33,11 +38,17 @@ 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.
      */
@@ -55,24 +66,17 @@ export 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() {
         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({
@@ -83,7 +87,7 @@ export class UndoRedoDirective {
                         filter: state.filter,
                         group: state.group
                     },
-                    gridState: structuredClone(state)
+                    gridState: state
                 });
             }
             let stackEndPointReached;
@@ -96,36 +100,83 @@ export 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(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.subs.add(this.undoRedoService.setState.subscribe((state) => this.stack.add({ originalEvent: 'dataChange', gridState: state })));
+    }
+    ngAfterViewInit() {
+        this.stack.add({
+            originalEvent: {
+                skip: this.host.skip,
+                take: this.host.pageSize,
+                sort: this.host.sort,
+                filter: this.host.filter,
+                group: this.host.group
+            }, gridState: this.host.currentState
+        });
     }
     ngOnDestroy() {
         this.stack.clear();
@@ -167,8 +218,15 @@ export 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: 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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, decorators: [{
             type: Directive,
@@ -178,7 +236,9 @@ 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 }]; }, propDecorators: { maxStoredStates: [{
+        }], 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: [{
                 type: Input
             }], onUndo: [{
                 type: Output,