Skip to content

Commit 00817f4

Browse files
ddinchevaddincheva
committed
Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into ddincheva/kbChangeLog
2 parents 39c39ae + b402d4d commit 00817f4

File tree

8 files changed

+77
-16
lines changed

8 files changed

+77
-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
@@ -2548,6 +2551,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
25482551

25492552

25502553
private columnListDiffer;
2554+
private rowListDiffer;
25512555
private _hiddenColumnsText = '';
25522556
private _pinnedColumnsText = '';
25532557
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;
@@ -3045,11 +3050,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
30453050

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

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

34363443
/**
@@ -4206,7 +4213,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
42064213
this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
42074214
this._pipeTrigger++;
42084215
if (this.gridAPI.grid) {
4209-
this.notifyChanges(true);
4216+
this.notifyChanges();
42104217
}
42114218
}
42124219

@@ -4237,14 +4244,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
42374244
this._pipeTrigger++;
42384245
if (this.gridAPI.grid) {
42394246
this.cdr.detectChanges();
4240-
this.notifyChanges(true);
42414247
}
42424248
return true;
42434249
}
42444250

42454251
get pinnedRowHeight() {
4246-
const pinContainer = this.pinContainers && this.pinContainers.length > 0 ? this.pinContainers.first : null;
4247-
const containerHeight = pinContainer ? pinContainer.nativeElement.offsetHeight : 0;
4252+
const containerHeight = this.pinContainer ? this.pinContainer.nativeElement.offsetHeight : 0;
42484253
return this.hasPinnedRecords ? containerHeight : 0;
42494254
}
42504255

@@ -4818,6 +4823,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
48184823
0 : this.defaultTargetBodyHeight;
48194824
}
48204825

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

‎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);
@@ -381,6 +382,7 @@ describe('Row Pinning #grid', () => {
381382
let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
382383
expect(pinRowContainer.length).toBe(1);
383384

385+
fix.detectChanges();
384386
let expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
385387
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
386388

@@ -390,6 +392,7 @@ describe('Row Pinning #grid', () => {
390392
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
391393
expect(pinRowContainer.length).toBe(0);
392394

395+
fix.detectChanges();
393396
expect(grid.pinnedRowHeight).toBe(0);
394397
expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
395398
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
@@ -805,11 +808,37 @@ describe('Row Pinning #grid', () => {
805808
expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[1]);
806809
expect(grid.getRowByIndex(3).rowID).toBe(fix.componentInstance.data[2]);
807810

811+
fix.detectChanges();
808812
// 1 records pinned + 2px border
809813
expect(grid.pinnedRowHeight).toBe(grid.renderedRowHeight + 2);
810814
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
811815
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
812816
});
817+
818+
it('should keep the scrollbar sizes correct when partially filtering out pinned records', () => {
819+
grid.getRowByIndex(1).pin();
820+
fix.detectChanges();
821+
grid.getRowByIndex(3).pin();
822+
fix.detectChanges();
823+
grid.getRowByIndex(5).pin();
824+
fix.detectChanges();
825+
grid.getRowByIndex(7).pin();
826+
fix.detectChanges();
827+
828+
fix.detectChanges();
829+
// 4 records pinned + 2px border
830+
expect(grid.pinnedRowHeight).toBe(4 * grid.renderedRowHeight + 2);
831+
let expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
832+
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
833+
834+
grid.filter('ContactTitle', 'Owner', IgxStringFilteringOperand.instance().condition('contains'), false);
835+
fix.detectChanges();
836+
837+
// 2 records pinned + 2px border
838+
expect(grid.pinnedRowHeight).toBe(2 * grid.renderedRowHeight + 2);
839+
expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
840+
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
841+
});
813842
});
814843
});
815844

‎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/state.directive.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,6 +416,7 @@ describe('IgxGridState - input properties #grid', () => {
416416
expect(gridState).toBe(rowPinState);
417417

418418
grid.getRowByIndex(3).pin();
419+
fix.detectChanges();
419420

420421
state.setState(rowPinStateObject);
421422
fix.detectChanges();

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1473,6 +1473,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
14731473

14741474
treeGrid.pinRow(rowToPin.rowData[primaryKey]);
14751475
fix.detectChanges();
1476+
fix.detectChanges();
14761477

14771478
const firstColumnField = treeGrid.columns[0].field;
14781479
const pinnedChipPosition = treeGrid.getCellByColumn(1, firstColumnField);

‎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)