refactor(grid): rename rowSelected to rowSelectionChanging

damyanpetev · damyanpetev · commit 3fba870e2eec · 2021-11-12T17:31:04.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -73,6 +73,7 @@ All notable changes for each version of this project will be documented in this
         - Inputs  `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`,
         `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`.
         Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead.
+    - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function
 - `igxGrid`
     - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. Please, refer to the [Group By ](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby) topic for more information.
 - `IgxColumnActionsComponent`
diff --git a/projects/igniteui-angular/migrations/update-13_0_0/changes/members.json b/projects/igniteui-angular/migrations/update-13_0_0/changes/members.json
@@ -21,6 +21,16 @@
             "definedIn": [
                 "IgxComboBaseDirective"
             ]
+        },
+        {
+            "member": "rowSelected",
+            "replaceWith": "rowSelectionChanging",
+            "definedIn": [
+                "IgxGridComponent",
+                "IgxTreeGridComponent",
+                "IgxHierarchicalGridComponent",
+                "IgxRowIslandComponent"
+            ]
         }
     ]
 }
diff --git a/projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json b/projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json
@@ -0,0 +1,37 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "rowSelected",
+            "replaceWith": "rowSelectionChanging",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "rowSelected",
+            "replaceWith": "rowSelectionChanging",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "rowSelected",
+            "replaceWith": "rowSelectionChanging",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "rowSelected",
+            "replaceWith": "rowSelectionChanging",
+            "owner": {
+                "selector": "igx-row-island",
+                "type": "component"
+            }
+        }
+    ]
+}
diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md
@@ -228,7 +228,7 @@ A list of the events emitted by the **igx-grid**:
 |`columnMovingEnd`|Emitted when a column moving ends. Returns the source and target columns objects. This event is cancelable.|
 |`columnMovingStart`|Emitted when a column moving starts. Returns the moved column object.|
 |`selected`|Emitted when a cell is selected. Returns the cell object.|
-|`rowSelected`|Emitted when a row selection has changed. Returns array with old and new selected rows' IDs and the target row, if available.|
+|`rowSelectionChanging`|Emitted when row selection is changing. Returns array with old and new selected rows' IDs and the target row, if available.|
 |`columnSelected`|Emitted when a column selection has changed. Returns array with old and new selected column' fields|
 |`columnInit`|Emitted when the grid columns are initialized. Returns the column object.|
 |`sortingDone`|Emitted when sorting is performed through the UI. Returns the sorting expression.|
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -465,11 +465,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      *
      * @example
      * ```html
-     * <igx-grid #grid (rowSelected)="onCellClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
+     * <igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @Output()
-    public rowSelected = new EventEmitter<IRowSelectionEventArgs>();
+    public rowSelectionChanging = new EventEmitter<IRowSelectionEventArgs>();
 
     /**
      *  Emitted when `IgxColumnComponent` is selected.
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
@@ -1173,7 +1173,7 @@ describe('IgxGrid - GroupBy #grid', () => {
             tick();
             fix.detectChanges();
 
-            const selectionSpy = spyOn(grid.rowSelected, 'emit');
+            const selectionSpy = spyOn(grid.rowSelectionChanging, 'emit');
             GridFunctions.simulateGridContentKeydown(fix, 'Space');
             fix.detectChanges();
 
@@ -1263,7 +1263,7 @@ describe('IgxGrid - GroupBy #grid', () => {
             tick();
             fix.detectChanges();
 
-            const selectionSpy = spyOn(grid.rowSelected, 'emit');
+            const selectionSpy = spyOn(grid.rowSelectionChanging, 'emit');
             GridFunctions.simulateGridContentKeydown(fix, 'Space');
             fix.detectChanges();
 
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts
@@ -70,15 +70,15 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
      *
      * ```typescript
      * handleRowSelection(event) {
-     *  // the grid on which the rowSelected event was triggered
+     *  // the grid on which the rowSelectionChanging event was triggered
      *  const grid = event.row.grid;
      * }
      * ```
      *
      * ```html
      *  <igx-grid
      *    [data]="data"
