Merge pull request #6354 from IgniteUI/set-width-hideallcolumns-master

Set 0px column width when hiding all columns

Author: kdinev

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

@@ -4624,7 +4624,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         const columnsToSize = this.hasColumnLayouts ?
             combinedBlocksSize - columnsWithSetWidths.length :
             visibleChildColumns.length - columnsWithSetWidths.length;
-
         const sumExistingWidths = columnsWithSetWidths
             .reduce((prev, curr) => {
                 const colWidth = curr.width;
@@ -4635,12 +4634,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 return prev + currWidth;
             }, 0);
 
+        // When all columns are hidden, return 0px width
+        if (!sumExistingWidths && !columnsToSize) {
+            return '0px';
+        }
+
         const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
             Math.max(computedWidth / columnsToSize, MINIMUM_COLUMN_WIDTH) :
             Math.max((computedWidth - sumExistingWidths) / columnsToSize, MINIMUM_COLUMN_WIDTH));
 
             return columnWidth + 'px';
-    }
+        }
 
     /**
      * @hidden

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

@@ -620,6 +620,9 @@ describe('Column Hiding UI #grid', () => {
             grid.columnList.forEach((col) => col.hidden = true);
             tick(30);
             fix.detectChanges();
+            grid.columnList.forEach((col) => {
+                expect(col.width).toBe('0px');
+            });
             fixEl = fix.nativeElement, gridEl = grid.nativeElement;
 
             tHeadItems = fixEl.querySelector('igx-grid-header-group');