chore(*): update collapsible state when add/remove child columns

Author: ddincheva

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

@@ -48,7 +48,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
         }
     }
     public get collapsible() {
-        return this._collapsible;
+        return this._collapsible && this.checkCollapsibleState();
     }
 
     /**
@@ -240,15 +240,11 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
         this.children.forEach(child => {
             child.parent = this;
         });
-        if (this.collapsible) {
-            const cols = this.children.map(child => child.visibleWhenCollapsed);
-            if (!(cols.some(c => c === true) && cols.some(c => c === false))) {
-                this.collapsible = false;
-                return;
-            }
+        if (this._collapsible && this.checkCollapsibleState()) {
             this.setExpandCollapseState();
         }
     }
+
     /**
      * Returns the children columns collection.
      * ```typescript

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

@@ -1026,17 +1026,16 @@ export class IgxColumnComponent implements AfterContentInit {
         this._visibleWhenCollapsed = value;
         this.visibleWhenCollapsedChange.emit(this._visibleWhenCollapsed);
         if (this.parent) {
-            const cols = this.parent.children.map(child => child.visibleWhenCollapsed);
-            if (!(cols.some(c => c === true) && cols.some(c => c === false))) {
-                this.parent.collapsible = false;
-            } else {
-                this.parent.collapsible = true;
-            }
+            if (!this.parent.collapsible) { this.hidden = this.parent.hidden; return; }
+            this.hidden = this.parent.expanded ? this._visibleWhenCollapsed : !this._visibleWhenCollapsed;
         }
+        if (this.grid) {
+            this.grid.notifyChanges(true);
+        }
+
     }
 
     get visibleWhenCollapsed(): boolean {
-        if (!this.parent) { return; }
         return this._visibleWhenCollapsed;
     }
 
@@ -1772,6 +1771,15 @@ export class IgxColumnComponent implements AfterContentInit {
             c.hidden = this._expanded ? c.visibleWhenCollapsed : !c.visibleWhenCollapsed;
         });
     }
+     /**
+     * @hidden
+     * @internal
+     */
+    protected checkCollapsibleState() {
+        if (!this.children) { return false; }
+        const cols = this.children.map(child => child.visibleWhenCollapsed);
+        return (cols.some(c => c === true) && cols.some(c => c === false));
+    }
 
     /**
      *@hidden