Merge branch '7.1.x' into astaev/fix-3332

projects/igniteui-angular/package.json

@@ -68,7 +68,7 @@
     "web-animations-js": "^2.3.1"
   },
   "devDependencies": {
-    "igniteui-cli": "~3.1.0"
+    "igniteui-cli": "~3.2.0"
   },
   "ng-update": {
     "migrations": "./migrations/migration-collection.json"

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

@@ -382,23 +382,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     @HostBinding('style.max-width')
     @HostBinding('style.flex-basis')
     get width() {
-        const hasVerticalScroll = !this.grid.verticalScrollContainer.dc.instance.notVirtual;
-        const colWidth = this.column.width;
-        const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
-
-        if (colWidth && !isPercentageWidth) {
-            let cellWidth = this.isLastUnpinned && hasVerticalScroll &&
-            (this.grid.unpinnedWidth - this.grid.totalWidth < 0) ?
-                parseInt(colWidth, 10) - 18 + '' : colWidth;
-
-            if (typeof cellWidth !== 'string' || cellWidth.endsWith('px') === false) {
-                cellWidth += 'px';
-            }
-
-            return cellWidth;
-        } else {
-            return colWidth;
-        }
+        return this.column.getCellWidth();
     }
 
     /**

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

@@ -1198,6 +1198,31 @@ export class IgxColumnComponent implements AfterContentInit {
         }
     }
 
+    /**
+     *@hidden
+     */
+    public getCellWidth() {
+        const hasVerticalScroll = !this.grid.verticalScrollContainer.dc.instance.notVirtual;
+        const colWidth = this.width;
+        const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
+
+        if (colWidth && !isPercentageWidth) {
+            const unpinnedColumns = this.grid.unpinnedColumns;
+            const isLastUnpinned = unpinnedColumns[unpinnedColumns.length - 1] === this;
+
+            let cellWidth = isLastUnpinned && hasVerticalScroll &&
+            (this.grid.unpinnedWidth - this.grid.totalWidth < 0) ?
+                parseInt(colWidth, 10) - 18 + '' : colWidth;
+
+            if (typeof cellWidth !== 'string' || cellWidth.endsWith('px') === false) {
+                cellWidth += 'px';
+            }
+
+            return cellWidth;
+        } else {
+            return colWidth;
+        }
+    }
 }
 
 

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

@@ -2302,8 +2302,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.initColumns(this.columnList, (col: IgxColumnComponent) => this.onColumnInit.emit(col));
 
         this.columnListDiffer.diff(this.columnList);
-        this._derivePossibleHeight();
         this.markForCheck();
+        this._derivePossibleHeight();
 
         this.columnList.changes
             .pipe(takeUntil(this.destroy$))
@@ -3558,7 +3558,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         if ((this._height && this._height.indexOf('%') === -1) || !this._height) {
             return;
         }