-     *    (rowSelected)="handleRowSelection($event)">
+     *    (rowSelectionChanging)="handleRowSelection($event)">
      *  </igx-grid>
      * ```
      */
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.selection.spec.ts
@@ -627,14 +627,14 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             }
         });
 
-        it('should have fire event rowSelected', () => {
+        it('should have fire event rowSelectionChanging', () => {
             hierarchicalGrid.expandChildren = true;
             fix.detectChanges();
             const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
             const secondChildGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[1];
-            const parentSpy = spyOn<any>(hierarchicalGrid.rowSelected, 'emit').and.callThrough();
-            const childSpy = spyOn<any>(childGrid.rowSelected, 'emit').and.callThrough();
-            const secondChildSpy = spyOn<any>(secondChildGrid.rowSelected, 'emit').and.callThrough();
+            const parentSpy = spyOn<any>(hierarchicalGrid.rowSelectionChanging, 'emit').and.callThrough();
+            const childSpy = spyOn<any>(childGrid.rowSelectionChanging, 'emit').and.callThrough();
+            const secondChildSpy = spyOn<any>(secondChildGrid.rowSelectionChanging, 'emit').and.callThrough();
             const mockEvent = new MouseEvent('click');
 
             // Click on a row in child grid
diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts
@@ -336,15 +336,15 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
      *
      * ```typescript
      * handleRowSelection(event) {
-     *  // the grid on which the rowSelected event was triggered
+     *  // the grid on which the rowSelectionChanging event was triggered
      *  const grid = event.row.grid;
      * }
      * ```
      *
      * ```html
      *  <igx-grid
      *    [data]="data"
