From 20ed8e9378328ba7939dcff2d0827e699be160da Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 11:24:44 +0200 Subject: [PATCH 1/5] fix(grid): trigger setup columns when autoGenerate changes --- .../src/lib/grids/grid-base.directive.ts | 16 ++++++++++++++-- .../hierarchical-grid/row-island.component.ts | 2 +- .../lib/grids/pivot-grid/pivot-grid.component.ts | 2 +- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index b53f567bd2a..8c3280323d8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -31,7 +31,9 @@ import { ViewChild, ViewChildren, ViewContainerRef, - DOCUMENT + DOCUMENT, + SimpleChanges, + OnChanges } from '@angular/core'; import { areEqualArrays, columnFieldPath, formatDate, resizeObservable } from '../core/utils'; import { IgcTrialWatermark } from 'igniteui-trial-watermark'; @@ -210,7 +212,7 @@ const MIN_ROW_EDITING_COUNT_THRESHOLD = 2; wcSkipComponentSuffix */ @Directive() export abstract class IgxGridBaseDirective implements GridType, - OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit { + OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit, OnChanges { /** * Gets/Sets the display time for the row adding snackbar notification. @@ -231,6 +233,7 @@ export abstract class IgxGridBaseDirective implements GridType, * * ``` */ + @WatchChanges() @Input({ transform: booleanAttribute }) public autoGenerate = false; @@ -4330,6 +4333,15 @@ export abstract class IgxGridBaseDirective implements GridType, } } + /** + * @hidden @internal + */ + public ngOnChanges(changes: SimpleChanges) { + if (changes.autoGenerate?.currentValue && this.data.length > 0 && this.columnList.length === 0) { + this.setupColumns() + } + } + /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts index a0761125179..6875ee717e5 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts @@ -504,7 +504,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective /** * @hidden */ - public ngOnChanges(changes) { + public override ngOnChanges(changes) { this.layoutChange.emit(changes); if (!this.isInit) { this.initialChanges.push(changes); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 3d1010770ce..82d79459701 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -1103,7 +1103,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni /** * @hidden @internal */ - public ngOnChanges(changes: SimpleChanges) { + public override ngOnChanges(changes: SimpleChanges) { if (changes.superCompactMode && !changes.superCompactMode.isFirstChange()) { this._shouldUpdateSizes = true; resizeObservable(this.verticalScrollContainer.displayContainer).pipe(take(1), takeUntil(this.destroy$)).subscribe(() => this.resizeNotify.next()); From 3b373733e940ce2913988f11ba8cd3e0ac2a1fa6 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 11:37:23 +0200 Subject: [PATCH 2/5] fix(grid): add additional check if there is data --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 8c3280323d8..364f446e0f2 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -4337,7 +4337,7 @@ export abstract class IgxGridBaseDirective implements GridType, * @hidden @internal */ public ngOnChanges(changes: SimpleChanges) { - if (changes.autoGenerate?.currentValue && this.data.length > 0 && this.columnList.length === 0) { + if (changes.autoGenerate?.currentValue && this.data?.length > 0 && this.columnList?.length === 0) { this.setupColumns() } } From c382667c7c8e382b94e6c4524b2430ac43c7ab04 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 12:12:46 +0200 Subject: [PATCH 3/5] fix(watch-changes): improve ngOnChanges check during initialization --- projects/igniteui-angular/src/lib/grids/watch-changes.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/watch-changes.ts b/projects/igniteui-angular/src/lib/grids/watch-changes.ts index d4db75c573a..cbd4bb75f28 100644 --- a/projects/igniteui-angular/src/lib/grids/watch-changes.ts +++ b/projects/igniteui-angular/src/lib/grids/watch-changes.ts @@ -22,7 +22,8 @@ export function WatchChanges(): PropertyDecorator { const oldValue = this[key]; if (val !== oldValue || (typeof val === 'object' && val === oldValue)) { originalSetter.call(this, val); - if (this.ngOnChanges && !init) { + // Explicitly check whether the decorator is called during initialization + if (this.ngOnChanges && init !== undefined && !init) { // in case wacthed prop changes trigger ngOnChanges manually const changes: SimpleChanges = { [key]: new SimpleChange(oldValue, val, false) From 71e59216e5f837b6f4263f950f0e1ccc22c74837 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 15:23:41 +0200 Subject: [PATCH 4/5] fix(grid): refine ngOnChanges logic for autoGenerate --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 364f446e0f2..54b306605eb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -4337,8 +4337,9 @@ export abstract class IgxGridBaseDirective implements GridType, * @hidden @internal */ public ngOnChanges(changes: SimpleChanges) { - if (changes.autoGenerate?.currentValue && this.data?.length > 0 && this.columnList?.length === 0) { - this.setupColumns() + if (!changes.autoGenerate?.firstChange && changes.autoGenerate?.currentValue && this.data?.length > 0 && this.columnList?.length === 0) { + // Make sure to setup columns only after the grid is initialized and autoGenerate is changed + this.setupColumns(); } } @@ -6848,7 +6849,7 @@ export abstract class IgxGridBaseDirective implements GridType, } else if (this.width !== null) { this._columnWidth = Math.max(parseFloat(possibleWidth), this.minColumnWidth) + 'px' } else { - this._columnWidth = this.minColumnWidth + 'px'; + this._columnWidth = this.minColumnWidth + 'px'; } } this._columns.forEach((column: IgxColumnComponent) => { From 697eeef43a5a77bf7588de3c9c74bfd7dfa5f845 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Fri, 30 Jan 2026 18:29:52 +0200 Subject: [PATCH 5/5] test(grid): Add a test --- .../src/lib/grids/grid/grid.component.spec.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index a147231b3a8..e03c58effbd 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -98,6 +98,25 @@ describe('IgxGrid Component Tests #grid', () => { expect(fix.componentInstance.columnEventCount).toEqual(4); }); + it('should initialize a grid with data and columns if autoGenerate is set after the data', () => { + const fix = TestBed.createComponent(IgxGridTestComponent); + fix.componentInstance.data = [ + { Number: 1, String: '1', Boolean: true, Date: new Date(Date.now()) } + ]; + fix.componentInstance.columns = []; + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + + expect(grid.columns.length).toBe(0); + + fix.componentInstance.autoGenerate = true; + fix.detectChanges(); + + expect(grid.columns.length).toBe(4); + expect(grid.rowList.length).toBe(1); + }); + it('should initialize a grid and change column properties during initialization', () => { const fix = TestBed.createComponent(IgxGridTestComponent); fix.componentInstance.columns = [];