Skip to content

Commit e228ad1

Browse files
ChronosSFChronosSF
committed
Merge remote-tracking branch 'origin/master' into mdragnev/row-pinning-mrl
2 parents 3915c1b + cc90be5 commit e228ad1

File tree

2 files changed

+118
-29
lines changed

2 files changed

+118
-29
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3080,6 +3080,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
30803080
public set expansionStates(value) {
30813081
this._expansionStates = new Map<any, boolean>(value);
30823082
this.expansionStatesChange.emit(this._expansionStates);
3083+
this.notifyChanges(true);
30833084
if (this.gridAPI.grid) {
30843085
this.cdr.detectChanges();
30853086
}

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

Lines changed: 117 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ColumnPinningPosition, RowPinningPosition } from '../common/enums';
99
import { IPinningConfig } from '../common/grid.interface';
1010
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
1111
import { verifyLayoutHeadersAreAligned, verifyDOMMatchesLayoutSettings } from '../../test-utils/helper-utils.spec';
12+
import { GridFunctions } from '../../test-utils/grid-functions.spec';
1213
import { SortingDirection } from '../../data-operations/sorting-expression.interface';
1314
import { IgxGridTransaction } from '../tree-grid';
1415
import { IgxTransactionService } from '../../services';
@@ -25,14 +26,15 @@ describe('Row Pinning #grid', () => {
2526
declarations: [
2627
GridRowPinningComponent,
2728
GridRowPinningWithMRLComponent,
29+
GridRowPinningWithMDVComponent,
2830
GridRowPinningWithTransactionsComponent
2931
],
3032
imports: [
3133
NoopAnimationsModule,
3234
IgxGridModule
3335
]
3436
})
35-
.compileComponents();
37+
.compileComponents();
3638
}));
3739

3840
describe('', () => {
@@ -73,7 +75,7 @@ describe('Row Pinning #grid', () => {
7375

7476
// 2 records pinned + 2px border
7577
expect(grid.pinnedRowHeight).toBe(2 * grid.renderedRowHeight + 2);
76-
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
78+
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
7779
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
7880
});
7981

@@ -112,7 +114,7 @@ describe('Row Pinning #grid', () => {
112114

113115
// 2 records pinned + 2px border
114116
expect(grid.pinnedRowHeight).toBe(2 * grid.renderedRowHeight + 2);
115-
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
117+
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
116118
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
117119
});
118120

@@ -197,31 +199,63 @@ describe('Row Pinning #grid', () => {
197199
});
198200

199201
it('should pin/unpin via row pinned setter.', () => {
200-
// pin 2nd row
201-
let row = grid.getRowByIndex(1);
202-
row.pinned = true;
203-
fix.detectChanges();
204-
205-
expect(grid.pinnedRows.length).toBe(1);
206-
let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
207-
expect(pinRowContainer.length).toBe(1);
208-
expect(pinRowContainer[0].children.length).toBe(1);
209-
expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
210-
211-
expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[1]);
212-
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[0]);
213-
214-
// unpin
215-
row = grid.getRowByIndex(0);
216-
row.pinned = false;
217-
fix.detectChanges();
218-
219-
expect(grid.pinnedRows.length).toBe(0);
220-
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
221-
expect(pinRowContainer.length).toBe(0);
222-
223-
expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[0]);
224-
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]);
202+
// pin 2nd row
203+
let row = grid.getRowByIndex(1);
204+
row.pinned = true;
205+
fix.detectChanges();
206+
207+
expect(grid.pinnedRows.length).toBe(1);
208+
let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
209+
expect(pinRowContainer.length).toBe(1);
210+
expect(pinRowContainer[0].children.length).toBe(1);
211+
expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
212+
213+
expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[1]);
214+
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[0]);
215+
216+
// unpin
217+
row = grid.getRowByIndex(0);
218+
row.pinned = false;
219+
fix.detectChanges();
220+
221+
expect(grid.pinnedRows.length).toBe(0);
222+
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
223+
expect(pinRowContainer.length).toBe(0);
224+
225+
expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[0]);
226+
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]);
227+
});
228+
229+
it('should pin rows when columns are grouped.', () => {
230+
// pin 1st and 2nd data row
231+
grid.pinRow(fix.componentInstance.data[0]);
232+
grid.pinRow(fix.componentInstance.data[1]);
233+
fix.detectChanges();
234+
235+
// group by string column
236+
grid.groupBy({
237+
fieldName: 'ContactTitle', dir: SortingDirection.Desc, ignoreCase: false
238+
});
239+
fix.detectChanges();
240+
241+
expect(grid.pinnedRows.length).toBe(2);
242+
243+
// verify rows
244+
const groupRows = grid.groupsRowList.toArray();
245+
const dataRows = grid.dataRowList.toArray();
246+
247+
expect(groupRows.length).toEqual(2);
248+
expect(dataRows.length).toEqual(7);
249+
expect(groupRows[0].groupRow.records[0].ID).toEqual('AROUT');
250+
251+
// pin 4th data row with ID:AROUT
252+
grid.pinRow(fix.componentInstance.data[3]);
253+
fix.detectChanges();
254+
255+
expect(grid.pinnedRows.length).toBe(3);
256+
257+
// make sure the pinned row is out of the first groupBy group
258+
expect(groupRows[0].groupRow.records[0].ID).toEqual('BLAUS');
225259
});
226260

