Merge pull request #8389 from IgniteUI/ddincheva/bugFixs8294

fix(Grid): newly added column should be at the last position

Author: zdrawku

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

@@ -5159,6 +5159,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected onColumnsChanged(change: QueryList<IgxColumnComponent>) {
         const diff = this.columnListDiffer.diff(change);
+
         if (this.autoGenerate && this.columnList.length === 0 && this._autoGeneratedCols.length > 0) {
             // In Ivy if there are nested conditional templates the content children are re-evaluated
             // hence autogenerated columns are cleared and need to be reset.
@@ -5168,15 +5169,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (diff) {
             let added = false;
             let removed = false;
-
-            this.initColumns(this.columnList);
-
-
             diff.forEachAddedItem((record: IterableChangeRecord<IgxColumnComponent>) => {
                 this.onColumnInit.emit(record.item);
                 added = true;
+                record.item.pinned ? this._pinnedColumns.push(record.item) : this._unpinnedColumns.push(record.item);
             });
 
+            this.initColumns(this.columnList);
+
             diff.forEachRemovedItem((record: IterableChangeRecord<IgxColumnComponent | IgxColumnGroupComponent>) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {

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

@@ -5,7 +5,7 @@ import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './public_api';
 import { GridTemplateStrings, ColumnDefinitions } from '../../test-utils/template-strings.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicColumnsComponent } from '../../test-utils/grid-samples.spec';
+import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicColumnsComponent, GridAddColumnComponent } from '../../test-utils/grid-samples.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
@@ -27,7 +27,8 @@ describe('IgxGrid - Column properties #grid', () => {
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
                 ColumnHiddenFromMarkupComponent,
-                DynamicColumnsComponent
+                DynamicColumnsComponent,
+                GridAddColumnComponent
             ],
             imports: [IgxGridModule, NoopAnimationsModule]
         })
@@ -167,6 +168,34 @@ describe('IgxGrid - Column properties #grid', () => {
         expect(grid.columnList.last.field).toMatch('Name');
     }));
 
+    it('should add new column at the correct visible index', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridAddColumnComponent);
+        fix.detectChanges();
+        const grid = fix.componentInstance.grid;
+        const maxVindex = fix.componentInstance.columns.length - 1;
+
+        // add to unpinned area
+        fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string' });
+        fix.detectChanges();
+
+        let cityCol = grid.getColumnByName('City');
+        expect(cityCol.visibleIndex).toEqual(maxVindex + 1);
+
+        // remove the newly added column
+        fix.componentInstance.columns.pop();
+        fix.detectChanges();
+
+        cityCol = grid.getColumnByName('City');
+        expect(cityCol).not.toBeDefined();
+
+         // add to pinned area
+        fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string', pinned: true });
+        fix.detectChanges();
+
+        cityCol = grid.getColumnByName('City');
+        expect(cityCol.visibleIndex).toEqual( 1);
+    }));
+
     it('should apply columnWidth on columns that don\'t have explicit width', () => {
         const fix = TestBed.createComponent(ColumnCellFormatterComponent);
         fix.componentInstance.grid.columnWidth = '200px';

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -122,6 +122,33 @@ export class ColumnHiddenFromMarkupComponent extends BasicGridComponent {
     data = SampleTestData.personIDNameData();
 }
 
+@Component({
+    template: `
+        <igx-grid #grid1 [data]="data" [columnPinning]='true' [width]="'900px'" [height]="'600px'">
+            <igx-column *ngFor="let c of columns" [field]="c.field"
+                [header]="c.field"
+                [movable]="c.movable"
+                [width]="c.width"
+                [editable]="true"
+                [pinned]="c.pinned"
+                [dataType]="c.type">
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class GridAddColumnComponent extends BasicGridComponent implements OnInit {
+    public columns: Array<any>;
+    data = SampleTestData.contactInfoDataFull();
+    public ngOnInit(): void {
+        this.columns = [
+            { field: 'ID', width: 150, movable: true, type: 'string', pinned: true },
+            { field: 'CompanyName', width: 150, movable: true, type: 'string'},
+            { field: 'ContactName', width: 150, movable: true, type: 'string' },
+            { field: 'ContactTitle', width: 150, movable: true, type: 'string' },
+            { field: 'Address', width: 150, movable: true, type: 'string' }];
+    }
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid('', '',
                 ColumnDefinitions.idNameFormatter)