Skip to content

Commit 84c6ff9

Browse files
dkamburovdkamburov
authored
Merge pull request #14142 from IgniteUI/mkirova/fix-14138-16.1.x
fix(igxGrid): Enable check for whether container size changes when gr…
2 parents 021e6f0 + bdbaba8 commit 84c6ff9

File tree

5 files changed

+50
-22
lines changed

5 files changed

+50
-22
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -904,6 +904,19 @@ export class IgxForOfDirective<T, U extends T[] = T[]> implements OnInit, OnChan
904904
}
905905
}
906906

907+
908+
/**
909+
* @hidden
910+
* @internal
911+
*/
912+
public updateScroll(): void {
913+
if (this.igxForScrollOrientation === "horizontal") {
914+
const scrollAmount = this.scrollComponent.nativeElement["scrollLeft"];
915+
this.scrollComponent.scrollAmount = scrollAmount;
916+
this._updateScrollOffset();
917+
}
918+
}
919+
907920
protected updateSizes() {
908921
if (!this.scrollComponent.nativeElement.isConnected) return;
909922
const scrollable = this.isScrollable();

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3592,6 +3592,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
35923592
// the vert. scrollbar showing/hiding
35933593
this.notifyChanges(true);
35943594
this.cdr.detectChanges();
3595+
Promise.resolve().then(() => this.headerContainer.updateScroll());
35953596
});
35963597

