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

package/README.md

@@ -4,9 +4,14 @@
 
 ## Kendo UI for Angular Data Grid Component
 
-> * 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!
+> * 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!
 
 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/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,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 { DataBindingDirective } from '../databinding.directive';
+import type { DataBindingDirective } from '../databinding.directive';
 import * as i0 from "@angular/core";
 /**
  * @hidden

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/column-resizing/table.directive.mjs

@@ -94,12 +94,10 @@ export class TableDirective {
         if (isConstrainedMode && !this.service.autoFitResize) {
             this.renderer.setStyle(this.element.nativeElement, 'width', this.service.originalWidth + 'px');
         }
-        else {
-            if (!this.virtualColumns || this.locked) {
-                const delta = deltas.reduce((sum, item) => sum + item, 0);
-                const width = this.service.originalWidth + delta;
-                this.renderer.setStyle(this.element.nativeElement, 'width', width + 'px');
-            }
+        else if (!this.virtualColumns || this.locked) {
+            const delta = deltas.reduce((sum, item) => sum + item, 0);
+            const width = this.service.originalWidth + delta;
+            this.renderer.setStyle(this.element.nativeElement, 'width', width + 'px');
         }
         this.cdr.detectChanges();
     }

package/esm2022/grid.component.mjs

@@ -100,7 +100,6 @@ 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";
@@ -922,10 +921,8 @@ export class GridComponent {
     dragTargetContainer;
     dropTargetContainer;
     dialogContainer;
-    /**
-     * @hidden
-     */
     adaptiveRenderer;
+    listComponent;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -1826,6 +1823,9 @@ export class GridComponent {
                 source.locked = target.locked;
             }
             this.columnsContainer.refresh();
+            if (this.virtualColumns) {
+                this.listComponent.updateViewportColumns();
+            }
             this.changeDetectorRef.markForCheck();
         });
     }
@@ -2248,7 +2248,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];
@@ -2304,7 +2305,7 @@ export class GridComponent {
         }
         if (this.groupsService.isExpanded({ groupIndex: index }) !== expand) {
             this.groupsService.toggleRow({ index }, false);
-            if (this.ctx.dataBindingDirective && this.ctx.dataBindingDirective instanceof GroupBindingDirective) {
+            if (this.ctx.dataBindingDirective && isPresent(this.ctx.dataBindingDirective.groupExpand)) {
                 this.ctx.dataBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
             }
         }
@@ -2378,7 +2379,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"
@@ -4195,4 +4196,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

@@ -284,6 +284,12 @@ 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: 1751032619,
-    version: '19.2.0-develop.8',
+    publishDate: 1751463227,
+    version: '19.2.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rendering/list.component.mjs

@@ -274,7 +274,7 @@ export class ListComponent {
         if (shouldCalculatePageSize) {
             const calculatedPageSize = this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
-                this.ngZone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                     this.ctx.grid.pageSize = calculatedPageSize;
                     this.ngZone.run(() => {
                         this.pageChange.emit({
@@ -353,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);
@@ -578,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/state-management/undo-redo.directive.mjs

@@ -77,15 +77,6 @@ export class UndoRedoDirective {
     }
     ngOnInit() {
         this.stack = new UndoRedoStack(this.maxStoredStates);
-        this.stack.add({
-            originalEvent: {
-                skip: this.host.skip,
-                take: this.host.pageSize,
-                sort: this.host.sort,
-                filter: this.host.filter,
-                group: this.host.group
-            }, gridState: this.host.currentState
-        });
         this.subs = this.host.gridStateChange.subscribe((state) => {
             if (this.addToState) {
                 this.stack.add({
@@ -156,7 +147,7 @@ export class UndoRedoDirective {
                 if (isSaveOrRemove) {
                     if (originalAction === 'save') {
                         const stateItem = this.getGridDataItems(this.stack.current.gridState.currentData).find(item => item[this.itemIdKey] === event.originalEvent.dataItem[this.itemIdKey]);
-                        Object.assign(event.originalEvent.originalDataItem, stateItem);
+                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 1, stateItem);
                     }
                     else if (action === 'Undo') {
                         this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 0, event.originalEvent.dataItem);
@@ -169,13 +160,24 @@ export class UndoRedoDirective {
                 else {
                     this.host.loadState({ ...this.stack.current.gridState, currentData: null });
                     if (this.isDataStateChangeEvent(event.originalEvent)) {
-                        const { skip, take, sort, filter, group } = this.stack.current.gridState;
+                        const { skip, take, sort, filter, group } = event.gridState;
                         this.host.dataStateChange.emit({ skip, take, sort, filter, group });
                     }
                 }
             }));
         });
     }
+    ngAfterViewInit() {
+        this.stack.add({
+            originalEvent: {
+                skip: this.host.skip,
+                take: this.host.pageSize,
+                sort: this.host.sort,
+                filter: this.host.filter,
+                group: this.host.group
+            }, gridState: this.host.currentState
+        });
+    }
     ngOnDestroy() {
         this.stack.clear();
         this.stack = null;