Merge pull request #3576 from IgniteUI/mkirova/fix-3513-master

Mkirova/fix 3513 master

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -43,6 +43,12 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     @Input()
     public igxForOf: any[];
 
+    /**
+     * An @Input property that sets the property name from which to read the size in the data object.
+     */
+    @Input()
+    public igxForSizePropName;
+
     /**
      * An @Input property that specifies the scroll orientation.
      * Scroll orientation can be "vertical" or "horizontal".
@@ -249,6 +255,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     public ngOnInit(): void {
         let totalSize = 0;
         const vc = this.igxForScrollContainer ? this.igxForScrollContainer._viewContainer : this._viewContainer;
+        this.igxForSizePropName = this.igxForSizePropName || 'width';
 
         const dcFactory: ComponentFactory<DisplayContainerComponent> = this.resolver.resolveComponentFactory(DisplayContainerComponent);
         this.dc = this._viewContainer.createComponent(dcFactory, 0);
@@ -618,7 +625,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
      */
     public recalcUpdateSizes() {
         const dimension = this.igxForScrollOrientation === 'horizontal' ?
-            'width' : 'height';
+        this.igxForSizePropName : 'height';
         const diffs = [];
         let totalDiff = 0;
         for (let i = 0; i < this._embeddedViews.length; i++) {
@@ -891,7 +898,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         let totalSize = 0;
         let size = 0;
         const dimension = this.igxForScrollOrientation === 'horizontal' ?
-            'width' : 'height';
+            this.igxForSizePropName : 'height';
         let i = 0;
         this.sizesCache = [];
         this.heightCache = [];
@@ -921,7 +928,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         const arr = [];
         let sum = 0;
         const dimension = this.igxForScrollOrientation === 'horizontal' ?
-            'width' : 'height';
+        this.igxForSizePropName : 'height';
         const reducer = (accumulator, currentItem) => accumulator + this._getItemSize(currentItem, dimension);
         const availableSize = parseInt(this.igxForContainerSize, 10);
         for (i; i < this.igxForOf.length; i++) {
@@ -953,7 +960,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 }
             } else {
                 arr.push(item);
-                length = dimension === 'width' ? arr.length + 1 : arr.length;
+                length = dimension === this.igxForSizePropName ? arr.length + 1 : arr.length;
                 if (dimension === 'height' && sum - availableSize < parseInt(this.igxForItemSize, 10)) {
                     // add one more for vertical smooth scroll
                     length++;
@@ -1173,7 +1180,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         let totalSize = 0;
         let size = 0;
         const dimension = this.igxForScrollOrientation === 'horizontal' ?
-            'width' : 'height';
+            this.igxForSizePropName : 'height';
         let i = 0;
         this.sizesCache = [];
         this.heightCache = [];

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

@@ -280,6 +280,20 @@ export class IgxColumnComponent implements AfterContentInit {
             this._width = value;
         }
     }
+
+    public get calcWidth(): any {
+        const colWidth = this.width;
+        const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
+        if (isPercentageWidth) {
+            return parseInt(colWidth, 10) / 100 * this.grid.unpinnedWidth;
+        } else if (!colWidth) {
+            // no width
+            return this.defaultWidth || this.grid.getPossibleColumnWidth();
+        } else {
+            return this.width;
+        }
+    }
+
     /**
      * Sets/gets the maximum `width` of the column.
      * ```typescript

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

@@ -2774,7 +2774,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         let totalWidth = 0;
         let i = 0;
         for (i; i < cols.length; i++) {
-            totalWidth += parseInt(cols[i].width, 10) || 0;
+            totalWidth += parseInt(cols[i].calcWidth, 10) || 0;
         }
         return totalWidth;
     }
@@ -3682,12 +3682,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    protected getPossibleColumnWidth() {
+    public getPossibleColumnWidth() {
         let computedWidth = parseInt(
             this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
 
         if (this.showRowCheckboxes) {
-            computedWidth -= this.headerCheckboxContainer.nativeElement.clientWidth;
+            computedWidth -= this.headerCheckboxContainer ? this.headerCheckboxContainer.nativeElement.clientWidth : 0;
         }
 
         const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
@@ -4144,7 +4144,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     public trackColumnChanges(index, col) {
-        return col.field + col.width;
+        return col.field + col.calcWidth;
     }
 
     private find(text: string, increment: number, caseSensitive?: boolean, exactMatch?: boolean, scroll?: boolean) {

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -9,6 +9,6 @@
 <ng-container *ngIf="pinnedColumns.length > 0">
     <igx-grid-cell *ngFor="let col of notGroups(pinnedColumns)" [column]="col" [row]="this" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width" [value]="rowData[col.field]" [cellTemplate]="col.bodyTemplate"></igx-grid-cell>
 </ng-container>
-<ng-template igxGridFor let-col [igxGridForOf]="notGroups(unpinnedColumns)" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
+<ng-template igxGridFor let-col [igxGridForOf]="notGroups(unpinnedColumns)" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='"calcWidth"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
     <igx-grid-cell [column]="col" [row]="this" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width" [value]="rowData[col.field]" [cellTemplate]="col.bodyTemplate"></igx-grid-cell>
 </ng-template>

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -58,7 +58,7 @@
             </ng-template>
         </ng-container>
         <ng-template igxGridFor let-col [igxGridForOf]="onlyTopLevel(unpinnedColumns)" [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
-            [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges' #headerContainer>
+            [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges'  [igxForSizePropName]='"calcWidth"' #headerContainer>
             <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)" [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
         </ng-template>
         <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="right" class="igx-grid__scroll-on-drag-right"></span>

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

@@ -754,15 +754,120 @@ describe('IgxGrid Component Tests', () => {
             });
         });
 
-        it('Should calculate default column width when a column has width in %', () => {
+        it('Should calculate default column width when a column has width in %', async() => {
             const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
             fix.componentInstance.initColumnsRows(5, 3);
             fix.detectChanges();
 
             const grid = fix.componentInstance.grid;
             expect(grid.columns[1].width).toEqual('150');
-            expect(grid.columns[1].width).toEqual('150');
-    });
+            expect(grid.columns[2].width).toEqual('150');
+
+            const hScroll = fix.debugElement.query(By.css('.igx-grid__scroll'));
+            expect(hScroll.nativeElement.hidden).toBe(true);
+
+            grid.columns[0].width = '70%';
+            fix.detectChanges();
+            await wait(16);
+            // check UI
+            const header0 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[0];
+            const header1 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[1];
+            const header2 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[2];
+
+            expect(header0.nativeElement.offsetWidth).toEqual(350);
+            expect(header1.nativeElement.offsetWidth).toEqual(136);
+            expect(header2.nativeElement.offsetWidth).toEqual(136);
+            expect(hScroll.nativeElement.hidden).toBe(false);
+
+            // check virtualization cache is valid
+            const virtDir = grid.getRowByIndex(0).virtDirRow;
+            expect(virtDir.getSizeAt(0)).toEqual(350);
+            expect(virtDir.getSizeAt(1)).toEqual(136);
+            expect(virtDir.getSizeAt(2)).toEqual(136);
+        });
+        it('Should re-calculate column width when a column has width in % and grid width changes.', async() => {
+            const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
+            fix.componentInstance.initColumnsRows(5, 3);
+            fix.detectChanges();
+            const grid = fix.componentInstance.grid;
+            const hScroll = fix.debugElement.query(By.css('.igx-grid__scroll'));
+            expect(hScroll.nativeElement.hidden).toBe(true);
+            grid.columns[0].width = '70%';
+            fix.detectChanges();
+            await wait(16);
+            grid.width = '1000px';
+            fix.detectChanges();
+            await wait(16);
+
+            // check UI
+            const header0 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[0];
+            const header1 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[1];
+            const header2 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[2];
+            expect(header0.nativeElement.offsetWidth).toEqual(700);
+            expect(header1.nativeElement.offsetWidth).toEqual(150);
+            expect(header2.nativeElement.offsetWidth).toEqual(150);
+
+            expect(hScroll.nativeElement.hidden).toBe(true);
+            // check virtualization cache is valid
+            const virtDir = grid.getRowByIndex(0).virtDirRow;
+            expect(virtDir.getSizeAt(0)).toEqual(700);
+            expect(virtDir.getSizeAt(1)).toEqual(150);
+            expect(virtDir.getSizeAt(2)).toEqual(150);
+        });
+       it('Should calculate column width when a column has width in % and row selectors are enabled.', async() => {
+        const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
+        fix.componentInstance.initColumnsRows(5, 3);
+        fix.detectChanges();
+        const grid = fix.componentInstance.grid;
+        const hScroll = fix.debugElement.query(By.css('.igx-grid__scroll'));
+        grid.rowSelectable = true;
+        fix.detectChanges();
+        grid.columns[0].width = '70%';
+
+        fix.detectChanges();
+        await wait(16);
+        // check UI
+        const header0 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[0];
+        const header1 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[1];
+        const header2 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[2];
+        expect(header0.nativeElement.offsetWidth).toEqual(Math.round(0.7 * grid.unpinnedWidth));
+        expect(header1.nativeElement.offsetWidth).toEqual(136);
+        expect(header2.nativeElement.offsetWidth).toEqual(136);
+        expect(hScroll.nativeElement.hidden).toBe(false);
+
+        // check virtualization cache is valid
+        const virtDir = grid.getRowByIndex(0).virtDirRow;
+        expect(virtDir.getSizeAt(0)).toEqual(Math.floor(0.7 * grid.unpinnedWidth));
+        expect(virtDir.getSizeAt(1)).toEqual(136);
+        expect(virtDir.getSizeAt(2)).toEqual(136);
+
+       });
+       it('Should render correct column widths when having mixed width setting - px, %, null', async() => {
+            const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
+            fix.componentInstance.initColumnsRows(5, 3);
+            const grid = fix.componentInstance.grid;
+            const hScroll = fix.debugElement.query(By.css('.igx-grid__scroll'));
+            fix.detectChanges();
+            grid.columns[0].width = '50%';
+            grid.columns[1].width = '100px';
+            fix.detectChanges();
+            await wait(16);
+            const header0 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[0];
+            const header1 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[1];
+            const header2 = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[2];
+
+            expect(header0.nativeElement.offsetWidth).toEqual(250);
+            expect(header1.nativeElement.offsetWidth).toEqual(100);
+            expect(header2.nativeElement.offsetWidth).toEqual(150);
+            expect(hScroll.nativeElement.hidden).toBe(true);
+
+            // check virtualization cache is valid
+            const virtDir = grid.getRowByIndex(0).virtDirRow;
+            expect(virtDir.getSizeAt(0)).toEqual(250);
+            expect(virtDir.getSizeAt(1)).toEqual(100);
+            expect(virtDir.getSizeAt(2)).toEqual(150);
+
+        });
     });
 
     describe('IgxGrid - API methods', () => {

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html

@@ -12,7 +12,7 @@
     <ng-container *ngIf="pinnedColumns.length > 0">
         <igx-grid-summary-cell *ngFor="let col of notGroups(pinnedColumns)" [column]="col" [firstCellIndentation]="firstCellIndentation" [rowIndex]="index" [summaryResults]="getColumnSummaries(col.field)" [hasSummary]="col.hasSummary" [density]="grid.displayDensity" [style.min-height.px]="minHeight"></igx-grid-summary-cell>
     </ng-container>
-    <ng-template igxGridFor let-col [igxGridForOf]="notGroups(unpinnedColumns)" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
+    <ng-template igxGridFor let-col [igxGridForOf]="notGroups(unpinnedColumns)" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcWidth"' #igxDirRef>
         <igx-grid-summary-cell [column]="col" [rowIndex]="index" [firstCellIndentation]="firstCellIndentation" [summaryResults]="getColumnSummaries(col.field)" [hasSummary]="col.hasSummary" [density]="grid.displayDensity" [style.min-height.px]="minHeight"></igx-grid-summary-cell>
     </ng-template>
 </ng-container>

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

@@ -4,7 +4,7 @@
     <igx-grid #grid1 [data]="remote | async" [primaryKey]="'ProductID'"
             [rowSelectable]="selection" (onSelection)="handleRowSelection($event)"
             [width]="'800px'" [height]="'600px'">
-        <igx-column [field]="'ProductID'" [editable]="true"></igx-column>
+        <igx-column [field]="'ProductID'" [editable]="true" [width]="'80%'"></igx-column>
         <igx-column [field]="'ProductName'"></igx-column>
         <igx-column [field]="'UnitsInStock'"></igx-column>
     </igx-grid>

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

@@ -13,7 +13,7 @@ export class GridSelectionComponent implements AfterViewInit {
     @ViewChild('grid1')
     grid1: IgxGridComponent;
     remote: Observable<any[]>;
-    selection;
+    selection = true;
 
     constructor(private remoteService: RemoteService, private cdr: ChangeDetectorRef) {
         this.remoteService.urlBuilder = (state) => this.remoteService.url;