Merge pull request #7646 from IgniteUI/ddincheva/mrlVisibleIndex-master

Set column visible index correctly when hide/show MRL block --master

Author: zdrawku

projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts

@@ -100,7 +100,12 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
         this.children.forEach(child => child.hidden = value);
         if (this.grid && this.grid.columns && this.grid.columns.length > 0) {
             // reset indexes in case columns are hidden/shown runtime
-            this.grid.columns.filter(x => x.columnGroup).forEach(x => x.populateVisibleIndexes());
+            const columns = this.grid && this.grid.pinnedColumns && this.grid.unpinnedColumns ?
+            this.grid.pinnedColumns.concat(this.grid.unpinnedColumns) : [];
+            if (!this._hidden && !columns.find(c => c.field === this.field)) {
+                this.grid.resetColumnCollections();
+            }
+            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts

@@ -143,6 +143,43 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
             expect(grid.getColumnByName('ContactTitle').hidden).toBeTruthy();
         });
 
+        it('verify visible column indexes when hide/show a column', () => {
+
+            expect(grid.getColumnByName('ID').visibleIndex).toBe(0);
+            expect(grid.getColumnByName('CompanyName').visibleIndex).toBe(1);
+            expect(grid.getColumnByName('ContactName').visibleIndex).toBe(2);
+            expect(grid.getColumnByName('ContactTitle').visibleIndex).toBe(3);
+            // show PostalCode
+            grid.getColumnByName('PostalCode').hidden = false;
+            fixture.detectChanges();
+
+            expect(grid.getColumnByName('ID').visibleIndex).toBe(1);
+            expect(grid.getColumnByName('CompanyName').visibleIndex).toBe(2);
+            expect(grid.getColumnByName('ContactName').visibleIndex).toBe(3);
+            expect(grid.getColumnByName('ContactTitle').visibleIndex).toBe(6);
+            expect(grid.getColumnByName('PostalCode').visibleIndex).toBe(0);
+            expect(grid.getColumnByName('City').visibleIndex).toBe(4);
+            expect(grid.getColumnByName('Country').visibleIndex).toBe(5);
+            expect(grid.getColumnByName('Address').visibleIndex).toBe(7);
+
+            // hide PostalCode
+            grid.getColumnByName('PostalCode').hidden = true;
+            fixture.detectChanges();
+            expect(grid.getColumnByName('PostalCode').visibleIndex).toBe(-1);
+            expect(grid.getColumnByName('City').visibleIndex).toBe(-1);
+            expect(grid.getColumnByName('Country').visibleIndex).toBe(-1);
+            expect(grid.getColumnByName('Address').visibleIndex).toBe(-1);
+
+            // show PostalCode
+            grid.getColumnByName('PostalCode').hidden = false;
+            fixture.detectChanges();
+            expect(grid.getColumnByName('PostalCode').visibleIndex).toBe(0);
+            expect(grid.getColumnByName('City').visibleIndex).toBe(4);
+            expect(grid.getColumnByName('Country').visibleIndex).toBe(5);
+            expect(grid.getColumnByName('Address').visibleIndex).toBe(7);
+        });
+
+
         it('should work with horizontal virtualization when some groups are hidden/shown.', async() => {
             const uniqueGroups = [
                 {