35973598
this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), throttleTime(30), destructor).subscribe(() => {
@@ -6257,12 +6258,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
62576258
// in case state is no longer valid - update it.
62586259
const rowForOf = row.virtDirRow;
62596260
const gridScrLeft = rowForOf.getScroll().scrollLeft;
6260-
const left = -parseInt(rowForOf.dc.instance._viewContainer.element.nativeElement.style.left, 10);
6261-
const actualScrollLeft = left + rowForOf.getColumnScrollLeft(rowForOf.state.startIndex);
6262-
if (gridScrLeft !== actualScrollLeft) {
6263-
rowForOf.onHScroll(gridScrLeft);
6264-
rowForOf.cdr.detectChanges();
6265-
}
6261+
rowForOf.onHScroll(gridScrLeft);
6262+
rowForOf.cdr.detectChanges();
62666263
}
62676264

62686265
protected changeRowEditingOverlayStateOnScroll(row: RowType) {
@@ -6801,7 +6798,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
68016798
let res = !parentElement ||
68026799
parentElement.clientHeight === 0 ||
68036800
parentElement.clientHeight === renderedHeight;
6804-
if ((!this.platform.isChromium && !this.platform.isFirefox) || this._autoSize) {
6801+
if (parentElement && (res || this._autoSize)) {
68056802
// If grid causes the parent container to extend (for example when container is flex)
68066803
// we should always auto-size since the actual size of the container will continuously change as the grid renders elements.
68076804
this._autoSize = false;

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2600,7 +2600,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
26002600
}));
26012601

26022602
it('should position filter row and chips correctly when grid has column groups and one is hidden.',
2603-
fakeAsync(() => {
2603+
(async() => {
26042604
const filteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
26052605
const expression = {
26062606
fieldName: 'ProductName',
@@ -2622,7 +2622,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
26222622

26232623
GridFunctions.clickFilterCellChip(fix, 'AnotherField');
26242624
fix.detectChanges();
2625-
2625+
await wait(30);
2626+
fix.detectChanges();
26262627
// check if it is positioned at the bottom of the thead.
26272628
const theadWrapper = grid.theadRow.nativeElement.firstElementChild;
26282629
const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
@@ -5450,7 +5451,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
54505451
fix.detectChanges();
54515452
expect(listItems[0].classList.contains("igx-list__item-base--active")).toBeFalse();
54525453
expect(listItems[1].classList.contains("igx-list__item-base--active")).toBeTrue();
5453-
5454+
54545455
// on arrow up the first item should be active again
54555456
UIInteractions.triggerKeyDownEvtUponElem('arrowup', list, true);
54565457
fix.detectChanges();

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1442,6 +1442,20 @@ describe('IgxGrid Component Tests #grid', () => {
14421442
fix.componentInstance.data = fix.componentInstance.fullData;
14431443
}));
14441444

1445+
it('should not auto-size when container has display:contents and size is determinable ', fakeAsync(() => {
1446+
const fix = TestBed.createComponent(IgxGridWrappedInContComponent);
1447+
fix.componentInstance.display = "contents";
1448+
fix.componentInstance.data = fix.componentInstance.fullData;
1449+
tick();
1450+
fix.detectChanges();
1451+
const defaultHeight = fix.debugElement.query(By.css(TBODY_CLASS)).styles.height;
1452+
const defaultHeightNum = parseInt(defaultHeight, 10);
1453+
expect(defaultHeight).not.toBeFalsy();
1454+
1455+
expect(defaultHeightNum).toBeGreaterThan(fix.componentInstance.grid.renderedRowHeight * 10);
1456+
expect(fix.componentInstance.grid.calcHeight).toBeGreaterThan(fix.componentInstance.grid.renderedRowHeight * 10);
1457+
}));
1458+
14451459
it('should render correct columns if after scrolling right container size changes so that all columns become visible.',
14461460
async () => {
14471461
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
@@ -2955,7 +2969,7 @@ export class IgxGridWithCustomFooterComponent extends IgxGridTestComponent {
29552969
public override data = SampleTestData.foodProductData();
29562970
}
29572971
@Component({
2958-
template: `<div [style.width.px]="outerWidth" [style.height.px]="outerHeight">
2972+
template: `<div [style.display]="display" [style.width.px]="outerWidth" [style.height.px]="outerHeight">
29592973
<igx-grid #grid [data]="data" [displayDensity]="density" [autoGenerate]="true">
29602974
<igx-paginator *ngIf="paging" [perPage]="pageSize"></igx-paginator>
29612975
</igx-grid>
@@ -3006,6 +3020,7 @@ export class IgxGridWrappedInContComponent extends IgxGridTestComponent {
30063020
public density: DisplayDensity = DisplayDensity.comfortable;
30073021
public outerWidth = 800;
30083022
public outerHeight: number;
3023+
public display = "";
30093024
}
30103025

30113026
@Component({

‎src/app/grid-auto-size/grid-auto-size.sample.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
<div class="wrapper">
2-
<div class="sample-content">
3-
<div class="sample-column">
1+
<div class="wrapper" style="width:100%; height:100%;">
2+
<div class="sample-content" style="width:100%; height:100%;">
3+
<div class="sample-column" style="width:100%; height:100%;">
44
<div class="density-chooser">
55
<igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
66
</div>
77
<div>
8-
<button igxButton="raised" (click)="gridContainerHidden = !gridContainerHidden">Toggle Container Visibility</button>
9-
<button igxButton="raised" (click)="containerHeight = '400px'">Set container height px</button>
10-
<button igxButton="raised" (click)="containerHeight = '100%'">Set container height %</button>
11-
<button igxButton="raised" (click)="containerHeight = null">Set container height null</button>
12-
<button igxButton="raised" (click)="height = null">Set height null</button>
13-
<button igxButton="raised" (click)="height = '100%'">Set height 100%</button>
14-
<button igxButton="raised" (click)="height = '800px'">Set height px</button>
8+
<button igxButton="contained" (click)="gridContainer.style.display = 'contents'">Set container display: contents</button>
9+
<button igxButton="contained" (click)="gridContainer.style.display = 'block'">Set container display: block</button>
10+
<button igxButton="contained" (click)="gridContainerHidden = !gridContainerHidden">Toggle Container Visibility</button>
11+
<button igxButton="contained" (click)="containerHeight = '400px'">Set container height px</button>
12+
<button igxButton="contained" (click)="containerHeight = '100%'">Set container height %</button>
13+
<button igxButton="contained" (click)="containerHeight = null">Set container height null</button>
14+
<button igxButton="contained" (click)="height = null">Set height null</button>
15+
<button igxButton="contained" (click)="height = '100%'">Set height 100%</button>
16+
<button igxButton="contained" (click)="height = '800px'">Set height px</button>
1517

1618
<button igxButton="raised" (click)="setData()">Set large data</button>
1719
<button igxButton="raised" (click)=" setData(5)">Set small data - 5</button>
1820
<button igxButton="raised" (click)=" setData(3)">Set small data - 3</button>
1921
<button igxButton="raised" (click)="setData(0)">Set no data</button>
2022
<button igxButton="raised" (click)="checkCols()">Check cols</button>
2123
</div>
22-
<div [hidden]="gridContainerHidden" [style.height]="containerHeight">
24+
<div #gridContainer [hidden]="gridContainerHidden" [style.height]="containerHeight">
2325
<igx-grid
2426
#grid1
2527
[data]="data"

0 commit comments

Comments
 (0)