chore(grid): update row selection renamed event

en/components/grids_templates/row-selection.md

@@ -71,14 +71,14 @@ In the [`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) by
 
 ### Single Selection
 
-Single row selection can now be easily set up, the only thing you need to do, is to set `[rowSelection] = '"single"'` property. This gives you the opportunity to **select only one row within a grid**. You can select a row by clicking on a cell or pressing the *space* key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected **rowSelected** event is emitted.
+Single row selection can now be easily set up, the only thing you need to do, is to set `[rowSelection] = '"single"'` property. This gives you the opportunity to **select only one row within a grid**. You can select a row by clicking on a cell or pressing the *space* key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected **rowSelectionChanging** event is emitted.
 
 @@if (igxName === 'IgxGrid') {
 ```html
 <!-- selectionExample.component.html -->
 
 <igx-grid [data]="remote | async" [rowSelection]="'single'" [autoGenerate]="true"
-          (rowSelected)="handleRowSelection($event)" [allowFiltering]="true">
+          (rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true">
 </igx-grid>
 ```
 ```typescript
@@ -96,7 +96,7 @@ public handleRowSelection(args) {
 <!-- selectionExample.component.html -->
 
 <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true"
-            [rowSelection]="'single'" [allowFiltering]="true" (rowSelected)="handleRowSelection($event)">
+            [rowSelection]="'single'" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-tree-grid>
 ```
 ```typescript
@@ -112,7 +112,7 @@ public handleRowSelection(event) {
 @@if (igxName === 'IgxHierarchicalGrid') {
 ```html
 <igx-hierarchical-grid [data]="localdata" [autoGenerate]="true"
-        [rowSelection]="'single'" (rowSelected)="handleRowSelection($event)">
+        [rowSelection]="'single'" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-hierarchical-grid>
 ```
 ```typescript
@@ -135,7 +135,7 @@ To enable multiple row selection in the [`@@igSelector`]({environment:angularApi
 <!-- selectionExample.component.html -->
 
 <igx-grid [data]="remote | async" [primaryKey]="'ProductID'" [rowSelection]="'multiple'"
-        (rowSelected)="handleRowSelection($event)" [allowFiltering]="true" [autoGenerate]="true">
+        (rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true" [autoGenerate]="true">
 </igx-grid>
 ```
 
@@ -145,15 +145,15 @@ To enable multiple row selection in the [`@@igSelector`]({environment:angularApi
 <!-- selectionExample.component.html -->
 
 <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [rowSelection]="'multiple'"
-        [allowFiltering]="true" (rowSelected)="handleRowSelection($event)" >
+        [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)" >
 </igx-tree-grid>
 ```
 
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
 ```html
 <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="true"
-        [rowSelection]="'multiple'" (rowSelected)="handleRowSelection($event)">
+        [rowSelection]="'multiple'" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-hierarchical-grid>
 ```
 }
@@ -164,7 +164,7 @@ To enable cascade row selection in the [`@@igSelector`]({environment:angularApiU
 <!-- selectionExample.component.html -->
 
 <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true"
-        [rowSelection]="'multipleCascade'" [allowFiltering]="true" (rowSelected)="handleRowSelection($event)">
+        [rowSelection]="'multipleCascade'" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-tree-grid>
 ```
 In this mode a parent's selection state entirely depends on the selection state of its children. When a parent has some selected and some deselected children, its checkbox is in an indeterminate state.
@@ -177,7 +177,7 @@ In this mode a parent's selection state entirely depends on the selection state
 @@if (igxName !== 'IgxTreeGrid') {
 * When the @@igComponent has remote virtualization, then clicking the header checkbox will select/deselect all records that are currently in the grid. When new data is loaded in the @@igComponent on demand, newly added rows will not be selected and it is a limitation, so you should handle that behavior by yourself and you can select these rows by using the provided API methods.
 }
-* Row selection will trigger [`rowSelected`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelected) event. This event gives you information about the *new selection*, *old selection*, the rows that have been *added* and *removed* from the old selection. Also the event is *cancellable*, so this allows you to prevent selection.
+* Row selection will trigger [`rowSelectionChanging`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelectionChanging) event. This event gives you information about the *new selection*, *old selection*, the rows that have been *added* and *removed* from the old selection. Also the event is *cancellable*, so this allows you to prevent selection.
 * When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set `[hideRowSelectors] = true`.
 * When you switch between row selection modes at runtime, this will clear the previous row selection state.
 
@@ -227,7 +227,7 @@ If you need to deselect rows programmatically, you can use the `deselectRows(row
 ```
 
 ### Row selection event
-When there is some change in the row selection **`rowSelected`** event is emitted. **`rowSelected`** exposes the following arguments:
+When there is some change in the row selection **`rowSelectionChanging`** event is emitted. **`rowSelectionChanging`** exposes the following arguments:
 - `oldSelection`  - array of row IDs that contains the previous state of the row selection.
 - `newSelection` - array of row IDs that match the new state of the row selection.
 - `added` - array of row IDs that are currently added to the selection.
@@ -241,7 +241,7 @@ When there is some change in the row selection **`rowSelected`** event is emitte
 ```html
 <!-- selectionExample.component.html -->
 
-<@@igSelector (rowSelected)="handleRowSelectionChange($event)">
+<@@igSelector (rowSelectionChanging)="handleRowSelectionChange($event)">
 ...
 </@@igSelector>
 ```
@@ -319,7 +319,7 @@ public childSelectedRows = ['Initiation', 'Emergency'];
 ### Row selector templates
 You can template header and row selectors in the @@igComponent and also access their contexts which provide useful functionality for different scenarios.
 
-By default, the @@igComponent **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [`rowSelected` event](#row-selection-event). In case you implement a custom template with a `click` handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state.
+By default, the @@igComponent **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [`rowSelectionChanging` event](#row-selection-event). In case you implement a custom template with a `click` handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state.
 
 #### Row template
 To create a custom row selector template,  within the `@@igSelector`, declare an `<ng-template>` with `igxRowSelector` directive. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state.
@@ -458,7 +458,7 @@ This demo uses custom templates to resemble Excel-like header and row selectors.
 }
 
 ### Conditional Selection Demo
-This demo prevents some rows from being selected using the `rowSelected` event and a custom template with disabled checkbox for non-selectable rows.
+This demo prevents some rows from being selected using the `rowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows.
 @@if (igxName === 'IgxGrid') {
 
 <code-view style="height:550px" 

jp/components/grids_templates/row-selection.md

@@ -72,14 +72,14 @@ Ignite UI for Angular の行選択では、行内の他のすべての列に先
 
 ### 単一選択
 
-単一行の選択は、`[rowSelection] = '"single"'` プロパティの設定のみで簡単に設定できるようになりました。これにより、**グリッド内の 1 行のみを選択できます**。行のセルにフォーカスするときにセルをクリックするかスペースキーを押すと行を選択できます。もちろん、行セレクターフィールドをクリックして行を選択できます。行が選択または選択解除されると、**rowSelected** イベントが生成されます。
+単一行の選択は、`[rowSelection] = '"single"'` プロパティの設定のみで簡単に設定できるようになりました。これにより、**グリッド内の 1 行のみを選択できます**。行のセルにフォーカスするときにセルをクリックするかスペースキーを押すと行を選択できます。もちろん、行セレクターフィールドをクリックして行を選択できます。行が選択または選択解除されると、**rowSelectionChanging** イベントが生成されます。
 
 @@if (igxName === 'IgxGrid') {
 ```html
 <!-- selectionExample.component.html -->
 
 <igx-grid [data]="remote | async" [rowSelection]="'single'" [autoGenerate]="true"
-          (rowSelected)="handleRowSelection($event)" [allowFiltering]="true">
+          (rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true">
 </igx-grid>
 ```
 ```typescript
@@ -97,7 +97,7 @@ public handleRowSelection(args) {
 <!-- selectionExample.component.html -->
 
 <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true"
-            [rowSelection]="'single'" [allowFiltering]="true" (rowSelected)="handleRowSelection($event)">
+            [rowSelection]="'single'" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-tree-grid>
 ```
 ```typescript
@@ -112,7 +112,7 @@ public handleRowSelection(event) {
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
 ```html
-<igx-hierarchical-grid [data]="localdata" [autoGenerate]="true" [rowSelection]="'single'" (rowSelected)="handleRowSelection($event)">
+<igx-hierarchical-grid [data]="localdata" [autoGenerate]="true" [rowSelection]="'single'" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-hierarchical-grid>
 ```
 ```typescript
@@ -135,7 +135,7 @@ public handleRowSelection(event) {
 <!-- selectionExample.component.html -->
 
 <igx-grid [data]="remote | async" [primaryKey]="'ProductID'" [rowSelection]="'multiple'"
-        [autoGenerate]="true" (rowSelected)="handleRowSelection($event)" [allowFiltering]="true">
+        [autoGenerate]="true" (rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true">
 </igx-grid>
 ```
 
@@ -145,15 +145,15 @@ public handleRowSelection(event) {
 <!-- selectionExample.component.html -->
 
 <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true"
-        [rowSelection]="'multiple'" [allowFiltering]="true" (rowSelected)="handleRowSelection($event)">
+        [rowSelection]="'multiple'" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-tree-grid>
 ```
 
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
 ```html
 <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="true"
-        [rowSelection]="'multiple'" (rowSelected)="handleRowSelection($event)">
+        [rowSelection]="'multiple'" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-hierarchical-grid>
 ```
 }
@@ -164,7 +164,7 @@ public handleRowSelection(event) {
 <!-- selectionExample.component.html -->
 
 <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [rowSelection]="'multipleCascade'"
-        [autoGenerate]="true" [allowFiltering]="true" (rowSelected)="handleRowSelection($event)">
+        [autoGenerate]="true" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
 </igx-tree-grid>
 ```
 このモードでは、親の選択状態はその子の選択状態に完全に依存します。親に選択された子と選択解除された子がある場合、そのチェックボックスは不確定な状態になります。
@@ -177,7 +177,7 @@ public handleRowSelection(event) {
 @@if (igxName !== 'IgxTreeGrid') {
 * @@igComponent でリモート仮想化を使用した場合、ヘッダーのチェックボックスをクリックすると、現在グリッドにあるすべてのレコードが選択/選択解除されます。新しいデータがオンデマンドで @@igComponent にロードされると、新、しく追加された行は選択されない制限があるため、これらの行を選択するには API メソッドを使用して動作を処理する必要があります。
 }
-* 行を選択すると、[`rowSelected`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelected) イベントがトリガーされます。このイベントは、新しい選択、古い選択、古い選択に対して追加および削除された行に関する情報を提供します。また、イベントはキャンセル可能であるため、選択を防ぐことができます。
+* 行を選択すると、[`rowSelectionChanging`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelectionChanging) イベントがトリガーされます。このイベントは、新しい選択、古い選択、古い選択に対して追加および削除された行に関する情報を提供します。また、イベントはキャンセル可能であるため、選択を防ぐことができます。
 * 行選択が有効になっている場合、行セレクターが表示されますが、表示しない場合は、`[hideRowSelectors] = true` に設定できます。
 * 行選択モードのランタイムを切り替えると、優先行選択状態がクリアされます。
 
@@ -227,7 +227,7 @@ public handleRowSelection(event) {
 ```
 
 ### 行選択イベント
-行選択に何らかの変更があると、**`rowSelected`** イベントが発生します。 **`rowSelected`** は次の引数を公開します。
+行選択に何らかの変更があると、**`rowSelectionChanging`** イベントが発生します。 **`rowSelectionChanging`** は次の引数を公開します。
 - `oldSelection` - 行選択の前の状態を含む行 ID の配列。
 - `newSelection` - 行選択の新しい状態に一致する行 ID の列。
 - `added` - 現在選択に追加されている行 ID の配列。
@@ -241,7 +241,7 @@ public handleRowSelection(event) {
 ```html
 <!-- selectionExample.component.html -->
 
-<@@igSelector (rowSelected)="handleRowSelectionChange($event)">
+<@@igSelector (rowSelectionChanging)="handleRowSelectionChange($event)">
 ...
 </@@igSelector>
 ```
@@ -319,7 +319,7 @@ public childSelectedRows = ['Initiation', 'Emergency'];
 ### 行セレクター テンプレート
 @@igComponent でヘッダーおよび行セレクターをテンプレート化し、さまざまなシナリオに役立つ機能を提供するコンテキストにアクセスすることもできます。
 
-デフォルトでは、@@igComponent は、行セレクターの親コンテナまたは行自体の**すべての行選択操作を処理**し、テンプレートの状態の可視化のみになります。基本機能のオーバーライドは通常、[`rowSelected` イベント](#行選択イベント) を使用して実行する必要があります。基本機能をオーバーライドする `click` ハンドラーを使用してカスタムテンプレートを実装する場合、イベントの伝播を停止して、正しい行の状態を保持する必要があります。
+デフォルトでは、@@igComponent は、行セレクターの親コンテナまたは行自体の**すべての行選択操作を処理**し、テンプレートの状態の可視化のみになります。基本機能のオーバーライドは通常、[`rowSelectionChanging` イベント](#行選択イベント) を使用して実行する必要があります。基本機能をオーバーライドする `click` ハンドラーを使用してカスタムテンプレートを実装する場合、イベントの伝播を停止して、正しい行の状態を保持する必要があります。
 
 #### 行テンプレート
 カスタム行セレクター テンプレートを作成するには、`@@igSelector` 内で` igxRowSelector` ディレクティブを使用して `<ng-template>` を宣言します。テンプレートから、行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。
@@ -458,7 +458,7 @@ public childSelectedRows = ['Initiation', 'Emergency'];
 }
 
 ### 条件付き選択のデモ
-このデモでは、`rowSelected` イベントと、選択できない行のチェックボックスが無効になっているカスタム テンプレートを使用して、一部の行が選択されないようにします。
+このデモでは、`rowSelectionChanging` イベントと、選択できない行のチェックボックスが無効になっているカスタム テンプレートを使用して、一部の行が選択されないようにします。
 @@if (igxName === 'IgxGrid') {
 
 <code-view style="height:550px" 

kr/components/grids_templates/selection.md

@@ -354,7 +354,7 @@ public selection = true;
 **참고:** @@igComponent에 원격 가상화가 설정된 경우, 헤더 체크 박스를 클릭하면 모든 레코드가 선택/선택 취소됩니다. 그러나, 헤더 체크 박스를 통해 모든 레코드가 선택된 후 가시적인 행이 선택 해제된 경우, 필요에 따라 새로운 데이터가 @@igComponent에 로딩되면 새롭게 로드된 행이 선택되지 않는 제한이 있습니다.
 }
 
-**참고:** 셀 선택은 [`rowSelected`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelected)가 아닌 [`selected`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selected)이 트리거됩니다.
+**참고:** 셀 선택은 [`rowSelectionChanging`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelectionChanging)가 아닌 [`selected`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selected)이 트리거됩니다.
 
 ### 코드 조각
 
@@ -391,7 +391,7 @@ public selection = true;
 ```html
 <!-- selectionExample.component.html -->
 
-<@@igSelector (rowSelected)="handleRowSelectionChange($event)">
+<@@igSelector (rowSelectionChanging)="handleRowSelectionChange($event)">
 ...
 </@@igSelector>
 ```