Merge branch 'dmdimitrov/exporters-import'

CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxCsvExporterService`, `IgxExcelExporterService`
     - Exporter services are no longer required to be provided in the application since they are now injected on a root level. 
 
+## 12.2.1
+
+### New Features
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - 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.
+
 ## 12.2.0
 
 ### New Features

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

@@ -54,7 +54,6 @@ import {
     Action,
 } from '../services/public_api';
 import { GridBaseAPIService } from './api.service';
-import { IgxGridCellComponent } from './cell.component';
 import { ISummaryExpression } from './summaries/grid-summary';
 import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
 import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
@@ -941,6 +940,17 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public rowPinning = new EventEmitter<IPinRowEventArgs>();
 
+    /**
+     * Emitted when the pinned state of a row is changed.
+     *
+     * @example
+     * ```html
+     * <igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>
+     * ```
+     */
+    @Output()
+    public rowPinned = new EventEmitter<IPinRowEventArgs>();
+
     /**
      * Emmited when the active node is changed.
      *
@@ -4826,6 +4836,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
             return false;
         }
+
         const eventArgs: IPinRowEventArgs = {
             insertAtIndex: index,
             isPinned: true,
@@ -4840,8 +4851,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
         this.pipeTrigger++;
         if (this.gridAPI.grid) {
-            this.notifyChanges();
+            this.cdr.detectChanges();
+            this.rowPinned.emit(eventArgs);
         }
+
         return true;
     }
 
@@ -4867,12 +4880,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             row
         };
         this.rowPinning.emit(eventArgs);
+
         this.crudService.endEdit(false);
         this._pinnedRecordIDs.splice(index, 1);
         this.pipeTrigger++;
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
+            this.rowPinned.emit(eventArgs);
         }
+
         return true;
     }
 

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

@@ -211,7 +211,7 @@ abstract class BaseRow implements RowType {
      * ```
      */
     public pin(): boolean {
-        return this.grid.pinRow(this.key);
+        return this.grid.pinRow(this.key, this.index);
     }
 
     /**

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

@@ -155,28 +155,51 @@ describe('Row Pinning #grid', () => {
             let row = grid.getRowByIndex(0);
             const rowID = row.key;
             row.pin();
-            fix.detectChanges();
 
             // Check pinned state with getRowByIndex after pin action
             expect(row.pinned).toBe(true);
 
             expect(grid.rowPinning.emit).toHaveBeenCalledTimes(1);
             expect(grid.rowPinning.emit).toHaveBeenCalledWith({
                 rowID,
-                insertAtIndex: undefined,
+                insertAtIndex: 0,
                 isPinned: true,
                 row
             });
 
             row = grid.getRowByIndex(0);
             row.unpin();
-            fix.detectChanges();
             // Check pinned state with getRowByIndex after unpin action
             expect(row.pinned).toBe(false);
 
             expect(grid.rowPinning.emit).toHaveBeenCalledTimes(2);
         });
 
+        it('should emit rowPinned on pin/unpin.', () => {
+            spyOn(grid.rowPinned, 'emit').and.callThrough();
+
+            const row = grid.getRowByIndex(0);
+            const rowID = row.key;
+            row.pin();
+
+            // Check pinned state with getRowByIndex after pin action
+            expect(row.pinned).toBe(true);
+
+            expect(grid.rowPinned.emit).toHaveBeenCalledTimes(1);
+            expect(grid.rowPinned.emit).toHaveBeenCalledWith({
+                rowID,
+                insertAtIndex: 0,
+                isPinned: true,
+                row
+            });
+
+            row.unpin();
+            // Check pinned state with getRowByIndex after unpin action
+            expect(row.pinned).toBe(false);
+
+            expect(grid.rowPinned.emit).toHaveBeenCalledTimes(2);
+        });
+
         it('should pin/unpin via grid API methods.', () => {
             // pin 2nd row
             grid.pinRow(fix.componentInstance.data[1]);
@@ -223,7 +246,6 @@ describe('Row Pinning #grid', () => {
             // unpin
             row = grid.gridAPI.get_row_by_index(0);
             row.unpin();
-            fix.detectChanges();
 
             expect(grid.pinnedRows.length).toBe(0);
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -429,8 +451,7 @@ describe('Row Pinning #grid', () => {
 
         it('should apply sorting to both pinned and unpinned rows.', () => {
             grid.gridAPI.get_row_by_index(1).pin();
-            grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
+            grid.gridAPI.get_row_by_index(6).pin();
 
             expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[1]);
             expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[5]);
@@ -573,7 +594,6 @@ describe('Row Pinning #grid', () => {
         it('should correctly apply paging state for grid and paginator when there are pinned rows.', () => {
             // pin the first row
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
 
             expect(grid.rowList.length).toEqual(6);
             expect(grid.perPage).toEqual(5);
@@ -583,7 +603,6 @@ describe('Row Pinning #grid', () => {
 
             // pin the second row
             grid.gridAPI.get_row_by_index(2).pin();
-            fix.detectChanges();
 
             expect(grid.rowList.length).toEqual(7);
             expect(grid.perPage).toEqual(5);
@@ -594,19 +613,17 @@ describe('Row Pinning #grid', () => {
 
         it('should have the correct records shown for pages with pinned rows', () => {
             grid.gridAPI.get_row_by_index(0).pin();
-            grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
 
             let rows = grid.rowList.toArray();
 
-            [1, 2, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
 
             grid.paginate(2);
             fix.detectChanges();
 
             rows = grid.rowList.toArray();
 
-            [1, 2, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
         });
     });
 
@@ -805,10 +822,8 @@ describe('Row Pinning #grid', () => {
             // Pin/Unpin with the methods
             firstRow.unpin();
             expect(firstRow.pinned).toBe(false);
-            fix.detectChanges();
             firstRow.pin();
             expect(firstRow.pinned).toBe(true);
-            fix.detectChanges();
 
             // Check again pinned row presence
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -855,7 +870,6 @@ describe('Row Pinning #grid', () => {
         it('should hide columns in pinned and unpinned area', () => {
             // pin 2nd data row
             grid.pinRow(fix.componentInstance.data[1]);
-            fix.detectChanges();
             const hiddenCol = grid.columns[1];
             hiddenCol.hidden = true;
             fix.detectChanges();
@@ -892,14 +906,9 @@ describe('Row Pinning #grid', () => {
 
         it('should keep the scrollbar sizes correct when partially filtering out pinned records', () => {
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(7).pin();
-            fix.detectChanges();
-
             fix.detectChanges();
             // 4 records pinned + 2px border
             expect(grid.pinnedRowHeight).toBe(4 * grid.renderedRowHeight + 2);
@@ -929,9 +938,7 @@ describe('Row Pinning #grid', () => {
         it('should enter edit mode for the next editable cell when tabbing.', () => {
             const  gridContent = GridFunctions.getGridContent(fix);
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
 
             const firstEditable = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
             const secondEditable = grid.gridAPI.get_cell_by_index(1, 'CompanyName');
@@ -967,9 +974,7 @@ describe('Row Pinning #grid', () => {
         it('should enter edit mode for the previous editable cell when shift+tabbing.', () => {
             const  gridContent = GridFunctions.getGridContent(fix);
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
 
             const firstEditable = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
             const secondEditable = grid.gridAPI.get_cell_by_index(1, 'CompanyName');
@@ -1017,7 +1022,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate to bottom from top pinned row using Ctrl+ArrowDown', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             const firstRowCell = grid.gridAPI.get_row_by_index(0).cells.toArray()[1];
             UIInteractions.simulateClickAndSelectEvent(firstRowCell);
@@ -1039,7 +1043,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate and scroll to first unpinned row from top pinned row using ArrowDown', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(10);
             await wait(DEBOUNCE_TIME);
@@ -1064,7 +1067,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate to top pinned row from bottom unpinned row without scrolling using Ctrl+ArrowUp', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(27);
             await wait(DEBOUNCE_TIME);
@@ -1095,7 +1097,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate to top pinned row from first unpinned row using ArrowUp', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
 
             const thirdRowCell = grid.gridAPI.get_row_by_index(2).cells.toArray()[1];
             UIInteractions.simulateClickAndSelectEvent(thirdRowCell);
@@ -1118,7 +1119,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate and scroll to top from bottom pinned row using Ctrl+ArrowUp', async () => {
             fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(26);
             await wait(DEBOUNCE_TIME);
@@ -1171,7 +1171,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate to bottom pinned row from top unpinned row without scrolling using Ctrl+ArrowDown', async () => {
             fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             expect(grid.verticalScrollContainer.getScroll().scrollTop).toEqual(0);
 
@@ -1199,7 +1198,6 @@ describe('Row Pinning #grid', () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
             await wait(DEBOUNCE_TIME);
-            fix.detectChanges();
 
             grid.navigateTo(26);
             await wait(DEBOUNCE_TIME);
@@ -1228,8 +1226,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate down from pinned to unpinned row when there are filtered out pinned rows', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
-
             grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('contains'), false);
             fix.detectChanges();
 

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

@@ -866,15 +866,12 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
         it('should pin rows to top ', (() => {
             hierarchicalGrid.pinRow('0');
-            fixture.detectChanges();
             expect(hierarchicalGrid.pinnedRows.length).toBe(1);
 
             hierarchicalGrid.unpinRow('0');
-            fixture.detectChanges();
             expect(hierarchicalGrid.pinnedRows.length).toBe(0);
 
             hierarchicalGrid.pinRow('0');
-            fixture.detectChanges();
             expect(hierarchicalGrid.pinnedRows.length).toBe(1);
 
             let pinRowContainer = fixture.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -888,7 +885,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             expect(hierarchicalGrid.getRowByIndex(3).key).toBe('2');
 
             hierarchicalGrid.pinRow('2');
-            fixture.detectChanges();
 
             pinRowContainer = fixture.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
             expect(pinRowContainer[0].children.length).toBe(2);
@@ -1107,7 +1103,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             const paginator = fixture.debugElement.query(By.directive(IgxPaginatorComponent)).componentInstance;
             // pin the first row
             hierarchicalGrid.getRowByIndex(0).pin();
-            fixture.detectChanges();
 
             expect(hierarchicalGrid.rowList.length).toEqual(6);
             expect(hierarchicalGrid.perPage).toEqual(5);
@@ -1117,7 +1112,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
             // pin the second row
             hierarchicalGrid.getRowByIndex(2).pin();
-            fixture.detectChanges();
 
             expect(hierarchicalGrid.rowList.length).toEqual(7);
             expect(hierarchicalGrid.perPage).toEqual(5);
@@ -1148,19 +1142,17 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             hierarchicalGrid.height = '700px';
             fixture.detectChanges();
             hierarchicalGrid.getRowByIndex(0).pin();
-            hierarchicalGrid.getRowByIndex(1).pin();
-            fixture.detectChanges();
 
             let rows = hierarchicalGrid.rowList.toArray();
 
-            [0, 1, 0, 1, 2, 3, 4].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
+            [0, 0, 1, 2, 3, 4, 5].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
 
             hierarchicalGrid.paginate(6);
             fixture.detectChanges();
 
             rows = hierarchicalGrid.rowList.toArray();
 
-            [0, 1, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
+            [0, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
         });
     });
 });

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

@@ -500,7 +500,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
 
     /**
      * Pins the specified row.
-     * This method emits `rowPinning` event.
+     * This method emits `rowPinning`\`rowPinned` event.
      *
      * ```typescript
      * // pin the selected row from the grid
@@ -513,7 +513,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
 
     /**
      * Unpins the specified row.
-     * This method emits `rowPinning` event.
+     * This method emits `rowPinning`\`rowPinned` event.
      *
      * ```typescript
      * // unpin the selected row from the grid