Skip to content

Commit f24b1ef

Browse files
zdrawkuzdrawku
authored
Merge pull request #6307 from IgniteUI/mkirova/improve-perf
fix(igxGrid): Prevent any unneccesary size recalcs on data changing. …
2 parents fdbd5cd + 13d9192 commit f24b1ef

File tree

11 files changed

+66
-22
lines changed

11 files changed

+66
-22
lines changed

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,13 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
181181
@Output()
182182
public onChunkLoad = new EventEmitter<IForOfState>();
183183

184+
/**
185+
* @hidden @internal
186+
* An event that is emitted when scrollbar visibility has changed.
187+
*/
188+
@Output()
189+
public onScrollbarVisibilityChanged = new EventEmitter<any>();
190+
184191
/**
185192
* An event that is emitted after the rendered content size of the igxForOf has been changed.
186193
*/
@@ -1155,10 +1162,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
11551162
protected _recalcScrollBarSize() {
11561163
const count = this.isRemote ? this.totalItemCount : (this.igxForOf ? this.igxForOf.length : 0);
11571164
this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
1165+
const scrollable = this.isScrollable();
11581166
if (this.igxForScrollOrientation === 'horizontal') {
11591167
const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
11601168
this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
1161-
this.scrollComponent.nativeElement.children[0].style.width = totalWidth + 'px';
1169+
this.scrollComponent.size = totalWidth;
11621170
if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
11631171
this.scrollPosition = 0;
11641172
}
@@ -1170,6 +1178,10 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
11701178
this.scrollPosition = 0;
11711179
}
11721180
}
1181+
if (scrollable !== this.isScrollable()) {
1182+
// scrollbar visibility has changed
1183+
this.onScrollbarVisibilityChanged.emit();
1184+
}
11731185
}
11741186

11751187
protected _calcHeight(): number {

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3017,9 +3017,19 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
30173017
});
30183018

