fix(grid): Setup columns when autoGenerate is set after the grid data - 22.0.x

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)

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,
@@ -139,7 +141,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);
@@ -197,6 +199,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
      * ```
      */
+    @WatchChanges()
     @Input({ transform: booleanAttribute })
     public autoGenerate = false;
 
@@ -4014,6 +4017,11 @@ export abstract class IgxGridBaseDirective implements GridType,
         }
 
         this.setupColumns();
+        this.columnList.changes
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((change: QueryList<IgxColumnComponent>) => {
+                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(() => {
@@ -4248,6 +4256,16 @@ 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 && this.columns.length === 0) {
+            // Make sure to setup columns only after the grid is initialized and autoGenerate is changed
+            this.setupColumns();
+        }
+    }
+
     /**
      * @hidden
      * @internal
@@ -6773,7 +6791,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();
@@ -6906,12 +6924,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<IgxColumnComponent>) => {
-                this.onColumnsChanged(change);
-            });
     }
 
     protected getColumnList() {

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 = [];

projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts

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

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts

@@ -1024,7 +1024,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());