Skip to content

Commit

Permalink
#3047 igxGrid isn't displayed properly in IE11 when in igxTabs 7.0.x (#…
Browse files Browse the repository at this point in the history 
…3491)

* test(grid): #3047 igxGrid isn't displayed properly in IE11 when in igxTabs

* chore(*): Fixing lint errors

* fix(grid): igxGrid isn't displayed properly in IE11 in igxTabs #3047
  • Loading branch information
@mpavlinov
mpavlinov authored Dec 20, 2018
1 parent a68ac89 commit 1e30113
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 18 deletions.
48 changes: 30 additions & 18 deletions projects/igniteui-angular/src/lib/grids/grid-base.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3463,7 +3463,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 {
Expand Down Expand Up @@ -3600,24 +3600,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();
}
}

/**
Expand Down Expand Up @@ -4378,16 +4386,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;
}

/**
Expand Down
83 changes: 83 additions & 0 deletions projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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;
}
}

0 comments on commit 1e30113

Please sign in to comment.