Skip to content

Commit 83603dd

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
fix(igxGrid): Recalculate grid sizes when pinned rows collection changes.
1 parent 24c11a4 commit 83603dd

File tree

6 files changed

+75
-16
lines changed

6 files changed

+75
-16
lines changed

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

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1509,6 +1509,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
15091509
@ViewChildren('row')
15101510
private _rowList: QueryList<IgxGridRowComponent>;
15111511

1512+
@ViewChildren('pinnedRow')
1513+
private _pinnedRowList: QueryList<IgxGridRowComponent>;
1514+
15121515
@ViewChildren('summaryRow', { read: IgxSummaryRowComponent })
15131516
protected _summaryRowList: QueryList<IgxSummaryRowComponent>;
15141517

@@ -1754,8 +1757,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
17541757
/**
17551758
* @hidden @internal
17561759
*/
1757-
@ViewChildren('pinContainer', { read: ElementRef })
1758-
public pinContainers: QueryList<ElementRef>;
1760+
@ViewChild('pinContainer', { read: ElementRef })
1761+
public pinContainer: ElementRef;
17591762

17601763
/**
17611764
* @hidden @internal
@@ -2544,6 +2547,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
25442547

25452548

25462549
private columnListDiffer;
2550+
private rowListDiffer;
25472551
private _hiddenColumnsText = '';
25482552
private _pinnedColumnsText = '';
25492553
private _height = '100%';
@@ -2888,6 +2892,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
28882892
super.ngOnInit();
28892893
this._setupServices();
28902894
this._setupListeners();
2895+
this.rowListDiffer = this.differs.find([]).create(null);
28912896
this.columnListDiffer = this.differs.find([]).create(null);
28922897
this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0;
28932898
this.shouldGenerate = this.autoGenerate;
@@ -3044,11 +3049,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
30443049

30453050
const vertScrDC = this.verticalScrollContainer.displayContainer;
30463051
vertScrDC.addEventListener('scroll', this.scrollHandler);
3047-
this.pinContainers.changes.subscribe((c) => {
3048-
if (this.hasPinnedRecords) {
3049-
// on row pin containers change grid sizes should be recalculated.
3050-
this.calculateGridSizes();
3051-
}
3052+
3053+
this._pinnedRowList.changes
3054+
.pipe(takeUntil(this.destroy$))
3055+
.subscribe((change: QueryList<IgxGridRowComponent>) => {
3056+
this.onPinnedRowsChanged(change);
30523057
});
30533058
}
30543059

@@ -3429,7 +3434,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
34293434
* ```
34303435
*/
34313436
get pinnedRows(): IgxGridRowComponent[] {
3432-
return this.rowList.filter(x => x.pinned && !x.disabled);
3437+
return this._pinnedRowList.toArray().sort((a, b) => {
3438+
return a.index - b.index;
3439+
});
34333440
}
34343441

