chore(*): update for column groups

Author: nrobakova

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

@@ -233,7 +233,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
      * @memberof IgxColumnGroupComponent
      */
     get selected(): boolean {
-        const selectableChildren = this.children.filter(c => c.selectable && !c.hidden);
+        const selectableChildren = this.allChildren.filter(c => !c.columnGroup && c.selectable && !c.hidden);
         return selectableChildren.length > 0 && selectableChildren.every(c => c.selected);
     }
 

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts

@@ -240,8 +240,8 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
      * @hidden
      */
     public groupClicked(event): void {
-        if (this.column.selectable && !this.grid.filteringService.isFilterRowVisible) {
-            const columnsToSelect = this.getSelectableChildren(this.column.children.toArray()).map(c => c.field);
+        const columnsToSelect = this.getSelectableChildren(this.column.children.toArray()).map(c => c.field);
+        if (columnsToSelect.length > 0 && !this.grid.filteringService.isFilterRowVisible) {
             if (!this.selected) {
                 this.grid.selectionService.selectColumns(columnsToSelect, !event.ctrlKey, event);
             } else {

src/app/grid-column-selection/grid-column-selection.sample.html

@@ -59,6 +59,29 @@
                 <button igxButton="raised" (click)="deselectCol()">Deselect ID</button>
                 <button igxButton="raised" (click)="grid1.deselectAllColumns()">Deselect all columns</button>
             </div>
+
+            <igx-grid #grid [data]="data" height="500px" width="1000px" columnWidth="100px">
+                <igx-column-group header="General Information" >
+                    <igx-column  field="CompanyName" ></igx-column>
+                    <igx-column-group header="Person Details">
+                        <igx-column  field="ContactName" [selectable]="false"></igx-column>
+                        <igx-column  field="ContactTitle" [hidden]="true"></igx-column>
+                    </igx-column-group>
+                </igx-column-group>
+                <igx-column field="ID"></igx-column>
+                <igx-column-group header="Country Information">
+
+                    <igx-column-group header="Region Information">
+                        <igx-column  field="Country" [selectable]="false"></igx-column>
+                        <igx-column field="Region" ></igx-column>
+                        <igx-column field="PostalCode" ></igx-column>
+                    </igx-column-group>
+                    <igx-column-group header="City Information" >
+                        <igx-column field="City" [selectable]="false" ></igx-column>
+                        <igx-column field="Address" [selectable]="false"></igx-column>
+                    </igx-column-group>
+                </igx-column-group>
+            </igx-grid>
         </div>
     </div>
 </div>

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

@@ -24,6 +24,7 @@ import { SAMPLE_DATA } from '../shared/sample-data';
 export class GridColumnSelectionSampleComponent implements OnInit {
     public searchSelectedColumn = '';
     public data: Array<any>;
+    public groupsData = [];
     public columns: Array<any>;
     public filterModes = [
         {
@@ -53,7 +54,7 @@ export class GridColumnSelectionSampleComponent implements OnInit {
     };
 
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
-
+    @ViewChild('grid', { static: true }) public grid: IgxGridComponent;
     @ViewChild('columnSelectionDropdown', { read: IgxDropDownComponent })
     public columnSelectionDropdown: IgxDropDownComponent;