-     *    (rowSelected)="handleRowSelection($event)">
+     *    (rowSelectionChanging)="handleRowSelection($event)">
      *  </igx-grid>
      * ```
      */
diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts
@@ -578,7 +578,7 @@ export class IgxGridSelectionService {
             oldSelection: currSelection, newSelection,
             added, removed, event, cancel: false
         };
-        this.grid.rowSelected.emit(args);
+        this.grid.rowSelectionChanging.emit(args);
         if (args.cancel) {
             return;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service.ts
@@ -124,7 +124,7 @@ export class IgxTreeGridSelectionService extends IgxGridSelectionService {
         // retrieve rows/parents/children which has been added/removed from the selection
         this.handleAddedAndRemovedArgs(args);
 
-        this.grid.rowSelected.emit(args);
+        this.grid.rowSelectionChanging.emit(args);
 
         if (args.cancel) {
             return;
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts
@@ -331,7 +331,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         });
 
         it('Header checkbox should NOT select/deselect all rows when selectionMode is single', () => {
-            spyOn(treeGrid.rowSelected, 'emit').and.callThrough();
+            spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough();
             treeGrid.rowSelection = GridSelectionMode.single;
             fix.detectChanges();
 
@@ -341,15 +341,15 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false);
             TreeGridFunctions.verifyDataRowsSelection(fix, [], false);
             expect(treeGrid.selectedRows).toEqual([]);
-            expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0);
+            expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0);
 
             TreeGridFunctions.clickHeaderRowSelectionCheckbox(fix);
             fix.detectChanges();
 
             TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false);
             TreeGridFunctions.verifyDataRowsSelection(fix, [], false);
             expect(treeGrid.selectedRows).toEqual([]);
-            expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0);
+            expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0);
         });
 
         it('should be able to select row of any level', () => {
@@ -1602,13 +1602,13 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 6, true, true);
         }));
 
-        it(`Setting true to the cancel property of the rowSelected event should not modify the selected rows collection`, () => {
+        it(`Setting true to the cancel property of the rowSelectionChanging event should not modify the selected rows collection`, () => {
 
-            treeGrid.rowSelected.subscribe((e: IRowSelectionEventArgs) => {
+            treeGrid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => {
                 e.cancel = true;
             });
 
-            spyOn(treeGrid.rowSelected, 'emit').and.callThrough();
+            spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough();
 
             treeGrid.selectionService.selectRowsWithNoEvent([317]);
             fix.detectChanges();
@@ -1625,7 +1625,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
                 cancel: true
             };
 
-            expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(args);
+            expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
             fix.detectChanges();
             expect(getVisibleSelectedRows(fix).length).toBe(4);
@@ -1685,11 +1685,11 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         });
 
         it('selectRowById event SHOULD be emitted correctly with valid arguments.', () => {
-            spyOn(treeGrid.rowSelected, 'emit').and.callThrough();
+            spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough();
             treeGrid.selectionService.selectRowsWithNoEvent([317]);
             fix.detectChanges();
 
-            expect(treeGrid.rowSelected.emit).toHaveBeenCalledTimes(0);
+            expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledTimes(0);
             expect(getVisibleSelectedRows(fix).length).toBe(4);
             TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null);
             TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true);
@@ -1709,7 +1709,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
                 cancel: false
             };
 
-            expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(args);
+            expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
             treeGrid.cdr.detectChanges();
 
@@ -1725,10 +1725,10 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         });
 
         it('After changing the newSelection arguments of onSelectedRowChange, the arguments SHOULD be correct.', () => {
-            treeGrid.rowSelected.subscribe((e: IRowSelectionEventArgs) => {
+            treeGrid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => {
                 e.newSelection = [847, 663];
             });
-            spyOn(treeGrid.rowSelected, 'emit').and.callThrough();
+            spyOn(treeGrid.rowSelectionChanging, 'emit').and.callThrough();
 
             treeGrid.selectionService.selectRowsWithNoEvent([317], true);
             fix.detectChanges();
@@ -1744,7 +1744,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
                 cancel: false
             };
 
-            expect(treeGrid.rowSelected.emit).toHaveBeenCalledWith(selectionArgs);
+            expect(treeGrid.rowSelectionChanging.emit).toHaveBeenCalledWith(selectionArgs);
 
             treeGrid.cdr.detectChanges();
 
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-interfaces.spec.ts
@@ -41,9 +41,9 @@ export interface IEditDone {
     editDone(event): void;
 }
 
-/* Add to template: ` (rowSelected)="rowSelectionChange($event)"` */
+/* Add to template: ` (rowSelectionChanging)="rowSelectionChange($event)"` */
 export interface IGridRowSelectionChange {
-    rowSelected(event): void;
+    rowSelectionChanging(event): void;
 }
 
 /* Add to template: ` (columnResized)="columnResized($event)"` */
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -237,13 +237,13 @@ export class RowSelectionWithoutPrimaryKeyComponent extends BasicGridComponent {
 @Component({
     template: GridTemplateStrings.declareGrid(
         ` rowSelection = "multiple"`,
-        EventSubscriptions.rowSelected,
+        EventSubscriptions.rowSelectionChanging,
         ColumnDefinitions.productBasic)
 })
 export class SelectionCancellableComponent extends BasicGridComponent {
     public data = SampleTestData.foodProductData();
 
-    public rowSelected(evt) {
+    public rowSelectionChanging(evt) {
         if (evt.added.length > 0 && (evt.added[0].ProductID) % 2 === 0) {
             evt.newSelection = evt.oldSelection || [];
         }
diff --git a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
@@ -524,7 +524,7 @@ export class EventSubscriptions {
 
     public static onEditDone = ` (cellEdit)="editDone($event)"`;
 
-    public static rowSelected = ` (rowSelected)="rowSelected($event)"`;
+    public static rowSelectionChanging = ` (rowSelectionChanging)="rowSelectionChanging($event)"`;
 
     public static columnResized = ` (columnResized)="columnResized($event)"`;
 
diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html
@@ -69,7 +69,7 @@
 <div class="wrapper">
     <h3>Selection Performance</h3>
     <igx-grid [data]="data2" [allowFiltering]="true" cellSelection="none" width="1200px"
-    height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr" (rowSelected)="rowSelectionChanged($event)">
+    height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr" (rowSelectionChanging)="rowSelectionChanged($event)">
         <igx-column field="STATUS" header="Status" width="200px" [groupable]="true" [sortable]="true">
         </igx-column>
         <igx-column field="FIELD" header="Field" width="200px" [groupable]="true" [sortable]="true">
diff --git a/src/app/grid-selection/grid-selection.sample.html b/src/app/grid-selection/grid-selection.sample.html
@@ -17,7 +17,7 @@
     </div>
 
     <igx-grid #grid1 [data]="remote | async" [allowFiltering]="true" [primaryKey]="'ProductID'" (selected)="handleRowSelection()"
-            [width]="'800px'" [height]="'600px'"  (rowSelected)="log($event)">
+            [width]="'800px'" [height]="'600px'"  (rowSelectionChanging)="log($event)">
         <igx-column [field]="'ProductID'" [editable]="true" [width]="'80%'"></igx-column>
         <igx-column [field]="'ProductName'"></igx-column>
         <igx-column [field]="'UnitsInStock'"></igx-column>
diff --git a/src/app/grid-updates-test/grid-updates.component.html b/src/app/grid-updates-test/grid-updates.component.html
@@ -2,13 +2,13 @@
 <button (click)="stop()">Stop</button>
 
 <igx-grid
-    displayDensity="compact" 
+    displayDensity="compact"
     width="800px" height = "400px"
     [data]="data"
     [allowFiltering]="true"
     primaryKey = "id"
     filterMode="excelStyleFilter"
-    (rowSelected)="handleRowSelectionChange($event)"
+    (rowSelectionChanging)="handleRowSelectionChange($event)"
     rowSelection="single"
     #grid>
     <igx-column *ngFor="let each of nestedConfigColumns"
diff --git a/src/app/splitter/splitter.sample.html b/src/app/splitter/splitter.sample.html
@@ -43,7 +43,7 @@
 <div>Sample with Grids</div>
 <igx-splitter [type]="type" style='height: 60vh;'>
     <igx-splitter-pane minSize="100">
-        <igx-grid #grid1 class="grid" displayDensity="cosy" [rowSelection]="'single'" (rowSelected)="onCustomerSelection($event)"
+        <igx-grid #grid1 class="grid" displayDensity="cosy" [rowSelection]="'single'" (rowSelectionChanging)="onCustomerSelection($event)"
         [data]="data1" [isLoading]="true" [primaryKey]="'CustomerID'" [autoGenerate]="false">
             <igx-column field="CustomerID" [hidden]='true'></igx-column>
             <igx-column field="CompanyName"></igx-column>
@@ -53,7 +53,7 @@
         </igx-grid>
     </igx-splitter-pane>
     <igx-splitter-pane>
-        <igx-grid #grid2 class="grid" [rowSelection]="'single'" (rowSelected)="onOrderSelection($event)"  displayDensity="cosy" [data]="data2" [isLoading]="true" [primaryKey]="'OrderID'" [autoGenerate]="false">
+        <igx-grid #grid2 class="grid" [rowSelection]="'single'" (rowSelectionChanging)="onOrderSelection($event)"  displayDensity="cosy" [data]="data2" [isLoading]="true" [primaryKey]="'OrderID'" [autoGenerate]="false">
             <igx-column field="OrderID" [hidden]='true'></igx-column>
             <igx-column field="OrderDate"></igx-column>
             <igx-column field="ShipCountry"></igx-column>

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,16 @@`
`21`	`21`	`"definedIn": [`
`22`	`22`	`"IgxComboBaseDirective"`
`23`	`23`	`]`
	`24`	`+ },`
	`25`	`+ {`
	`26`	`+ "member": "rowSelected",`
	`27`	`+ "replaceWith": "rowSelectionChanging",`
	`28`	`+ "definedIn": [`
	`29`	`+ "IgxGridComponent",`
	`30`	`+ "IgxTreeGridComponent",`
	`31`	`+ "IgxHierarchicalGridComponent",`
	`32`	`+ "IgxRowIslandComponent"`
	`33`	`+ ]`
`24`	`34`	`}`
`25`	`35`	`]`
`26`	`36`	`}`