Skip to content

Commit e3d9578

Browse files
kdinevkdinev
authored
Merge branch 'master' into dTsvetkov/fix-9782-master
2 parents 210896a + 99b22a5 commit e3d9578

File tree

7 files changed

+61
-74
lines changed

7 files changed

+61
-74
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 12.2.1
6+
7+
### New Features
8+
- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
9+
- new `rowPinned` event is emitted after a row is pinned/unpinned and grid has already refreshed its state to represent the pinned/unpinned rows in the DOM.
10+
511
## 12.2.0
612

713
### New Features

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ import {
5454
Action,
5555
} from '../services/public_api';
5656
import { GridBaseAPIService } from './api.service';
57-
import { IgxGridCellComponent } from './cell.component';
5857
import { ISummaryExpression } from './summaries/grid-summary';
5958
import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
6059
import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
@@ -941,6 +940,17 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
941940
@Output()
942941
public rowPinning = new EventEmitter<IPinRowEventArgs>();
943942

943+
/**
944+
* Emitted when the pinned state of a row is changed.
945+
*
946+
* @example
947+
* ```html
948+
* <igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>
949+
* ```
950+
*/
951+
@Output()
952+
public rowPinned = new EventEmitter<IPinRowEventArgs>();
953+
944954
/**
945955
* Emmited when the active node is changed.
946956
*
@@ -4826,6 +4836,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
48264836
if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
48274837
return false;
48284838
}
4839+
48294840
const eventArgs: IPinRowEventArgs = {
48304841
insertAtIndex: index,
48314842
isPinned: true,
@@ -4840,8 +4851,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
48404851
this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
48414852
this.pipeTrigger++;
48424853
if (this.gridAPI.grid) {
4843-
this.notifyChanges();
4854+
this.cdr.detectChanges();
4855+
this.rowPinned.emit(eventArgs);
48444856
}
4857+
48454858
return true;
48464859
}
48474860

@@ -4867,12 +4880,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
48674880
row
48684881
};
48694882
this.rowPinning.emit(eventArgs);
4883+
48704884
this.crudService.endEdit(false);
48714885
this._pinnedRecordIDs.splice(index, 1);
48724886
this.pipeTrigger++;
48734887
if (this.gridAPI.grid) {
48744888
this.cdr.detectChanges();
4889+
this.rowPinned.emit(eventArgs);
48754890
}
4891+
48764892
return true;
48774893
}
48784894

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ abstract class BaseRow implements RowType {
211211
* ```
212212
*/
213213
public pin(): boolean {
214-
return this.grid.pinRow(this.key);
214+
return this.grid.pinRow(this.key, this.index);
215215
}
216216

