From dcd521bc3bfbbf5758b1319d89f602d4cf0eb109 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Fri, 30 Jan 2026 18:29:52 +0200 Subject: [PATCH 1/6] 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 07b9e63e6c7..d10f59ff8df 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts @@ -95,6 +95,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 e04d33c8807f4a656384827d8497f54ed73615d3 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 11:24:44 +0200 Subject: [PATCH 2/6] 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 8b0a93ac579..d7c9f783e38 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 { ViewContainerRef, DOCUMENT, inject, - InjectionToken + InjectionToken, + SimpleChanges, + OnChanges } from '@angular/core'; import { areEqualArrays, @@ -138,7 +140,7 @@ const MINIMUM_COLUMN_WIDTH = 136; 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); @@ -196,6 +198,7 @@ export abstract class IgxGridBaseDirective implements GridType, * * ``` */ + @WatchChanges() @Input({ transform: booleanAttribute }) public autoGenerate = false; @@ -4248,6 +4251,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 a9afd73559a..51e6ac41348 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 @@ -431,7 +431,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 aebbdbb6831..68e2b5265f0 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 @@ -1020,7 +1020,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 0645d4a277a3f47efd192c927074682e04e45fff Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 11:37:23 +0200 Subject: [PATCH 3/6] 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 d7c9f783e38..db5a6e6635f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -4255,7 +4255,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 28453e8165302f4bf3972a40d3af3de77b431d9f Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 12:12:46 +0200 Subject: [PATCH 4/6] 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 38e079ff337..5ad882b2201 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 7a6261d430030f84ce123f54246a6412ccafcbe5 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 2 Feb 2026 15:23:41 +0200 Subject: [PATCH 5/6] fix(grid): refine ngOnChanges logic for autoGenerate --- .../igniteui-angular/grids/grid/src/grid-base.directive.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 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 db5a6e6635f..9526cefcf64 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -4255,8 +4255,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(); } } @@ -6775,7 +6776,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._updateColumnDefaultWidths(); From 43073d6bde26d084a5bf7b930235795eb776f03a Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 20 Apr 2026 17:43:49 +0300 Subject: [PATCH 6/6] fix(*): move column list changes event subscription --- .../grids/grid/src/grid-base.directive.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 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 9526cefcf64..867d5601e84 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -4015,6 +4015,11 @@ export abstract class IgxGridBaseDirective implements GridType, } this.setupColumns(); + this.columnList.changes + .pipe(takeUntil(this.destroy$)) + .subscribe((change: QueryList) => { + this.onColumnsChanged(change); + }); this.toolbar.changes.pipe(filter(() => !this._init), takeUntil(this.destroy$)).subscribe(() => this.notifyChanges(true)); this.setUpPaginator(); this.paginationComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => { @@ -4255,7 +4260,7 @@ export abstract class IgxGridBaseDirective implements GridType, * @hidden @internal */ public ngOnChanges(changes: SimpleChanges) { - if (!changes.autoGenerate?.firstChange && changes.autoGenerate?.currentValue && this.data?.length > 0 && this.columnList?.length === 0) { + if (!changes.autoGenerate?.firstChange && changes.autoGenerate?.currentValue && this.data?.length > 0 && this.columnList?.length === 0 && this.columns.length === 0) { // Make sure to setup columns only after the grid is initialized and autoGenerate is changed this.setupColumns(); } @@ -6909,12 +6914,6 @@ export abstract class IgxGridBaseDirective implements GridType, this.initColumns(this._columns, (col: IgxColumnComponent) => this.columnInit.emit(col)); this.columnListDiffer.diff(this.columnList); this._calculateRowCount(); - - this.columnList.changes - .pipe(takeUntil(this.destroy$)) - .subscribe((change: QueryList) => { - this.onColumnsChanged(change); - }); } protected getColumnList() {