-        if (!this.nativeElement.parentNode.clientHeight) {
+        if (!this.nativeElement.parentNode || !this.nativeElement.parentNode.clientHeight) {
             const viewPortHeight = document.documentElement.clientHeight;
             this._height = this.rowBasedHeight <= viewPortHeight ? null : viewPortHeight.toString();
         } else {
@@ -3692,24 +3692,32 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     protected calculateGridWidth() {
+        let width;
         const computed = this.document.defaultView.getComputedStyle(this.nativeElement);
+        const el = this.document.getElementById(this.nativeElement.id);
 
         if (this._width && this._width.indexOf('%') !== -1) {
             /* width in %*/
-            const width = computed.getPropertyValue('width').indexOf('%') === -1 ?
-                parseInt(computed.getPropertyValue('width'), 10) :
-                this.document.getElementById(this.nativeElement.id).offsetWidth;
-
-            if (Number.isFinite(width) && width !== this.calcWidth) {
-                this.calcWidth = width;
-
-                this.cdr.markForCheck();
-            }
+            width = computed.getPropertyValue('width').indexOf('%') === -1 ?
+                parseInt(computed.getPropertyValue('width'), 10) : null;
         } else {
-            this.calcWidth = parseInt(this._width, 10);
+            width = parseInt(this._width, 10);
+        }
+
+        if (!width && el) {
+            width = el.offsetWidth;
         }
 
         this._derivePossibleWidth();
+
+        if (!width) {
+            width = this.columnList.reduce((sum, item) =>  sum + parseInt((item.width || item.defaultWidth), 10), 0);
+        }
+
+        if (Number.isFinite(width) && width !== this.calcWidth) {
+            this.calcWidth = width;
+            this.cdr.markForCheck();
+        }
     }
 
     /**
@@ -4461,16 +4469,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private checkIfGridIsAdded(node): boolean {
         if (node === this.nativeElement) {
             return true;
-        } else {
-            for (const childNode of node.childNodes) {
-                const added = this.checkIfGridIsAdded(childNode);
-                if (added) {
-                    return true;
-                }
-            }
+        }
+
 
+        if (!node.childNodes) {
             return false;
         }
+
+        for (const childNode of node.childNodes) {
+            const added = this.checkIfGridIsAdded(childNode);
+            if (added) {
+                return true;
+            }
+        }
+        return false;
     }
 
     /**

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

@@ -39,7 +39,8 @@ describe('IgxGrid - Summaries', () => {
                 FilteringComponent,
                 ColumnGroupFourLevelTestComponent,
                 SummarieGroupByComponent,
-                SummarieGroupByWithScrollsComponent
+                SummarieGroupByWithScrollsComponent,
+                SummaryColumnsWithSpecificWidthsComponent
             ],
             imports: [BrowserAnimationsModule, IgxGridModule.forRoot(), NoopAnimationsModule]
         })
@@ -251,6 +252,26 @@ describe('IgxGrid - Summaries', () => {
             }
         }));
 
+        it('Last column summary cell should be aligned according to its data cells', ((() => {
+            const fixture = TestBed.createComponent(SummaryColumnsWithSpecificWidthsComponent);
+            fixture.detectChanges();
+
+            // Get last cell of first data row
+            const dataRow = fixture.debugElement.queryAll(By.css('igx-grid-row'))[0];
+            const lastColumnNormalCell = dataRow.queryAll(By.css('igx-grid-cell'))[4];
+            const lastColumnNormalCellRect = (<HTMLElement>lastColumnNormalCell.nativeElement).getBoundingClientRect();
+
+            // Get last summary cell of the summary row
+            const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fixture, 0);
+            const lastColumnSummaryCell = HelperUtils.getSummaryCellByVisibleIndex(summaryRow, 4);
+            const lastColumnSummaryCellRect = (<HTMLElement>lastColumnSummaryCell.nativeElement).getBoundingClientRect();
+
+            expect(lastColumnSummaryCellRect.left).toBe(lastColumnNormalCellRect.left,
+                'summary cell and data cell are not left aligned');
+            expect(lastColumnSummaryCellRect.right).toBe(lastColumnNormalCellRect.right,
+                'summary cell and data cell are not right aligned');
+        })));
+
         describe('', () => {
             let fix;
             let grid: IgxGridComponent;
@@ -1514,8 +1535,8 @@ class EarliestSummary extends IgxDateSummaryOperand {
             <igx-column field="UnitsInStock" [dataType]="'number'" [hasSummary]="true"  [summaries]="dealsSummary">
             </igx-column>
             <igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true"
-                [summaries]="earliest">
-            </igx-column>
+            [summaries]="earliest">
+        </igx-column>
         </igx-grid>
     `
 })
@@ -1528,3 +1549,27 @@ export class CustomSummariesComponent {
     public dealsSummaryMinMax = DealsSummaryMinMax;
     public earliest = EarliestSummary;
 }
+
+@Component({
+    template: `
+        <igx-grid #grid1 [data]="data" width="900px" height="500px" [allowFiltering]="true">
+            <igx-column field="ProductID" header="Product ID" width="150px">
+            </igx-column>
+            <igx-column field="ProductName" width="150px">
+            </igx-column>
+            <igx-column field="InStock" [dataType]="'boolean'" width="150px">
+            </igx-column>
+            <igx-column field="OrderDate" [dataType]="'date'" width="150px">
+            </igx-column>
+            <igx-column field="UnitsInStock" [dataType]="'number'" [hasSummary]="true" width="150px">
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class SummaryColumnsWithSpecificWidthsComponent {
+
+    @ViewChild('grid1', { read: IgxGridComponent })
+    public grid1: IgxGridComponent;
+
+    public data = SampleTestData.foodProductData();
+}

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

@@ -26,6 +26,7 @@ import { IgxGridCellComponent } from '../cell.component';
 import { TransactionType, Transaction } from '../../services';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
+import { IgxTabsModule, IgxTabsComponent } from '../../tabs';
 
 const DEBOUNCETIME = 30;
 
@@ -2984,6 +2985,35 @@ describe('IgxGrid Component Tests', () => {
             }));
         });
     });
+
+    describe('IgxGrid - Integration with other Igx Controls', () => {
+        configureTestSuite();
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxGridInsideIgxTabsComponent
+                ],
+                imports: [
+                    NoopAnimationsModule, IgxGridModule, IgxTabsModule]
+            }).compileComponents();
+        }));
+
+        it('IgxTabs: should initialize a grid with correct width/height', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridInsideIgxTabsComponent);
+            fix.detectChanges();
+
+            const grid = fix.componentInstance.grid;
+            const tab = fix.componentInstance.tabs;
+            tab.tabs.toArray()[2].select();
+            tick(100);
+            fix.detectChanges();
+            const gridHeader = fix.debugElement.query(By.css('.igx-grid__thead'));
+            const gridBody = fix.debugElement.query(By.css('.igx-grid__tbody'));
+            expect(parseInt(window.getComputedStyle(gridHeader.nativeElement).width, 10)).toBe(400);
+            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).width, 10)).toBe(400);
+            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(510);
+        }));
+    });
 });
 
 @Component({
@@ -3033,7 +3063,7 @@ export class IgxGridTestComponent {
 
     public isVerticalScrollbarVisible() {
         const scrollbar = this.grid.verticalScrollContainer.getVerticalScroll();
-        if (scrollbar) {
+        if (scrollbar && scrollbar.offsetHeight > 0) {
             return scrollbar.offsetHeight < scrollbar.children[0].offsetHeight;
         }
         return false;
@@ -3507,3 +3537,56 @@ export class IgxGridRowEditingWithFeaturesComponent extends DataParent {
         this.currentSortExpressions = sortExpr;
     }
 }
+
+@Component({
+    template: `
+    <div style="width: 400px; height: 400px;">
+    <igx-tabs #tabs>
+      <igx-tabs-group label="Tab 1">This is Tab 1 content.</igx-tabs-group>
+      <igx-tabs-group label="Tab 2">This is Tab 2 content.</igx-tabs-group>
+      <igx-tabs-group label="Tab 3">
+        <igx-grid #grid [data]="data" [primaryKey]="'id'">
+          <igx-column
+            *ngFor="let column of columns"
+            [field]="column.field"
+            [header]="column.field"
+            [width]="column.width"
+          >
+          </igx-column>
+        </igx-grid>
+      </igx-tabs-group>
+    </igx-tabs>
+  </div>
+    `
+})
+export class IgxGridInsideIgxTabsComponent {
+
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+    public grid: IgxGridComponent;
+
+    @ViewChild(IgxTabsComponent, { read: IgxTabsComponent })
+    public tabs: IgxTabsComponent;
+
+    public columns = [
+        { field: 'id', width: 100},
+        { field: '1', width: 100},
+        { field: '2', width: 100},
+        { field: '3', width: 100}
+    ];
+
+    public data = [];
+
+    constructor() {
+        const data = [];
+        for (let j = 1; j <= 10; j++) {
+          const item = {};
+          item['id'] = j;
+          for (let k = 2, len = this.columns.length; k <= len; k++) {
+            const field = this.columns[k - 1].field;
+            item[field] = `item${j}-${k}`;
+          }
+          data.push(item);
+        }
+        this.data = data;
+    }
+}

projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts

@@ -145,22 +145,7 @@ export class IgxSummaryCellComponent {
     @HostBinding('style.max-width')
     @HostBinding('style.flex-basis')
     get width() {
-        const hasVerticalScroll = !this.grid.verticalScrollContainer.dc.instance.notVirtual;
-        const colWidth = this.column.width;
-        const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
-
-        if (colWidth && !isPercentageWidth) {
-            let cellWidth = this.isLastUnpinned && hasVerticalScroll ?
-                parseInt(colWidth, 10) - 18 + '' : colWidth;
-
-            if (typeof cellWidth !== 'string' || cellWidth.endsWith('px') === false) {
-                cellWidth += 'px';
-            }
-
-            return cellWidth;
-        } else {
-            return colWidth;
-        }
+        return this.column.getCellWidth();
     }
 
     get nativeElement(): any {