Skip to content

Commit 9cce677

Browse files
ChronosSFChronosSF
authored
Merge branch 'master' into SKrastev/row-pinning-nav
2 parents d8d0a19 + b402d4d commit 9cce677

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
@@ -2553,6 +2556,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
25532556

25542557

25552558
private columnListDiffer;
2559+
private rowListDiffer;
25562560
private _hiddenColumnsText = '';
25572561
private _pinnedColumnsText = '';
25582562
private _height = '100%';
@@ -2903,6 +2907,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
29032907
super.ngOnInit();
29042908
this._setupServices();
29052909
this._setupListeners();
2910+
this.rowListDiffer = this.differs.find([]).create(null);
29062911
this.columnListDiffer = this.differs.find([]).create(null);
29072912
this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0;
29082913
this.shouldGenerate = this.autoGenerate;
@@ -3061,11 +3066,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
30613066

30623067
const vertScrDC = this.verticalScrollContainer.displayContainer;
30633068
vertScrDC.addEventListener('scroll', this.scrollHandler);
3064-
this.pinContainers.changes.subscribe((c) => {
3065-
if (this.hasPinnedRecords) {
3066-
// on row pin containers change grid sizes should be recalculated.
3067-
this.calculateGridSizes();
3068-
}
3069+
3070+
this._pinnedRowList.changes
3071+
.pipe(takeUntil(this.destroy$))
3072+
.subscribe((change: QueryList<IgxGridRowComponent>) => {
3073+
this.onPinnedRowsChanged(change);
30693074
});
30703075
}
30713076

@@ -3446,7 +3451,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
34463451
* ```
34473452
*/
34483453
get pinnedRows(): IgxGridRowComponent[] {
3449-
return this.rowList.filter(x => x.pinned && !x.disabled);
3454+
return this._pinnedRowList.toArray().sort((a, b) => {
3455+
return a.index - b.index;
3456+
});
34503457
}
34513458

34523459
/**
@@ -4222,7 +4229,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
42224229
this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
42234230
this._pipeTrigger++;
42244231
if (this.gridAPI.grid) {
4225-
this.notifyChanges(true);
4232+
this.notifyChanges();
42264233
}
42274234
}
42284235

@@ -4253,14 +4260,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
42534260
this._pipeTrigger++;
42544261
if (this.gridAPI.grid) {
42554262
this.cdr.detectChanges();
4256-
this.notifyChanges(true);
42574263
}
42584264
return true;
42594265
}
42604266

42614267
get pinnedRowHeight() {
4262-
const pinContainer = this.pinContainers && this.pinContainers.length > 0 ? this.pinContainers.first : null;
4263-
const containerHeight = pinContainer ? pinContainer.nativeElement.offsetHeight : 0;
4268+
const containerHeight = this.pinContainer ? this.pinContainer.nativeElement.offsetHeight : 0;
42644269
return this.hasPinnedRecords ? containerHeight : 0;
42654270
}
42664271

@@ -4834,6 +4839,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
48344839
0 : this.defaultTargetBodyHeight;
48354840
}
48364841

4842+
/**
4843+
* @hidden @internal
4844+
*/
4845+
protected onPinnedRowsChanged(change: QueryList<IgxGridRowComponent>) {
4846+
const diff = this.rowListDiffer.diff(change);
4847+
if (diff) {
4848+
this.notifyChanges(true);
4849+
}
4850+
}
4851+
48374852
/**
48384853
* @hidden
48394854
*/

‎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
@@ -78,6 +78,7 @@ describe('Row Pinning #grid', () => {
7878
expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[0]);
7979
expect(grid.getRowByIndex(5).rowID).toBe(fix.componentInstance.data[3]);
8080

81+
fix.detectChanges();
8182
// 2 records pinned + 2px border
8283
expect(grid.pinnedRowHeight).toBe(2 * grid.renderedRowHeight + 2);
8384
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
@@ -112,7 +113,7 @@ describe('Row Pinning #grid', () => {
112113
expect(pinRowContainer[0].children.length).toBe(2);
113114
expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
114115
expect(pinRowContainer[0].children[1].context.rowID).toBe(fix.componentInstance.data[0]);
115-
116+
fix.detectChanges();
116117
// check last pinned is fully in view
117118
const last = pinRowContainer[0].children[1].context.nativeElement;
118119
expect(last.getBoundingClientRect().bottom - grid.tbody.nativeElement.getBoundingClientRect().bottom).toBe(0);
@@ -382,6 +383,7 @@ describe('Row Pinning #grid', () => {
382383
let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
383384
expect(pinRowContainer.length).toBe(1);
384385

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

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

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

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

816845
describe(' Navigation', () => {

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