[add] docs for actions: deprecate events, add docs for migration article, update Actions overview

Author: Victory

docs/api/api_overview.md

@@ -59,6 +59,7 @@ Parameters:
 
 | Name                                            | Description                                            |
 | :---------------------------------------------- | :----------------------------------------------------- |
+| [](api/spreadsheet_afteraction_event.md)        | @getshort(api/spreadsheet_afteraction_event.md)        |
 | [](api/spreadsheet_afterclear_event.md)         | @getshort(api/spreadsheet_afterclear_event.md)         |
 | [](api/spreadsheet_aftercolumnadd_event.md)     | @getshort(api/spreadsheet_aftercolumnadd_event.md)     |
 | [](api/spreadsheet_aftercolumndelete_event.md)  | @getshort(api/spreadsheet_aftercolumndelete_event.md)  |
@@ -76,6 +77,7 @@ Parameters:
 | [](api/spreadsheet_aftersheetrename_event.md)   | @getshort(api/spreadsheet_aftersheetrename_event.md)   |
 | [](api/spreadsheet_afterstylechange_event.md)   | @getshort(api/spreadsheet_afterstylechange_event.md)   |
 | [](api/spreadsheet_aftervaluechange_event.md)   | @getshort(api/spreadsheet_aftervaluechange_event.md)   |
+| [](api/spreadsheet_beforeaction_event.md)       | @getshort(api/spreadsheet_beforeaction_event.md)       |
 | [](api/spreadsheet_beforeclear_event.md)        | @getshort(api/spreadsheet_beforeclear_event.md)        |
 | [](api/spreadsheet_beforecolumnadd_event.md)    | @getshort(api/spreadsheet_beforecolumnadd_event.md)    |
 | [](api/spreadsheet_beforecolumndelete_event.md) | @getshort(api/spreadsheet_beforecolumndelete_event.md) |

docs/api/overview/actions_overview.md

@@ -6,11 +6,50 @@ description: You can have an Actions overview of the DHTMLX JavaScript Spreadshe
 
 # Actions overview
 
-From v4.3, you don't have to constantly add a set of paired **before-** and **after-** events to track and handle the actions which you execute when changing something in the spreadsheet. 
+:::info
+From v4.3, the Spreadsheet library introduces a new conception of interaction with Spreadsheet events.
+:::
 
-Now DHTMLX Spreadsheet includes a pair of the [beforeAction](api/spreadsheet_beforeaction_event.md)/[afterAction](api/spreadsheet_afteraction_event.md) events that are intended to make your code simple and concise. They will fire right before an action is executed and indicate which exactly action was performed.
+Now DHTMLX Spreadsheet includes a pair of the [beforeAction](api/spreadsheet_beforeaction_event.md)/[afterAction](api/spreadsheet_afteraction_event.md) events that are intended to make your code simple and concise. They will fire right before an action is executed and indicate which exactly action has been performed.
 
