Skip to content

Commit f2bce44

Browse files
ChronosSFChronosSF
authored
Merge branch 'master' into mdragnev/row-pinning-summaries
2 parents fed4cc2 + cc90be5 commit f2bce44

File tree

2 files changed

+139
-32
lines changed

2 files changed

+139
-32
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
@@ -3084,6 +3084,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
30843084
public set expansionStates(value) {
30853085
this._expansionStates = new Map<any, boolean>(value);
30863086
this.expansionStatesChange.emit(this._expansionStates);
3087+
this.notifyChanges(true);
30873088
if (this.gridAPI.grid) {
30883089
this.cdr.detectChanges();
30893090
}

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

Lines changed: 138 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
88
import { ColumnPinningPosition, RowPinningPosition } from '../common/enums';
99
import { IPinningConfig } from '../common/grid.interface';
1010
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
11+
import { GridFunctions } from '../../test-utils/grid-functions.spec';
12+
import { SortingDirection } from '../../data-operations/sorting-expression.interface';
1113
import { IgxGridTransaction } from '../tree-grid';
1214
import { IgxTransactionService } from '../../services';
1315
import { SortingDirection } from '../../data-operations/sorting-expression.interface';
@@ -24,14 +26,15 @@ describe('Row Pinning #grid', () => {
2426
TestBed.configureTestingModule({
2527
declarations: [
2628
GridRowPinningComponent,
29+
GridRowPinningWithMDVComponent,
2730
GridRowPinningWithTransactionsComponent
2831
],
2932
imports: [
3033
NoopAnimationsModule,
3134
IgxGridModule
3235
]
3336
})
34-
.compileComponents();
37+
.compileComponents();
3538
}));
3639

3740
describe('', () => {
@@ -72,7 +75,7 @@ describe('Row Pinning #grid', () => {
7275

7376
// 2 records pinned + 2px border
7477
expect(grid.pinnedRowHeight).toBe(2 * grid.renderedRowHeight + 2);
75-
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;
7679
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
7780
});
7881

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

112115
// 2 records pinned + 2px border
113116
expect(grid.pinnedRowHeight).toBe(2 * grid.renderedRowHeight + 2);
114-
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;
115118
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
116119
});
117120

@@ -196,31 +199,117 @@ describe('Row Pinning #grid', () => {
196199
});
197200

198201
it('should pin/unpin via row pinned setter.', () => {
199-
// pin 2nd row
200-
let row = grid.getRowByIndex(1);
201-
row.pinned = true;
202-
fix.detectChanges();
203-
204-
expect(grid.pinnedRows.length).toBe(1);
205-
let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
206-
expect(pinRowContainer.length).toBe(1);
207-
expect(pinRowContainer[0].children.length).toBe(1);
208-
expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
209-
210-
expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[1]);
211-
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[0]);
212-
213-
// unpin
214-
row = grid.getRowByIndex(0);
215-
row.pinned = false;
216-
fix.detectChanges();
217-
218-
expect(grid.pinnedRows.length).toBe(0);
219-
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
220-
expect(pinRowContainer.length).toBe(0);
221-
222-
expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[0]);
223-
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');
259+
});
260+
261+
it('should apply sorting to both pinned and unpinned rows.', () => {
262+
grid.getRowByIndex(1).pin();
263+
grid.getRowByIndex(5).pin();
264+
fix.detectChanges();
265+
266+
expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[1]);
267+
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[5]);
268+
269+
grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false });
270+
fix.detectChanges();
271+
272+
// check pinned rows data is sorted
273+
expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[5]);
274+
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]);
275+
276+
// check unpinned rows data is sorted
277+
const lastIndex = fix.componentInstance.data.length - 1;
278+
expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[lastIndex]);
279+
});
280+
});
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);
224313
});
225314

226315
it('should calculate global summaries with both pinned and unpinned collections', () => {
@@ -319,7 +408,7 @@ describe('Row Pinning #grid', () => {
319408

320409
it('should allow pinning added row.', () => {
321410

322-
grid.addRow({ 'ID': 'Test', 'CompanyName': 'Test'});
411+
grid.addRow({ 'ID': 'Test', 'CompanyName': 'Test' });
323412
fix.detectChanges();
324413

325414
grid.pinRow('Test');
@@ -380,6 +469,25 @@ export class GridRowPinningComponent {
380469
public instance: IgxGridComponent;
381470
}
382471

472+
@Component({
473+
template: `
474+
<igx-grid
475+
[pinning]='pinningConfig'
476+
[width]='"800px"'
477+
[height]='"500px"'
478+
[data]="data"
479+
[autoGenerate]="true">
480+
<ng-template igxGridDetail let-dataItem>
481+
<div>
482+
<div><span class='categoryStyle'>Country:</span> {{dataItem.Country}}</div>
483+
<div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
484+
<div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
485+
</div>
486+
</ng-template>
487+
</igx-grid>`
488+
})
489+
export class GridRowPinningWithMDVComponent extends GridRowPinningComponent {}
490+
383491

384492
@Component({
385493
template: `
@@ -394,6 +502,4 @@ export class GridRowPinningComponent {
394502
`,
395503
providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }]
396504
})
397-
export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent {
398-
public data = SampleTestData.contactInfoDataFull();
399-
}
505+
export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent {}

0 commit comments

Comments
 (0)