34353442
/**
@@ -4205,7 +4212,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
42054212
this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
42064213
this._pipeTrigger++;
42074214
if (this.gridAPI.grid) {
4208-
this.notifyChanges(true);
4215+
this.notifyChanges();
42094216
}
42104217
}
42114218

@@ -4236,14 +4243,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
42364243
this._pipeTrigger++;
42374244
if (this.gridAPI.grid) {
42384245
this.cdr.detectChanges();
4239-
this.notifyChanges(true);
42404246
}
42414247
return true;
42424248
}
42434249

42444250
get pinnedRowHeight() {
4245-
const pinContainer = this.pinContainers && this.pinContainers.length > 0 ? this.pinContainers.first : null;
4246-
const containerHeight = pinContainer ? pinContainer.nativeElement.offsetHeight : 0;
4251+
const containerHeight = this.pinContainer ? this.pinContainer.nativeElement.offsetHeight : 0;
42474252
return this.hasPinnedRecords ? containerHeight : 0;
42484253
}
42494254

@@ -4817,6 +4822,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
48174822
0 : this.defaultTargetBodyHeight;
48184823
}
48194824

4825+
/**
4826+
* @hidden @internal
4827+
*/
4828+
protected onPinnedRowsChanged(change: QueryList<IgxGridRowComponent>) {
4829+
const diff = this.rowListDiffer.diff(change);
4830+
if (diff) {
4831+
this.notifyChanges(true);
4832+
}
4833+
}
4834+
48204835
/**
48214836
* @hidden
48224837
*/

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

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ describe('Row Pinning #grid', () => {
7777
expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[0]);
7878
expect(grid.getRowByIndex(5).rowID).toBe(fix.componentInstance.data[3]);
7979

80+
fix.detectChanges();
8081
// 2 records pinned + 2px border
8182
expect(grid.pinnedRowHeight).toBe(2 * grid.renderedRowHeight + 2);
8283
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
@@ -111,7 +112,7 @@ describe('Row Pinning #grid', () => {
111112
expect(pinRowContainer[0].children.length).toBe(2);
112113
expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
113114
expect(pinRowContainer[0].children[1].context.rowID).toBe(fix.componentInstance.data[0]);
114-
115+
fix.detectChanges();
115116
// check last pinned is fully in view
116117
const last = pinRowContainer[0].children[1].context.nativeElement;
117118
expect(last.getBoundingClientRect().bottom - grid.tbody.nativeElement.getBoundingClientRect().bottom).toBe(0);
@@ -364,6 +365,7 @@ describe('Row Pinning #grid', () => {
364365
let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
365366
expect(pinRowContainer.length).toBe(1);
366367

368+
fix.detectChanges();
367369
let expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
368370
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
369371

@@ -373,6 +375,7 @@ describe('Row Pinning #grid', () => {
373375
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
374376
expect(pinRowContainer.length).toBe(0);
375377

378+
fix.detectChanges();
376379
expect(grid.pinnedRowHeight).toBe(0);
377380
expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
378381
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
@@ -785,11 +788,37 @@ describe('Row Pinning #grid', () => {
785788
expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[1]);
786789
expect(grid.getRowByIndex(3).rowID).toBe(fix.componentInstance.data[2]);
787790

791+
fix.detectChanges();
788792
// 1 records pinned + 2px border
789793
expect(grid.pinnedRowHeight).toBe(grid.renderedRowHeight + 2);
790794
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
791795
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
792796
});
797+
798+
it('should keep the scrollbar sizes correct when partially filtering out pinned records', () => {
799+
grid.getRowByIndex(1).pin();
800+
fix.detectChanges();
801+
grid.getRowByIndex(3).pin();
802+
fix.detectChanges();
803+
grid.getRowByIndex(5).pin();
804+
fix.detectChanges();
805+
grid.getRowByIndex(7).pin();
806+
fix.detectChanges();
807+
808+
fix.detectChanges();
809+
// 4 records pinned + 2px border
810+
expect(grid.pinnedRowHeight).toBe(4 * grid.renderedRowHeight + 2);
811+
let expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
812+
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
813+
814+
grid.filter('ContactTitle', 'Owner', IgxStringFilteringOperand.instance().condition('contains'), false);
815+
fix.detectChanges();
816+
817+
// 2 records pinned + 2px border
818+
expect(grid.pinnedRowHeight).toBe(2 * grid.renderedRowHeight + 2);
819+
expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
820+
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
821+
});
793822
});
794823
});
795824

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
}"
126126
class='igx-grid__tr--pinned' [style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
127127
<ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
128-
<ng-container *ngTemplateOutlet="getRowTemplate(rowData); context: getContext(rowData, rowIndex, true)">
128+
<ng-container *ngTemplateOutlet="pinned_record_template; context: getContext(rowData, rowIndex, true)">
129129
</ng-container>
130130
</ng-container>
131131
</div>
@@ -160,6 +160,10 @@
160160
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow" #row>
161161
</igx-grid-row>
162162
</ng-template>
163+
<ng-template #pinned_record_template let-rowIndex="index" let-rowData>
164+
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row #pinnedRow>
165+
</igx-grid-row>
166+
</ng-template>
163167
<ng-template #group_template let-rowIndex="index" let-rowData>
164168
<igx-grid-groupby-row [gridID]="id" [index]="rowIndex" [groupRow]="rowData" #row>
165169
</igx-grid-groupby-row>

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
[ngClass]="{ 'igx-grid__tr--pinned-bottom': !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }"
105105
[style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
106106
<ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
107-
<ng-container *ngTemplateOutlet="hierarchical_record_template; context: getContext(rowData, rowIndex, true)">
107+
<ng-container *ngTemplateOutlet="pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)">
108108
</ng-container>
109109
</ng-container>
110110
</div>
@@ -134,6 +134,11 @@
134134
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [rowData]="rowData" #row>
135135
</igx-hierarchical-grid-row>
136136
</ng-template>
137+
138+
<ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData>
139+
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row #pinnedRow>
140+
</igx-hierarchical-grid-row>
141+
</ng-template>
137142
<ng-template #child_record_template let-rowIndex="index" let-rowData>
138143
<div style="overflow:auto;width: 100%;" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'
139144
[ngClass]="{

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -796,6 +796,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
796796
expect(hierarchicalGrid.getRowByIndex(3).rowID).toBe('1');
797797
expect(hierarchicalGrid.getRowByIndex(4).rowID).toBe('2');
798798

799+
fixture.detectChanges();
799800
expect(hierarchicalGrid.pinnedRowHeight).toBe(2 * hierarchicalGrid.renderedRowHeight + 2);
800801
const expectedHeight = parseInt(hierarchicalGrid.height, 10) -
801802
hierarchicalGrid.pinnedRowHeight - 18 - hierarchicalGrid.theadRow.nativeElement.offsetHeight;
@@ -838,6 +839,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
838839
expect(hierarchicalGrid.getRowByIndex(1).rowID).toBe('1');
839840
expect(hierarchicalGrid.getRowByIndex(2).rowID).toBe('2');
840841

842+
fixture.detectChanges();
841843
// Check last pinned is fully in view
842844
const last = pinRowContainer[0].children[1].context.nativeElement;
843845
expect(last.getBoundingClientRect().bottom - hierarchicalGrid.tbody.nativeElement.getBoundingClientRect().bottom).toBe(0);

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
}"
9090
class='igx-grid__tr--pinned' [style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
9191
<ng-container *ngFor="let rowData of pinnedData;let rowIndex = index;">
92-
<ng-container *ngTemplateOutlet="record_template; context: getContext(rowData, rowIndex, true)">
92+
<ng-container *ngTemplateOutlet="pinned_record_template; context: getContext(rowData, rowIndex, true)">
9393
</ng-container>
9494
</ng-container>
9595
</div>
@@ -119,6 +119,10 @@
119119
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow" #row>
120120
</igx-tree-grid-row>
121121
</ng-template>
122+
<ng-template #pinned_record_template let-rowIndex="index" let-rowData>
123+
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" #row #pinnedRow>
124+
</igx-tree-grid-row>
125+
</ng-template>
122126
<ng-template #summary_template let-rowIndex="index" let-rowData>
123127
<igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries"
124128
[firstCellIndentation]="rowData.cellIndentation" [index]="rowIndex"

0 commit comments

Comments
 (0)