217217
/**

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

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -155,28 +155,51 @@ describe('Row Pinning #grid', () => {
155155
let row = grid.getRowByIndex(0);
156156
const rowID = row.key;
157157
row.pin();
158-
fix.detectChanges();
159158

160159
// Check pinned state with getRowByIndex after pin action
161160
expect(row.pinned).toBe(true);
162161

163162
expect(grid.rowPinning.emit).toHaveBeenCalledTimes(1);
164163
expect(grid.rowPinning.emit).toHaveBeenCalledWith({
165164
rowID,
166-
insertAtIndex: undefined,
165+
insertAtIndex: 0,
167166
isPinned: true,
168167
row
169168
});
170169

171170
row = grid.getRowByIndex(0);
172171
row.unpin();
173-
fix.detectChanges();
174172
// Check pinned state with getRowByIndex after unpin action
175173
expect(row.pinned).toBe(false);
176174

177175
expect(grid.rowPinning.emit).toHaveBeenCalledTimes(2);
178176
});
179177

178+
it('should emit rowPinned on pin/unpin.', () => {
179+
spyOn(grid.rowPinned, 'emit').and.callThrough();
180+
181+
const row = grid.getRowByIndex(0);
182+
const rowID = row.key;
183+
row.pin();
184+
185+
// Check pinned state with getRowByIndex after pin action
186+
expect(row.pinned).toBe(true);
187+
188+
expect(grid.rowPinned.emit).toHaveBeenCalledTimes(1);
189+
expect(grid.rowPinned.emit).toHaveBeenCalledWith({
190+
rowID,
191+
insertAtIndex: 0,
192+
isPinned: true,
193+
row
194+
});
195+
196+
row.unpin();
197+
// Check pinned state with getRowByIndex after unpin action
198+
expect(row.pinned).toBe(false);
199+
200+
expect(grid.rowPinned.emit).toHaveBeenCalledTimes(2);
201+
});
202+
180203
it('should pin/unpin via grid API methods.', () => {
181204
// pin 2nd row
182205
grid.pinRow(fix.componentInstance.data[1]);
@@ -223,7 +246,6 @@ describe('Row Pinning #grid', () => {
223246
// unpin
224247
row = grid.gridAPI.get_row_by_index(0);
225248
row.unpin();
226-
fix.detectChanges();
227249

228250
expect(grid.pinnedRows.length).toBe(0);
229251
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -429,8 +451,7 @@ describe('Row Pinning #grid', () => {
429451

430452
it('should apply sorting to both pinned and unpinned rows.', () => {
431453
grid.gridAPI.get_row_by_index(1).pin();
432-
grid.gridAPI.get_row_by_index(5).pin();
433-
fix.detectChanges();
454+
grid.gridAPI.get_row_by_index(6).pin();
434455

435456
expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[1]);
436457
expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[5]);
@@ -573,7 +594,6 @@ describe('Row Pinning #grid', () => {
573594
it('should correctly apply paging state for grid and paginator when there are pinned rows.', () => {
574595
// pin the first row
575596
grid.gridAPI.get_row_by_index(0).pin();
576-
fix.detectChanges();
577597

578598
expect(grid.rowList.length).toEqual(6);
579599
expect(grid.perPage).toEqual(5);
@@ -583,7 +603,6 @@ describe('Row Pinning #grid', () => {
583603

584604
// pin the second row
585605
grid.gridAPI.get_row_by_index(2).pin();
586-
fix.detectChanges();
587606

588607
expect(grid.rowList.length).toEqual(7);
589608
expect(grid.perPage).toEqual(5);
@@ -594,19 +613,17 @@ describe('Row Pinning #grid', () => {
594613

595614
it('should have the correct records shown for pages with pinned rows', () => {
596615
grid.gridAPI.get_row_by_index(0).pin();
597-
grid.gridAPI.get_row_by_index(1).pin();
598-
fix.detectChanges();
599616

600617
let rows = grid.rowList.toArray();
601618

602-
[1, 2, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
619+
[1, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
603620

604621
grid.paginate(2);
605622
fix.detectChanges();
606623

607624
rows = grid.rowList.toArray();
608625

609-
[1, 2, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
626+
[1, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
610627
});
611628
});
612629

@@ -805,10 +822,8 @@ describe('Row Pinning #grid', () => {
805822
// Pin/Unpin with the methods
806823
firstRow.unpin();
807824
expect(firstRow.pinned).toBe(false);
808-
fix.detectChanges();
809825
firstRow.pin();
810826
expect(firstRow.pinned).toBe(true);
811-
fix.detectChanges();
812827

813828
// Check again pinned row presence
814829
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -855,7 +870,6 @@ describe('Row Pinning #grid', () => {
855870
it('should hide columns in pinned and unpinned area', () => {
856871
// pin 2nd data row
857872
grid.pinRow(fix.componentInstance.data[1]);
858-
fix.detectChanges();
859873
const hiddenCol = grid.columns[1];
860874
hiddenCol.hidden = true;
861875
fix.detectChanges();
@@ -892,14 +906,9 @@ describe('Row Pinning #grid', () => {
892906

893907
it('should keep the scrollbar sizes correct when partially filtering out pinned records', () => {
894908
grid.gridAPI.get_row_by_index(1).pin();
895-
fix.detectChanges();
896909
grid.gridAPI.get_row_by_index(3).pin();
897-
fix.detectChanges();
898910
grid.gridAPI.get_row_by_index(5).pin();
899-
fix.detectChanges();
900911
grid.gridAPI.get_row_by_index(7).pin();
901-
fix.detectChanges();
902-
903912
fix.detectChanges();
904913
// 4 records pinned + 2px border
905914
expect(grid.pinnedRowHeight).toBe(4 * grid.renderedRowHeight + 2);
@@ -929,9 +938,7 @@ describe('Row Pinning #grid', () => {
929938
it('should enter edit mode for the next editable cell when tabbing.', () => {
930939
const gridContent = GridFunctions.getGridContent(fix);
931940
grid.gridAPI.get_row_by_index(0).pin();
932-
fix.detectChanges();
933941
grid.gridAPI.get_row_by_index(3).pin();
934-
fix.detectChanges();
935942

936943
const firstEditable = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
937944
const secondEditable = grid.gridAPI.get_cell_by_index(1, 'CompanyName');
@@ -967,9 +974,7 @@ describe('Row Pinning #grid', () => {
967974
it('should enter edit mode for the previous editable cell when shift+tabbing.', () => {
968975
const gridContent = GridFunctions.getGridContent(fix);
969976
grid.gridAPI.get_row_by_index(0).pin();
970-
fix.detectChanges();
971977
grid.gridAPI.get_row_by_index(3).pin();
972-
fix.detectChanges();
973978

974979
const firstEditable = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
975980
const secondEditable = grid.gridAPI.get_cell_by_index(1, 'CompanyName');
@@ -1017,7 +1022,6 @@ describe('Row Pinning #grid', () => {
10171022

10181023
it('should navigate to bottom from top pinned row using Ctrl+ArrowDown', async () => {
10191024
grid.gridAPI.get_row_by_index(5).pin();
1020-
fix.detectChanges();
10211025

10221026
const firstRowCell = grid.gridAPI.get_row_by_index(0).cells.toArray()[1];
10231027
UIInteractions.simulateClickAndSelectEvent(firstRowCell);
@@ -1039,7 +1043,6 @@ describe('Row Pinning #grid', () => {
10391043

10401044
it('should navigate and scroll to first unpinned row from top pinned row using ArrowDown', async () => {
10411045
grid.gridAPI.get_row_by_index(5).pin();
1042-
fix.detectChanges();
10431046

10441047
grid.navigateTo(10);
10451048
await wait(DEBOUNCE_TIME);
@@ -1064,7 +1067,6 @@ describe('Row Pinning #grid', () => {
10641067

10651068
it('should navigate to top pinned row from bottom unpinned row without scrolling using Ctrl+ArrowUp', async () => {
10661069
grid.gridAPI.get_row_by_index(5).pin();
1067-
fix.detectChanges();
10681070

10691071
grid.navigateTo(27);
10701072
await wait(DEBOUNCE_TIME);
@@ -1095,7 +1097,6 @@ describe('Row Pinning #grid', () => {
10951097
it('should navigate to top pinned row from first unpinned row using ArrowUp', async () => {
10961098
grid.gridAPI.get_row_by_index(5).pin();
10971099
grid.gridAPI.get_row_by_index(1).pin();
1098-
fix.detectChanges();
10991100

11001101
const thirdRowCell = grid.gridAPI.get_row_by_index(2).cells.toArray()[1];
11011102
UIInteractions.simulateClickAndSelectEvent(thirdRowCell);
@@ -1118,7 +1119,6 @@ describe('Row Pinning #grid', () => {
11181119
it('should navigate and scroll to top from bottom pinned row using Ctrl+ArrowUp', async () => {
11191120
fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
11201121
grid.gridAPI.get_row_by_index(5).pin();
1121-
fix.detectChanges();
11221122

11231123
grid.navigateTo(26);
11241124
await wait(DEBOUNCE_TIME);
@@ -1171,7 +1171,6 @@ describe('Row Pinning #grid', () => {
11711171
it('should navigate to bottom pinned row from top unpinned row without scrolling using Ctrl+ArrowDown', async () => {
11721172
fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
11731173
grid.gridAPI.get_row_by_index(5).pin();
1174-
fix.detectChanges();
11751174

11761175
expect(grid.verticalScrollContainer.getScroll().scrollTop).toEqual(0);
11771176

@@ -1199,7 +1198,6 @@ describe('Row Pinning #grid', () => {
11991198
grid.gridAPI.get_row_by_index(5).pin();
12001199
grid.gridAPI.get_row_by_index(1).pin();
12011200
await wait(DEBOUNCE_TIME);
1202-
fix.detectChanges();
12031201

12041202
grid.navigateTo(26);
12051203
await wait(DEBOUNCE_TIME);
@@ -1228,8 +1226,6 @@ describe('Row Pinning #grid', () => {
12281226
it('should navigate down from pinned to unpinned row when there are filtered out pinned rows', async () => {
12291227
grid.gridAPI.get_row_by_index(5).pin();
12301228
grid.gridAPI.get_row_by_index(1).pin();
1231-
fix.detectChanges();
1232-
12331229
grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('contains'), false);
12341230
fix.detectChanges();
12351231

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -866,15 +866,12 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
866866

867867
it('should pin rows to top ', (() => {
868868
hierarchicalGrid.pinRow('0');
869-
fixture.detectChanges();
870869
expect(hierarchicalGrid.pinnedRows.length).toBe(1);
871870

872871
hierarchicalGrid.unpinRow('0');
873-
fixture.detectChanges();
874872
expect(hierarchicalGrid.pinnedRows.length).toBe(0);
875873

876874
hierarchicalGrid.pinRow('0');
877-
fixture.detectChanges();
878875
expect(hierarchicalGrid.pinnedRows.length).toBe(1);
879876

880877
let pinRowContainer = fixture.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -888,7 +885,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
888885
expect(hierarchicalGrid.getRowByIndex(3).key).toBe('2');
889886

890887
hierarchicalGrid.pinRow('2');
891-
fixture.detectChanges();
892888

893889
pinRowContainer = fixture.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
894890
expect(pinRowContainer[0].children.length).toBe(2);
@@ -1107,7 +1103,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
11071103
const paginator = fixture.debugElement.query(By.directive(IgxPaginatorComponent)).componentInstance;
11081104
// pin the first row
11091105
hierarchicalGrid.getRowByIndex(0).pin();
1110-
fixture.detectChanges();
11111106

11121107
expect(hierarchicalGrid.rowList.length).toEqual(6);
11131108
expect(hierarchicalGrid.perPage).toEqual(5);
@@ -1117,7 +1112,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
11171112

11181113
// pin the second row
11191114
hierarchicalGrid.getRowByIndex(2).pin();
1120-
fixture.detectChanges();
11211115

11221116
expect(hierarchicalGrid.rowList.length).toEqual(7);
11231117
expect(hierarchicalGrid.perPage).toEqual(5);
@@ -1148,19 +1142,17 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
11481142
hierarchicalGrid.height = '700px';
11491143
fixture.detectChanges();
11501144
hierarchicalGrid.getRowByIndex(0).pin();
1151-
hierarchicalGrid.getRowByIndex(1).pin();
1152-
fixture.detectChanges();
11531145

11541146
let rows = hierarchicalGrid.rowList.toArray();
11551147

1156-
[0, 1, 0, 1, 2, 3, 4].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
1148+
[0, 0, 1, 2, 3, 4, 5].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
11571149

11581150
hierarchicalGrid.paginate(6);
11591151
fixture.detectChanges();
11601152

11611153
rows = hierarchicalGrid.rowList.toArray();
11621154

1163-
[0, 1, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
1155+
[0, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
11641156
});
11651157
});
11661158
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
500500

501501
/**
502502
* Pins the specified row.
503-
* This method emits `rowPinning` event.
503+
* This method emits `rowPinning`\`rowPinned` event.
504504
*
505505
* ```typescript
506506
* // pin the selected row from the grid
@@ -513,7 +513,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
513513

514514
/**
515515
* Unpins the specified row.
516-
* This method emits `rowPinning` event.
516+
* This method emits `rowPinning`\`rowPinned` event.
517517
*
518518
* ```typescript
519519
* // unpin the selected row from the grid

0 commit comments

Comments
 (0)