Merge branch 'master' into next

Author: vashkinazi

README.md

@@ -1,31 +1,50 @@
-## DHTMLX Spreadsheet Documentation
+<h1 align="center"><a href="https://docs.dhtmlx.com/spreadsheet/">DHTMLX Spreadsheet Documentation</a></h1>
 
-### Installation
+[DHTMLX Spreadsheet](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/) is a client-side JavaScript component that allows editing and formatting data in spreadsheets online. It includes a configurable toolbar, handy menu and context menu, and adjustable grid, supports hot keys navigation, loads data both from external and local sources, provides the ability to localize interface into the desired language.
+
+## Explore documentation locally
+
+To run the Spreadsheet documentation locally, take the following steps:
+
+#### 1. Clone the documentation to the local folder
+
+```
+$ git clone [email protected]:DHTMLX/docs-spreadsheet.git
+$ cd docs-spreadsheet
+```
+
+#### 2. Install dependencies
 
 ```
 $ yarn
 ```
 
-### Local Development
+#### 3. Run the documentation on the local server and explore it
 
 ```
 $ yarn start
 ```
 
-This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+## Related sources
 
-### Build
+[Download DHTMLX Spreadsheet](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml)
 
-```
-$ yarn build
-```
+[Live demos](https://snippet.dhtmlx.com/ihtkdcoc?mode=wide&text=#spreadsheet)
 
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
+[Blog](https://dhtmlx.com/blog/tag/spreadsheet/)
 
-### Deployment
+[Forum](https://forum.dhtmlx.com/c/widgets/spreadsheet)
 
-```
-$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
-```
+## Follow us
+
+Star our GitHub repo :star:
+
+Watch our tutorials on [YouTube](https://www.youtube.com/user/dhtmlx/videos) :eyes:
+
+Read us on [Medium](https://medium.com/@dhtmlx) :newspaper:
+
+Follow us on [Twitter](https://twitter.com/dhtmlx) :feet:
+
+Like our page on [Facebook](https://www.facebook.com/dhtmlx/) :thumbsup:
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+See our news on [Linkedin](https://www.linkedin.com/groups/3345009/) :mega:

docker/redirects.conf

@@ -113,3 +113,5 @@
 /api__spreadsheet_beforerowadd_event.html	/spreadsheet/api/spreadsheet_beforerowadd_event/;
 /api__spreadsheet_beforerowdelete_event.html	/spreadsheet/api/spreadsheet_beforerowdelete_event/;
 
+/index.html	/spreadsheet/;
+

docs/api/api_overview.md

@@ -23,10 +23,12 @@ Parameters:
 ## Spreadsheet methods
 
 | Name                                         | Description                                         |
-| -------------------------------------------- | --------------------------------------------------- |
+| :------------------------------------------- | :-------------------------------------------------- |
 | [](api/spreadsheet_addcolumn_method.md)      | @getshort(api/spreadsheet_addcolumn_method.md)      |
 | [](api/spreadsheet_addrow_method.md)         | @getshort(api/spreadsheet_addrow_method.md)         |
 | [](api/spreadsheet_addsheet_method.md)       | @getshort(api/spreadsheet_addsheet_method.md)       |
+| [](api/spreadsheet_clear_method.md)          | @getshort(api/spreadsheet_clear_method.md)          |
+| [](api/spreadsheet_clearsheet_method.md)     | @getshort(api/spreadsheet_clearsheet_method.md)     |
 | [](api/spreadsheet_deletecolumn_method.md)   | @getshort(api/spreadsheet_deletecolumn_method.md)   |
 | [](api/spreadsheet_deleterow_method.md)      | @getshort(api/spreadsheet_deleterow_method.md)      |
 | [](api/spreadsheet_eachcell_method.md)       | @getshort(api/spreadsheet_eachcell_method.md)       |
@@ -44,6 +46,7 @@ Parameters:
 | [](api/spreadsheet_redo_method.md)           | @getshort(api/spreadsheet_redo_method.md)           |
 | [](api/spreadsheet_removesheet_method.md)    | @getshort(api/spreadsheet_removesheet_method.md)    |
 | [](api/spreadsheet_serialize_method.md)      | @getshort(api/spreadsheet_serialize_method.md)      |
+| [](api/spreadsheet_setactivesheet_method.md) | @getshort(api/spreadsheet_setactivesheet_method.md) |
 | [](api/spreadsheet_setformat_method.md)      | @getshort(api/spreadsheet_setformat_method.md)      |
 | [](api/spreadsheet_setstyle_method.md)       | @getshort(api/spreadsheet_setstyle_method.md)       |
 | [](api/spreadsheet_setvalue_method.md)       | @getshort(api/spreadsheet_setvalue_method.md)       |
@@ -54,7 +57,8 @@ Parameters:
 ## Spreadsheet events
 
 | Name                                            | Description                                            |
-| ----------------------------------------------- | ------------------------------------------------------ |
+| :---------------------------------------------- | :----------------------------------------------------- |
+| [](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)  |
 | [](api/spreadsheet_aftereditend_event.md)       | @getshort(api/spreadsheet_aftereditend_event.md)       |
@@ -66,10 +70,12 @@ Parameters:
 | [](api/spreadsheet_afterselectionset_event.md)  | @getshort(api/spreadsheet_afterselectionset_event.md)  |
 | [](api/spreadsheet_aftersheetadd_event.md)      | @getshort(api/spreadsheet_aftersheetadd_event.md)      |
 | [](api/spreadsheet_aftersheetchange_event.md)   | @getshort(api/spreadsheet_aftersheetchange_event.md)   |
+| [](api/spreadsheet_aftersheetclear_event.md)    | @getshort(api/spreadsheet_aftersheetclear_event.md)    |
 | [](api/spreadsheet_aftersheetremove_event.md)   | @getshort(api/spreadsheet_aftersheetremove_event.md)   |
 | [](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_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) |
 | [](api/spreadsheet_beforeeditend_event.md)      | @getshort(api/spreadsheet_beforeeditend_event.md)      |
@@ -81,6 +87,7 @@ Parameters:
 | [](api/spreadsheet_beforeselectionset_event.md) | @getshort(api/spreadsheet_beforeselectionset_event.md) |
 | [](api/spreadsheet_beforesheetadd_event.md)     | @getshort(api/spreadsheet_beforesheetadd_event.md)     |
 | [](api/spreadsheet_beforesheetchange_event.md)  | @getshort(api/spreadsheet_beforesheetchange_event.md)  |
+| [](api/spreadsheet_beforesheetclear_event.md)   | @getshort(api/spreadsheet_beforesheetclear_event.md)   |
 | [](api/spreadsheet_beforesheetremove_event.md)  | @getshort(api/spreadsheet_beforesheetremove_event.md)  |
 | [](api/spreadsheet_beforesheetrename_event.md)  | @getshort(api/spreadsheet_beforesheetrename_event.md)  |
 | [](api/spreadsheet_beforestylechange_event.md)  | @getshort(api/spreadsheet_beforestylechange_event.md)  |
@@ -91,6 +98,7 @@ Parameters:
 | Name                                           | Description                                           |
 | ---------------------------------------------- | ----------------------------------------------------- |
 | [](api/spreadsheet_colscount_config.md)        | @getshort(api/spreadsheet_colscount_config.md)        |
+| [](api/spreadsheet_dateformat_config.md)        | @getshort(api/spreadsheet_dateformat_config.md)        |
 | [](api/spreadsheet_editline_config.md)         | @getshort(api/spreadsheet_editline_config.md)         |
 | [](api/spreadsheet_exportmodulepath_config.md) | @getshort(api/spreadsheet_exportmodulepath_config.md) |
 | [](api/spreadsheet_formats_config.md)          | @getshort(api/spreadsheet_formats_config.md)          |
@@ -104,12 +112,13 @@ Parameters:
 
 ## Selection methods
 
-| Name                                        | Description                                        |
-| ------------------------------------------- | -------------------------------------------------- |
-| [](api/selection_getfocusedcell_method.md)  | @getshort(api/selection_getfocusedcell_method.md)  |
-| [](api/selection_getselectedcell_method.md) | @getshort(api/selection_getselectedcell_method.md) |
-| [](api/selection_setfocusedcell_method.md)  | @getshort(api/selection_setfocusedcell_method.md)  |
-| [](api/selection_setselectedcell_method.md) | @getshort(api/selection_setselectedcell_method.md) |
+| Name                                           | Description                                           |
+| :--------------------------------------------- | :---------------------------------------------------- |
+| [](api/selection_getfocusedcell_method.md)     | @getshort(api/selection_getfocusedcell_method.md)     |
+| [](api/selection_getselectedcell_method.md)    | @getshort(api/selection_getselectedcell_method.md)    |
+| [](api/selection_removeselectedcell_method.md) | @getshort(api/selection_removeselectedcell_method.md) |
+| [](api/selection_setfocusedcell_method.md)     | @getshort(api/selection_setfocusedcell_method.md)     |
+| [](api/selection_setselectedcell_method.md)    | @getshort(api/selection_setselectedcell_method.md)    |
 
 ## Events Bus methods
 

docs/api/eventsbus_detach_method.md

@@ -6,33 +6,45 @@ description: You can learn about the detach events bus method in the documentati
 
 # detach()
 
-@short: detaches a handler from an event (which was attached before by the on() method)
+### Description
 
-@signature: {`detach(name: string):  void;`}
+@short: Detaches a handler from an event (which was attached before by the on() method)
 
-@params:
-- `name: string` - the name of event to detach
+### Usage
+
+~~~jsx
+detach(name: string): void;
+~~~
+
+### Parameters
+
+- `name` - (required) the name of event to detach
+
+### Example
+
+~~~jsx {9}
+const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
+    // config parameters
+});
 
-@example:
 spreadsheet.events.on("StyleChange", function(id){
   console.log("The style of cell "+spreadsheet.selection.get()+" is changed");
 });
 
 spreadsheet.events.detach("StyleChange");
+~~~
 
-@descr:
-
+:::info
 By default **detach()** removes all event handlers from the target event. You can detach particular event handlers by using the context marker.
+:::
 
-~~~js
-var marker = "any"; // you can use any string|object value
+~~~jsx
+const marker = "any"; // you can use any string|object value
 
 spreadsheet.events.on("StyleChange", handler1);
 spreadsheet.events.on("StyleChange", handler2, marker);
 // the next command will delete only handler2
 spreadsheet.events.detach("StyleChange", marker);
 ~~~
 
-**Related articles**
-
-[Event Handling](handling_events.md)
+**Related articles:** [Event Handling](handling_events.md)

docs/api/eventsbus_fire_method.md

@@ -6,28 +6,41 @@ description: You can learn about the fire events bus method in the documentation
 
 # fire()
 
-@short: triggers an inner event
+### Description
 
-@signature: {`fire(name: string, arguments: any[]): boolean;`}
+@short: Triggers an inner event
 
-@params:
-- `name: string` - the event's name, case-insensitive
-- `arguments: array` - an array of the event-related data
+:::info
+Normally, events are called automatically and you don't need to use this method.
+:::
 
-@returns:
-*False*, if some of the event handlers return *false*. Otherwise, *true*.
+### Usage
 
-@example:
-spreadsheet.events.on("CustomEvent", function(param1, param2){
- 	return true;
-});
+~~~jsx
+fire(name: string, arguments: array): boolean;
+~~~
 
-var res = spreadsheet.events.fire("CustomEvent", [12, "abc"]);
+### Parameters
 
-@descr:
+- `name` -  (required) the event's name, case-insensitive
+- `arguments` - (required) an array of the event-related data
 
-Normally, events are called automatically and you don't need to use this method.
+### Returns
+
+The method returns `false`, if some of the event handlers return `false`. Otherwise, `true`
+
+### Example
+
+~~~jsx {9}
+const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
+    // config parameters
+});
+
+spreadsheet.events.on("CustomEvent", function(param1, param2){
+	return true;
+});
 
-**Related articles**
+const res = spreadsheet.events.fire("CustomEvent", [12, "abc"]);
+~~~
 
-[Event Handling](handling_events.md)
+**Related articles:** [Event Handling](handling_events.md)

docs/api/eventsbus_on_method.md

@@ -6,28 +6,39 @@ description: You can learn about the on events bus method in the documentation o
 
 # on()
 
-@short: attaches a handler to an inner event of Spreadsheet
+### Description
 
-@signature: {`on(name: string, callback: Function): void;`}
+@short: Attaches a handler to an inner event of Spreadsheet
 
-@params:
-- `name: string` - the event's name, case-insensitive
-- `callback: function` - the handler function
+### Usage
+
+~~~jsx
+on(name: string, callback: function): void;
+~~~
+
+### Parameters
+
+- `name` - (required) the event's name, case-insensitive
+- `callback` - (required) the handler function
+
+### Example
+
+~~~jsx {5-7}
+const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
+    // config parameters
+});
 
-@example:
 spreadsheet.events.on("StyleChange", function(id){
   console.log("The style of cell "+spreadsheet.selection.get()+" is changed");
 });
+~~~
 
-@relatedsample:
-**Related sample**: [Spreadsheet. Events](https://snippet.dhtmlx.com/2vkjyvsi)
-
-@descr:
-
-[See the list of Spreadsheet events](api/api_overview.md/#spreadsheet-events).
+:::info
+See the full list of the Spreadsheet events [here](api/api_overview.md/#spreadsheet-events).
 
 You can attach several handlers to the same event and all of them will be executed. If some of handlers return *false*, the related operations will be blocked. Event handlers are processed in the same order that they are attached.
+:::
 
-**Related articles**
+**Related articles:** [Event Handling](handling_events.md)
 
-[Event Handling](handling_events.md)
+**Related sample:** [Spreadsheet. Events](https://snippet.dhtmlx.com/2vkjyvsi)

docs/api/export_xlsx_method.md

@@ -6,22 +6,34 @@ description: You can learn about the xlsx export method in the documentation of
 
 # xlsx()
 
-@short: exports data from a spreadsheet into an Excel (.xlsx) file
+### Description
 
-@signature: xlsx(): void;
+@short: Exports data from a spreadsheet into an Excel (.xlsx) file
 
-@example:
-spreadsheet.export.xlsx();
+### Usage
+
+~~~jsx
+xlsx(): void;
+~~~
 
-@relatedsample:
-**Related sample**: [Spreadsheet. Export Xlsx](https://snippet.dhtmlx.com/btyo3j8s)
+### Example
 
-@descr:
+~~~jsx {5}
+const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
+    // config parameters
+});
+// exports data from a spreadsheet into an Excel
+spreadsheet.export.xlsx();
+~~~
 
-{{note Please note that the component supports export to Excel files with the **.xlsx** extension only. }}
+:::note 
+Please note that the component supports export to Excel files with the **.xlsx** extension only.
+:::
 
+:::info
 DHTMLX Spreadsheet uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) for import of data from Excel. [Check the details](loading_data.md#exporting-data).
+:::
 
-**Related articles**
+**Related articles:** [Data loading and export](loading_data.md)
 
-[Data loading and export](loading_data.md)
+**Related sample:** [Spreadsheet. Export Xlsx](https://snippet.dhtmlx.com/btyo3j8s)