227261
it('should apply sorting to both pinned and unpinned rows.', () => {
@@ -244,6 +278,40 @@ describe('Row Pinning #grid', () => {
244278
expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[lastIndex]);
245279
});
246280
});
281+
describe('Row pinning with Master Detail View', () => {
282+
beforeEach(fakeAsync(() => {
283+
fix = TestBed.createComponent(GridRowPinningWithMDVComponent);
284+
fix.detectChanges();
285+
grid = fix.componentInstance.instance;
286+
tick();
287+
fix.detectChanges();
288+
}));
289+
290+
it('should be in view when expanded and pinning row to bottom of the grid.', () => {
291+
fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
292+
fix.detectChanges();
293+
// pin 1st row
294+
const row = grid.getRowByIndex(0);
295+
row.pinned = true;
296+
fix.detectChanges();
297+
298+
GridFunctions.toggleMasterRow(fix, grid.pinnedRows[0]);
299+
fix.detectChanges();
300+
301+
302+
expect(grid.pinnedRows.length).toBe(1);
303+
304+
const firstRowIconName = GridFunctions.getRowExpandIconName(grid.pinnedRows[0]);
305+
const firstRowDetail = GridFunctions.getMasterRowDetail(grid.pinnedRows[0]);
306+
expect(grid.expansionStates.size).toEqual(1);
307+
expect(grid.expansionStates.has(grid.pinnedRows[0].rowID)).toBeTruthy();
308+
expect(grid.expansionStates.get(grid.pinnedRows[0].rowID)).toBeTruthy();
309+
expect(firstRowIconName).toEqual('expand_more');
310+
311+
// check last pinned and expanded is fully in view
312+
expect(firstRowDetail.getBoundingClientRect().bottom - grid.tbody.nativeElement.getBoundingClientRect().bottom).toBe(0);
313+
});
314+
});
247315

248316
describe(' Editing ', () => {
249317
beforeEach(fakeAsync(() => {
@@ -283,7 +351,7 @@ describe('Row Pinning #grid', () => {
283351

284352
it('should allow pinning added row.', () => {
285353

286-
grid.addRow({ 'ID': 'Test', 'CompanyName': 'Test'});
354+
grid.addRow({ 'ID': 'Test', 'CompanyName': 'Test' });
287355
fix.detectChanges();
288356

289357
grid.pinRow('Test');
@@ -456,6 +524,26 @@ export class GridRowPinningWithMRLComponent extends GridRowPinningComponent {
456524
];
457525
}
458526

527+
@Component({
528+
template: `
529+
<igx-grid
530+
[pinning]='pinningConfig'
531+
[width]='"800px"'
532+
[height]='"500px"'
533+
[data]="data"
534+
[autoGenerate]="true">
535+
<ng-template igxGridDetail let-dataItem>
536+
<div>
537+
<div><span class='categoryStyle'>Country:</span> {{dataItem.Country}}</div>
538+
<div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
539+
<div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
540+
</div>
541+
</ng-template>
542+
</igx-grid>`
543+
})
544+
export class GridRowPinningWithMDVComponent extends GridRowPinningComponent {}
545+
546+
459547
@Component({
460548
template: `
461549
<igx-grid

0 commit comments

Comments
 (0)