refactor(grid): rename columnSelected to columnSelectionChanging (#10505)

Author: damyanpetev

CHANGELOG.md

@@ -73,7 +73,8 @@ 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
+    - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function.
+    - **Breaking Change** - The `columnSelected` event is renamed to `columnSelectionChanging` 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`

projects/igniteui-angular/migrations/update-13_0_0/changes/members.json

@@ -31,6 +31,16 @@
                 "IgxHierarchicalGridComponent",
                 "IgxRowIslandComponent"
             ]
+        },
+        {
+            "member": "columnSelected",
+            "replaceWith": "columnSelectionChanging",
+            "definedIn": [
+                "IgxGridComponent",
+                "IgxTreeGridComponent",
+                "IgxHierarchicalGridComponent",
+                "IgxRowIslandComponent"
+            ]
         }
     ]
 }

projects/igniteui-angular/migrations/update-13_0_0/changes/outputs.json

@@ -32,6 +32,38 @@
                 "selector": "igx-row-island",
                 "type": "component"
             }
+        },
+        {
+            "name": "columnSelected",
+            "replaceWith": "columnSelectionChanging",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "columnSelected",
+            "replaceWith": "columnSelectionChanging",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "columnSelected",
+            "replaceWith": "columnSelectionChanging",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "columnSelected",
+            "replaceWith": "columnSelectionChanging",
+            "owner": {
+                "selector": "igx-row-island",
+                "type": "component"
+            }
         }
     ]
 }

projects/igniteui-angular/src/lib/grids/README.md

@@ -229,7 +229,7 @@ A list of the events emitted by the **igx-grid**:
 |`columnMovingStart`|Emitted when a column moving starts. Returns the moved column object.|
 |`selected`|Emitted when a cell is selected. Returns the cell object.|
 |`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|
+|`columnSelectionChanging`|Emitted when a column selection is changing. 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.|
 |`filteringDone`|Emitted when filtering is performed through the UI. Returns the filtering expressions tree of the column for which the filtering was performed.|

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -91,11 +91,11 @@ export interface IRowSelectionEventArgs extends CancelableEventArgs, IBaseEventA
 }
 
 export interface IColumnSelectionEventArgs extends CancelableEventArgs, IBaseEventArgs {
-    oldSelection: string[];
+    readonly oldSelection: string[];
     newSelection: string[];
-    added: string[];
-    removed: string[];
-    event?: Event;
+    readonly added: string[];
+    readonly removed: string[];
+    readonly event?: Event;
 }
 
 export interface ISearchInfo {

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

@@ -476,11 +476,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      *
      * @example
      * ```html
-     * <igx-grid #grid (columnSelected)="columnSelected($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
+     * <igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @Output()
-    public columnSelected = new EventEmitter<IColumnSelectionEventArgs>();
+    public columnSelectionChanging = new EventEmitter<IColumnSelectionEventArgs>();
 
     /**
      * Emitted before `IgxColumnComponent` is pinned.