From 67e6f51b2dd20acc392ef963188de988c1c33c07 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Fri, 30 Jan 2026 18:29:52 +0200 Subject: [PATCH 1/5] test(grid): Add a test --- .../grids/grid/src/grid.component.spec.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts index 3a09da1118b..32390468593 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts @@ -88,6 +88,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 = []; From 4d62cc850c0f26db715ff46a2a03c5aaf349ddf4 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 11:24:44 +0200 Subject: [PATCH 2/5] fix(grid): trigger setup columns when autoGenerate changes --- .../grids/grid/src/grid-base.directive.ts | 16 ++++++++++++++-- .../src/row-island.component.ts | 2 +- .../grids/pivot-grid/src/pivot-grid.component.ts | 2 +- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 5f9569e92a3..90f9bb93fef 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -30,7 +30,9 @@ import { ViewChildren, ViewContainerRef, DOCUMENT, - inject + inject, + SimpleChanges, + OnChanges } from '@angular/core'; import { areEqualArrays, @@ -131,7 +133,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 { /* blazorSuppress */ public readonly validation = inject(IgxGridValidationService); @@ -182,6 +184,7 @@ export abstract class IgxGridBaseDirective implements GridType, * * ``` */ + @WatchChanges() @Input({ transform: booleanAttribute }) public autoGenerate = false; @@ -4240,6 +4243,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/grids/hierarchical-grid/src/row-island.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts index e3d95a46250..2d3b2827a77 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts @@ -455,7 +455,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/grids/pivot-grid/src/pivot-grid.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts index 6f5632dfedb..5a29c6189ed 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts @@ -1014,7 +1014,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 26584f560407c6b7a6fb2e9753ddd1d1e6e50f0a Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 11:37:23 +0200 Subject: [PATCH 3/5] fix(grid): add additional check if there is data --- projects/igniteui-angular/grids/grid/src/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 90f9bb93fef..ceace4667f0 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -4247,7 +4247,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 162fa2c0ffab1755782335c6a482bddccbd4c4d0 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 12:12:46 +0200 Subject: [PATCH 4/5] fix(watch-changes): improve ngOnChanges check during initialization --- projects/igniteui-angular/grids/core/src/watch-changes.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/core/src/watch-changes.ts b/projects/igniteui-angular/grids/core/src/watch-changes.ts index d4db75c573a..cbd4bb75f28 100644 --- a/projects/igniteui-angular/grids/core/src/watch-changes.ts +++ b/projects/igniteui-angular/grids/core/src/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 d5e3e312d5d2ad990d0ed3c92998989abd685122 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 15:23:41 +0200 Subject: [PATCH 5/5] fix(grid): refine ngOnChanges logic for autoGenerate --- .../grids/grid/src/grid-base.directive.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index ceace4667f0..06653664d43 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -4020,8 +4020,8 @@ export abstract class IgxGridBaseDirective implements GridType, const activeRow = this.navigation.activeNode?.row; const selectedCellIndexes = this.selectionService.selection - ? Array.from(this.selectionService.selection.keys()) - : []; + ? Array.from(this.selectionService.selection.keys()) + : []; this._activeRowIndexes = [activeRow, ...selectedCellIndexes]; return this._activeRowIndexes; } @@ -4247,8 +4247,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(); } } @@ -6758,7 +6759,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) => {