fix(igxGrid): Column group hiding

Closes #488

Author: rkaraivanov

projects/igniteui-angular/src/lib/chips/chips.module.ts

@@ -5,7 +5,7 @@ import { cloneArray } from '../core/utils';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxAvatarModule } from '../avatar/avatar.component';
-import { IgxIconModule } from '../icon';
+import { IgxIconModule } from '../icon/index';
 import { IgxConnectorDirective } from './connector.directive';
 import { IgxChipComponent } from './chip.component';
 import { IgxChipsAreaComponent } from './chips-area.component';

projects/igniteui-angular/src/lib/grid/column.component.ts

@@ -235,9 +235,11 @@ export class IgxColumnComponent implements AfterContentInit {
     get visibleIndex(): number {
         const grid = this.gridAPI.get(this.gridID);
         let vIndex = -1;
+
         if (this.columnGroup) {
             return vIndex;
         }
+
         if (!this.pinned) {
             const indexInCollection = grid.unpinnedColumns.indexOf(this);
             vIndex = indexInCollection === -1 ? -1 : grid.pinnedColumns.length + indexInCollection;
@@ -502,7 +504,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
 
     @Input()
     get hidden() {
-        return this._hidden;
+        return this.allChildren.every(c => c.hidden);
     }
 
     set hidden(value: boolean) {
@@ -537,8 +539,8 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
 }
 
 
-function flatten(arr: any[]) {
 
+function flatten(arr: any[]) {
     let result = [];
 
     arr.forEach(el => {

src/app/drop-down/drop-down.sample.html

@@ -2,12 +2,12 @@
     <app-page-header title="Dropdown menu" description="description for dropdown menu"></app-page-header>
     <section class="sample-content">
         <button #button igxButton="raised" igxRipple (click)="toggleDropDown()">Toggle</button>
-        <igx-drop-down (onSelection)="onSelection($event)" (onOpening)="onOpening($event)">
+        <igx-drop-down (onSelection)="onSelection()" (onOpening)="onOpening()">
             <igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}>
                 <div class="igx-drop-down__item-template">
                     {{ item.field }}
                 </div>
             </igx-drop-down-item>
         </igx-drop-down>
     </section>
-</div>
+</div>

src/app/grid-column-groups/grid-column-groups.sample.ts

@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
 import { IgxGridComponent } from 'igniteui-angular';
 
 @Component({
     selector: 'app-grid-column-groups-sample',
     templateUrl: 'grid-column-groups.sample.html'
 })
-export class GridColumnGroupsSampleComponent {
+export class GridColumnGroupsSampleComponent implements AfterViewInit {
 
     @ViewChild('grid', { read: IgxGridComponent })
     grid: IgxGridComponent;
@@ -43,12 +43,18 @@ export class GridColumnGroupsSampleComponent {
     // tslint:enable:max-line-length
 
     pinGroup() {
-        const t = this.grid.getColumnByName('ID');
+        const t = this.grid.getColumnByName('ContactTitle');
         t.pinned = !t.pinned;
     }
 
     hideGroup() {
         const col = this.grid.columnList.filter(c => c.header === 'Person Details')[0];
         col.hidden = !col.hidden;
+        this.grid.getColumnByName('CompanyName').hidden = true;
+        console.log(this.grid.getColumnByName('CompanyName').parent);
+    }
+
+    ngAfterViewInit() {
+        // this.grid.groupBy({ fieldName: 'Country', dir: 1, ignoreCase: false });
     }
 }