30193019
this.verticalScrollContainer.onDataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
3020-
this.calculateGridHeight();
3021-
$event.containerSize = this.calcHeight;
3020+
const shouldRecalcSize = this.isPercentHeight &&
3021+
( !this.calcHeight || this.calcHeight === this.getDataBasedBodyHeight() ||
3022+
this.calcHeight === this.renderedRowHeight * this._defaultTargetRecordNumber);
3023+
if (shouldRecalcSize) {
3024+
this.calculateGridHeight();
3025+
$event.containerSize = this.calcHeight;
3026+
}
30223027
this.evaluateLoadingState();
3028+
});
3029+
3030+
this.verticalScrollContainer.onScrollbarVisibilityChanged.pipe(destructor, filter(() => !this._init)).subscribe(() => {
3031+
// called to recalc all widths that may have changes as a result of
3032+
// the vert. scrollbar showing/hiding
30233033
this.notifyChanges(true);
30243034
});
30253035

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2390,6 +2390,9 @@ describe('IgxGrid - Advanced Filtering', () => {
23902390
// and verify that the root group and all of its children become selected.
23912391
let rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
23922392
UIInteractions.simulateKeyDownEvent(rootOperatorLine, 'Enter');
2393+
fix.detectChanges();
2394+
await wait(200);
2395+
fix.detectChanges();
23932396
await wait(200);
23942397
fix.detectChanges();
23952398
verifyChildrenSelection(GridFunctions.getAdvancedFilteringExpressionsContainer(fix), true);
@@ -2399,6 +2402,9 @@ describe('IgxGrid - Advanced Filtering', () => {
23992402
// and verify that the root group and all of its children become unselected.
24002403
rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
24012404
UIInteractions.simulateKeyDownEvent(rootOperatorLine, 'Enter');
2405+
fix.detectChanges();
2406+
await wait(200);
2407+
fix.detectChanges();
24022408
await wait(200);
24032409
fix.detectChanges();
24042410
verifyChildrenSelection(GridFunctions.getAdvancedFilteringExpressionsContainer(fix), false);

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3321,23 +3321,30 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
33213321
fix.detectChanges();
33223322

33233323
GridFunctions.applyFilter('a', fix);
3324-
await wait(16);
3324+
fix.detectChanges();
3325+
await wait(300);
3326+
fix.detectChanges();
33253327
GridFunctions.applyFilter('e', fix);
3326-
await wait(16);
3328+
fix.detectChanges();
3329+
await wait(300);
3330+
fix.detectChanges();
33273331
GridFunctions.applyFilter('i', fix);
3328-
await wait(16);
3332+
fix.detectChanges();
3333+
await wait(300);
3334+
fix.detectChanges();
33293335
GridFunctions.applyFilter('o', fix);
33303336
// wait for chip to be scrolled in view
3331-
await wait(200);
33323337
fix.detectChanges();
3333-
await wait(100);
3338+
await wait(300);
3339+
fix.detectChanges();
33343340
verifyMultipleChipsVisibility(fix, [false, false, false, true]);
33353341

33363342
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
33373343
GridFunctions.removeFilterChipByIndex(3, filterUIRow);
33383344
// wait for chip to be scrolled in view
33393345
fix.detectChanges();
3340-
await wait(200);
3346+
await wait(300);
3347+
fix.detectChanges();
33413348

33423349
verifyMultipleChipsVisibility(fix, [false, true, false]);
33433350
let chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
@@ -3346,7 +3353,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
33463353
GridFunctions.removeFilterChipByIndex(2, filterUIRow);
33473354
// wait for chip to be scrolled in view
33483355
fix.detectChanges();
3349-
await wait(200);
3356+
await wait(300);
3357+
fix.detectChanges();
33503358

33513359
verifyMultipleChipsVisibility(fix, [true, false]);
33523360
chips = filterUIRow.queryAll(By.directive(IgxChipComponent));

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -848,19 +848,20 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
848848
fix.detectChanges();
849849

850850
grid.navigateTo(15, 1, (args) => { args.target.nativeElement.focus(); });
851-
await wait(DEBOUNCETIME);
851+
fix.detectChanges();
852+
await wait(200);
852853
fix.detectChanges();
853854

854855
const target = grid.getCellByColumn(15, '1');
855856
expect(target).toBeDefined();
856-
expect(target.focused).toBe(true);
857+
expect(document.activeElement).toBe(target.nativeElement);
857858
});
858859

859860
it('Custom KB navigation: should be able to scroll horizontally and vertically to a cell in the grid', async () => {
860861
fix.componentInstance.columns = fix.componentInstance.generateCols(100);
861862
fix.componentInstance.data = fix.componentInstance.generateData(100);
862-
863863
fix.detectChanges();
864+
await wait(DEBOUNCETIME);
864865

865866
grid.navigateTo(50, 50, (args) => { args.target.nativeElement.focus(); });
866867
await wait(DEBOUNCETIME);
@@ -870,7 +871,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
870871

871872
const target = grid.getCellByColumn(50, '50');
872873
expect(target).toBeDefined();
873-
expect(target.focused).toBe(true);
874+
expect(document.activeElement).toBe(target.nativeElement);
874875
});
875876

876877
it('Custom KB navigation: onGridKeydown should be emitted', async () => {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1176,7 +1176,7 @@ describe('IgxGrid Component Tests #grid', () => {
11761176
expect(fix.componentInstance.grid.calcHeight).toBe(510);
11771177
}));
11781178

1179-
it('should not keep default height when lower the amount of bound data', () => {
1179+
it('should not keep default height when lower the amount of bound data', async() => {
11801180
const fix = TestBed.createComponent(IgxGridWrappedInContComponent);
11811181
fix.detectChanges();
11821182

@@ -1195,6 +1195,8 @@ describe('IgxGrid Component Tests #grid', () => {
11951195

11961196
fix.componentInstance.grid.data = fix.componentInstance.semiData;
11971197
fix.detectChanges();
1198+
await wait(100);
1199+
fix.detectChanges();
11981200

11991201
defaultHeight = fix.debugElement.query(By.css(TBODY_CLASS)).styles.height;
12001202
expect(defaultHeight).toBeNull();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
145145
if (this.shouldGenerate) {
146146
this.setupColumns();
147147
}
148-
this.notifyChanges(true);
148+
this.cdr.markForCheck();
149149
}
150150

151151
/**

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,8 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
401401

402402
hierarchicalGrid.clearFilter();
403403
fixture.detectChanges();
404-
await wait(30);
404+
await wait(100);
405+
fixture.detectChanges();
405406

406407
expect(childGrid.calcWidth - 370 ).toBeLessThan(3);
407408
});
@@ -553,7 +554,7 @@ describe('IgxHierarchicalGrid Row Islands #hGrid', () => {
553554
}
554555
});
555556
it('should allow setting different height/width in px/percent for row islands and grids should be rendered correctly.',
556-
fakeAsync(/** height/width setter + row toggle rAF */() => {
557+
(/** height/width setter + row toggle rAF */async() => {
557558
const ri1 = fixture.componentInstance.rowIsland1;
558559

559560
// test px
@@ -565,6 +566,8 @@ describe('IgxHierarchicalGrid Row Islands #hGrid', () => {
565566
let row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
566567
UIInteractions.clickElement(row.expander);
567568
fixture.detectChanges();
569+
await wait(100);
570+
fixture.detectChanges();
568571
let childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
569572
let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
570573

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,11 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
7878
}));
7979

8080
it(`should render all records exactly if height is 100% and parent container\'s height is unset and
81-
there are fewer than 10 records in the data view`, fakeAsync(() => {
81+
there are fewer than 10 records in the data view`, (async() => {
8282
grid.height = '100%';
8383
fix.componentInstance.data = fix.componentInstance.data.slice(0, 1);
84-
tick(16);
84+
fix.detectChanges();
85+
await wait(100);
8586
fix.detectChanges();
8687
const defaultHeight = fix.debugElement.query(By.css(TBODY_CLASS)).styles.height;
8788
expect(defaultHeight).toBeNull();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
111111
if (this.shouldGenerate) {
112112
this.setupColumns();
113113
}
114-
this.notifyChanges(true);
114+
this.cdr.markForCheck();
115115
}
116116

117117
/**

0 commit comments

Comments
 (0)