Merge pull request #11436 from IgniteUI/mkirova/fix-fix-11421-master

fix(igxGrid): Ensure columnInit is called for all columns when new co…

Author: dkamburov

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -6382,7 +6382,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             let added = false;
             let removed = false;
             diff.forEachAddedItem((record: IterableChangeRecord<IgxColumnComponent>) => {
-                this.columnInit.emit(record.item);
                 added = true;
                 if (record.item.pinned) {
                     this._pinnedColumns.push(record.item);
@@ -6391,7 +6390,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 }
             });
 
-            this.initColumns(this.columnList);
+            this.initColumns(this.columnList, (col: IgxColumnComponent) => this.columnInit.emit(col));
 
             diff.forEachRemovedItem((record: IterableChangeRecord<IgxColumnComponent | IgxColumnGroupComponent>) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -918,7 +918,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
             spyOn(grid.columnInit, 'emit').and.callThrough();
             componentInstance.mchCount.push({});
             fixture.detectChanges();
-            const colsCount = 2; // 1 col group and 1 col
+            const colsCount = grid.unpinnedColumns.length; // all
             expect(grid.columnInit.emit).toHaveBeenCalledTimes(colsCount);
         });
     });

projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

@@ -344,6 +344,8 @@ describe('IgxGridState - input properties #grid', () => {
         const fix = TestBed.createComponent(IgxGridStateComponent);
         fix.detectChanges();
         const state = fix.componentInstance.state;
+        const grid = fix.componentInstance.grid;
+        spyOn(grid.columnInit, 'emit').and.callThrough();
         /* eslint-disable max-len */
         const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}';
         const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}';
@@ -358,6 +360,7 @@ describe('IgxGridState - input properties #grid', () => {
         HelperFunctions.verifyColumns(columnsStateObject.columns, gridState);
         gridState = state.getState(true, 'columns');
         expect(gridState).toBe(columnsState);
+        expect(grid.columnInit.emit).toHaveBeenCalledTimes(columnsStateObject.columns.length);
     });
 
     it('setState should correctly restore grid paging state from string', () => {

src/app/grid-state/grid-state.component.html

@@ -14,7 +14,7 @@
                     width="1200px" height="550px" [autoGenerate]="false" [data]="localData" primaryKey="EmployeeID"
                     [rowEditable]="false" [allowFiltering]="true" [allowAdvancedFiltering]="true"
                     [filterMode]="'excelStyleFilter'" displayDensity="cosy" cellSelection="multiple"
-                    rowSelection="multiple">
+                    rowSelection="multiple" (columnInit)="onColumnInit($event)">
                     <igx-grid-toolbar [displayDensity]="grid.displayDensity">
                         <igx-grid-toolbar-actions>
                             <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
@@ -240,3 +240,7 @@
         </div>
     </div>
 </ng-template>
+
+<ng-template igxCell #activeTemplate let-column let-cell="cell">
+    Hi I'm {{ cell.value }}
+  </ng-template>

src/app/grid-state/grid-state.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, ViewChild, QueryList, ViewChildren } from '@angular/core';
+import { Component, OnInit, ViewChild, QueryList, ViewChildren, TemplateRef } from '@angular/core';
 import { FilteringExpressionsTree, FilteringLogic,
   IgxNumberSummaryOperand, IgxSummaryResult, IGridState, IgxGridStateDirective,
   IgxExpansionPanelComponent, IgxGridBaseDirective,
-  IGridStateOptions, GridFeatures, GridColumnDataType } from 'igniteui-angular';
+  IGridStateOptions, GridFeatures, GridColumnDataType, IgxColumnComponent } from 'igniteui-angular';
 import { take } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { TREEGRID_FLAT_DATA, EMPLOYEE_DATA, employeesData } from './data';
@@ -205,6 +205,17 @@ export class GridSaveStateComponent implements OnInit {
         window.localStorage.removeItem(key);
     }
 
+    @ViewChild('activeTemplate', { static: true })
+    public activeTemplate: TemplateRef<any>;
+
+    public onColumnInit(column: IgxColumnComponent) {
+        const key = `${this.gridId}-state`;
+        const state = window.localStorage.getItem(key);
+        if (state) {
+            column.bodyTemplate = this.activeTemplate;
+        }
+      }
+
     public reloadPage() {
         window.location.reload();
     }