-The full list of available actions is given below.
+~~~js
+spreadsheet.events.on("beforeAction", (actionName, config) => {
+    if (actionName === "addColumn") {
+        console.log(actionName, config);
+        return false;
+    },
+    // more actions
+});
+
+spreadsheet.events.on("afterAction", (actionName, config) => {
+    if (actionName === "addColumn") {
+        console.log(actionName, config)
+    },
+    // more actions
+});
+~~~
+
+[The full list of the available actions is given below.](#list-of-actions)
+
+>It means, that you don't have to constantly add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events anymore to track and handle the actions which you execute when changing something in the spreadsheet. 
+
+>But if needed you can use an **old approach** because all the existing events will continue work as before:
+~~~js
+spreadsheet.events.on("afterColumnAdd", function(cell){
+    console.log("A new column is added", cell);
+});
+~~~
+~~~js
+spreadsheet.events.on("beforeColumnAdd", function(cell){
+    console.log("A new column will be added", cell);
+    return true;
+});
+~~~
+
+
+
+
+## List of actions
 
 | Action             | Description                                                                                                                                                                                           |
 | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -29,7 +68,9 @@ The full list of available actions is given below.
 | **resizeCol**        | The action is executed when you resize a column                                                                                                                                                       |
 | **resizeRow**        | The action is executed when you resize a row                                                                                                                                                          |
 | **setCellFormat**    | The action is executed when you change the format of a cell                                                                                                                                           |
-| **setCellValue**     | The action is executed when you change the value of a cell                                                                                                                                            |
+| **setCellValue**     | The action is executed when you change or remove the value of a cell                                                                                                                                            |
 | **setValidation**    | The action is executed when you set data validation for a cell                                                                                                                                        |
 | **sortCells**        | The action is executed when you sort data in spreadsheet                                                                                                                                              |
-| **setCellStyle**     | The action is executed when you change the style of a cell                                                                                                                                            |
+| **setCellStyle**     | The action is executed when you change the style of a cell                                                                                                                                            |
+
+**Related sample:** [Spreadsheet. Actions](https://snippet.dhtmlx.com/efcuxlkt)

docs/api/overview/events_overview.md

@@ -6,8 +6,9 @@ description: You can have an Events overview of the DHTMLX JavaScript Spreadshee
 
 # Events overview
 
-| Name                                            | Description                                            |
-| :---------------------------------------------- | :----------------------------------------------------- |
+| Name                                           | Description                                           |
+| :--------------------------------------------- | :---------------------------------------------------- |
+| [](../spreadsheet_afteraction_event.md)        | @getshort(../spreadsheet_afteraction_event.md)        |
 | [](../spreadsheet_afterclear_event.md)         | @getshort(../spreadsheet_afterclear_event.md)         |
 | [](../spreadsheet_aftercolumnadd_event.md)     | @getshort(../spreadsheet_aftercolumnadd_event.md)     |
 | [](../spreadsheet_aftercolumndelete_event.md)  | @getshort(../spreadsheet_aftercolumndelete_event.md)  |
@@ -25,6 +26,7 @@ description: You can have an Events overview of the DHTMLX JavaScript Spreadshee
 | [](../spreadsheet_aftersheetrename_event.md)   | @getshort(../spreadsheet_aftersheetrename_event.md)   |
 | [](../spreadsheet_afterstylechange_event.md)   | @getshort(../spreadsheet_afterstylechange_event.md)   |
 | [](../spreadsheet_aftervaluechange_event.md)   | @getshort(../spreadsheet_aftervaluechange_event.md)   |
+| [](../spreadsheet_beforeaction_event.md)       | @getshort(../spreadsheet_beforeaction_event.md)       |
 | [](../spreadsheet_beforeclear_event.md)        | @getshort(../spreadsheet_beforeclear_event.md)        |
 | [](../spreadsheet_beforecolumnadd_event.md)    | @getshort(../spreadsheet_beforecolumnadd_event.md)    |
 | [](../spreadsheet_beforecolumndelete_event.md) | @getshort(../spreadsheet_beforecolumndelete_event.md) |

docs/api/spreadsheet_afteraction_event.md

@@ -20,7 +20,7 @@ afterAction: (action: string, config: object) => void;
 
 The callback of the event takes the following parameters:
 
-- `action` - (required) the name of the action. Check the full list of available actions here
+- `action` - (required) the name of the action. Check the full list of available actions [here](api/overview/actions_overview.md#list-of-actions)
 - `config` - (required) an object with parameters of the action
 
 ### Example
@@ -31,9 +31,15 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
 });
 spreadsheet.parse(dataset);
 
-spreadsheet.events.on("AfterAction", (actionName, config) => {
+spreadsheet.events.on("afterAction", (actionName, config) => {
     if (actionName === "sortCells") {
         console.log(actionName, config);
     }
 });
-~~~
+~~~
+
+**Changelog:** Added in v4.3
+
+**Related articles:** 
+- [Spreadsheet actions](api/overview/actions_overview.md)
+- [Event handling](handling_events.md) 

docs/api/spreadsheet_afterclear_event.md

@@ -6,6 +6,20 @@ description: You can learn about the afterClear event in the documentation of th
 
 # afterClear
 
+:::caution
+The **afterClear** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
+
+~~~js
+spreadsheet.events.on("afterAction", (actionName, config) => {
+    if (actionName === "clear") {
+        console.log(actionName, config);
+    }
+});
+~~~
+
+For more details about the new concept, see **[Spreadsheet actions](api/overview/actions_overview.md)**. 
+:::
+
 ### Description
 
 @short: Fires after a spreadsheet is cleared

docs/api/spreadsheet_aftercolumnadd_event.md

@@ -6,6 +6,20 @@ description: You can learn about the afterColumnAdd event in the documentation o
 
 # afterColumnAdd
 
+:::caution
+The **afterColumnAdd** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
+
+~~~js
+spreadsheet.events.on("afterAction", (actionName, config) => {
+    if (actionName === "addColumn") {
+        console.log(actionName, config)
+    }
+});
+~~~
+
+For more details about the new concept, see **[Spreadsheet actions](api/overview/actions_overview.md)**. 
+:::
+
 ### Description
 
 @short: Fires after a new column is added

docs/api/spreadsheet_aftercolumndelete_event.md

@@ -6,6 +6,20 @@ description: You can learn about the afterColumnDelete event in the documentatio
 
 # afterColumnDelete
 
+:::caution
+The **afterColumnDelete** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
+
+~~~js
+spreadsheet.events.on("afterAction", (actionName, config) => {
+    if (actionName === "deleteColumn") {
+        console.log(actionName, config)
+    }
+});
+~~~
+
+For more details about the new concept, see **[Spreadsheet actions](api/overview/actions_overview.md)**. 
+:::
+
 ### Description
 
 @short: Fires after a column is deleted

docs/api/spreadsheet_afterformatchange_event.md

@@ -6,6 +6,20 @@ description: You can learn about the afterFormatChange event in the documentatio
 
 # afterFormatChange
 
+:::caution
+The **afterFormatChange** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
+
+~~~js
+spreadsheet.events.on("afterAction", (actionName, config) => {
+    if (actionName === "setCellFormat") {
+        console.log(actionName, config);
+    }
+});
+~~~
+
+For more details about the new concept, see **[Spreadsheet actions](api/overview/actions_overview.md)**. 
+:::
+
 ### Description
 
 @short: Fires after the format of a cell is changed

docs/api/spreadsheet_afterrowadd_event.md

@@ -6,6 +6,20 @@ description: You can learn about the afterRowAdd event in the documentation of t
 
 # afterRowAdd
 
+:::caution
+The **afterRowAdd** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
+
+~~~js
+spreadsheet.events.on("afterAction", (actionName, config) => {
+    if (actionName === "addRow") {
+        console.log(actionName, config);
+    }
+});
+~~~
+
+For more details about the new concept, see **[Spreadsheet actions](api/overview/actions_overview.md)**. 
+:::
+
 ### Description
 
 @short: Fires after a new row is added

docs/api/spreadsheet_afterrowdelete_event.md

@@ -6,6 +6,20 @@ description: You can learn about the afterRowDelete event in the documentation o
 
 # afterRowDelete
 
+:::caution
+The **afterRowDelete** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
+
+~~~js
+spreadsheet.events.on("afterAction", (actionName, config) => {
+    if (actionName === "deleteRow") {
+        console.log(actionName, config);
+    }
+});
+~~~
+
+For more details about the new concept, see **[Spreadsheet actions](api/overview/actions_overview.md)**. 
+:::
+
 ### Description
 
 @short: Fires after a row is deleted