[update] actualize API docs against current behavior

docs/angular_integration.md

@@ -223,8 +223,8 @@ Open the **spreadsheet.component.ts** file and complete the `ngOnInit()` method
 ngOnInit() {
     this._spreadsheet = new Spreadsheet(this.spreadsheet_container.nativeElement,{});
 
-    spreadsheet.events.on("afterFocusSet", function(cell){
-        console.log("Focus is set on a cell " + spreadsheet.selection.getSelectedCell());
+    this._spreadsheet.events.on("afterFocusSet", (cell) => {
+        console.log("Focus is set on a cell " + this._spreadsheet.selection.getSelectedCell());
         console.log(cell);
     });
 }

docs/api/api_overview.md

@@ -35,6 +35,7 @@ Parameters:
 | [](api/spreadsheet_fitcolumn_method.md)      | @getshort(api/spreadsheet_fitcolumn_method.md)      |
 | [](api/spreadsheet_freezecols_method.md)     | @getshort(api/spreadsheet_freezecols_method.md)     |
 | [](api/spreadsheet_freezerows_method.md)     | @getshort(api/spreadsheet_freezerows_method.md)     |
+| [](api/spreadsheet_getcellindex_method.md)   | @getshort(api/spreadsheet_getcellindex_method.md)   |
 | [](api/spreadsheet_getfilter_method.md)      | @getshort(api/spreadsheet_getfilter_method.md)      |
 | [](api/spreadsheet_getformat_method.md)      | @getshort(api/spreadsheet_getformat_method.md)      |
 | [](api/spreadsheet_getformula_method.md)     | @getshort(api/spreadsheet_getformula_method.md)     |
@@ -59,6 +60,7 @@ Parameters:
 | [](api/spreadsheet_setvalue_method.md)       | @getshort(api/spreadsheet_setvalue_method.md)       |
 | [](api/spreadsheet_showcols_method.md)       | @getshort(api/spreadsheet_showcols_method.md)       |
 | [](api/spreadsheet_showrows_method.md)       | @getshort(api/spreadsheet_showrows_method.md)       |
+| [](api/spreadsheet_sortcells_method.md)      | @getshort(api/spreadsheet_sortcells_method.md)      |
 | [](api/spreadsheet_startedit_method.md)      | @getshort(api/spreadsheet_startedit_method.md)      |
 | [](api/spreadsheet_undo_method.md)           | @getshort(api/spreadsheet_undo_method.md)           |
 | [](api/spreadsheet_unfreezecols_method.md)   | @getshort(api/spreadsheet_unfreezecols_method.md)   |
@@ -84,6 +86,7 @@ Parameters:
 | [](api/spreadsheet_beforefocusset_event.md)     | @getshort(api/spreadsheet_beforefocusset_event.md)     |
 | [](api/spreadsheet_beforeselectionset_event.md) | @getshort(api/spreadsheet_beforeselectionset_event.md) |
 | [](api/spreadsheet_beforesheetchange_event.md)  | @getshort(api/spreadsheet_beforesheetchange_event.md)  |
+| [](api/spreadsheet_groupfill_event.md)          | @getshort(api/spreadsheet_groupfill_event.md)          |
 
 ## Spreadsheet properties
 
@@ -101,6 +104,11 @@ Parameters:
 | [](api/spreadsheet_rowscount_config.md)        | @getshort(api/spreadsheet_rowscount_config.md)        |
 | [](api/spreadsheet_toolbarblocks_config.md)    | @getshort(api/spreadsheet_toolbarblocks_config.md)    |
 
+## Spreadsheet properties (read-only)
+
+| Name                                        | Description                                        |
+| ------------------------------------------- | -------------------------------------------------- |
+| [](api/spreadsheet_activesheetname.md)      | @getshort(api/spreadsheet_activesheetname.md)      |
 
 ## Sheet Manager methods
 

docs/api/eventsbus_detach_method.md

@@ -28,11 +28,13 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
 });
 spreadsheet.parse(data);
 
-spreadsheet.events.on("StyleChange", function(id){
-  console.log("The style of cell "+spreadsheet.selection.get()+" is changed");
+spreadsheet.events.on("afterAction", function(action, config){
+  if (action === "setCellStyle") {
+    console.log("The style of cell "+spreadsheet.selection.getSelectedCell()+" is changed");
+  }
 });
 
-spreadsheet.events.detach("StyleChange");
+spreadsheet.events.detach("afterAction");
 ~~~
 
 :::info
@@ -42,10 +44,10 @@ By default **detach()** removes all event handlers from the target event. You ca
 ~~~jsx
 const marker = "any"; // you can use any string|object value
 
-spreadsheet.events.on("StyleChange", handler1);
-spreadsheet.events.on("StyleChange", handler2, marker);
+spreadsheet.events.on("afterAction", handler1);
+spreadsheet.events.on("afterAction", handler2, marker);
 // the next command will delete only handler2
-spreadsheet.events.detach("StyleChange", marker);
+spreadsheet.events.detach("afterAction", marker);
 ~~~
 
 **Related articles:** [Event Handling](handling_events.md)

docs/api/eventsbus_on_method.md

@@ -29,8 +29,10 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
 });
 spreadsheet.parse(data);
 
-spreadsheet.events.on("StyleChange", function(id){
-  console.log("The style of cell "+spreadsheet.selection.get()+" is changed");
+spreadsheet.events.on("afterAction", function(action, config){
+  if (action === "setCellStyle") {
+    console.log("The style of cell "+spreadsheet.selection.getSelectedCell()+" is changed");
+  }
 });
 ~~~
 

docs/api/overview/events_overview.md

@@ -22,4 +22,5 @@ description: You can have an Events overview of the DHTMLX JavaScript Spreadshee
 | [](../spreadsheet_beforeeditstart_event.md)    | @getshort(../spreadsheet_beforeeditstart_event.md)    |
 | [](../spreadsheet_beforefocusset_event.md)     | @getshort(../spreadsheet_beforefocusset_event.md)     |
 | [](../spreadsheet_beforeselectionset_event.md) | @getshort(../spreadsheet_beforeselectionset_event.md) |
-| [](../spreadsheet_beforesheetchange_event.md)  | @getshort(../spreadsheet_beforesheetchange_event.md)  |
+| [](../spreadsheet_beforesheetchange_event.md)  | @getshort(../spreadsheet_beforesheetchange_event.md)  |
+| [](../spreadsheet_groupfill_event.md)          | @getshort(../spreadsheet_groupfill_event.md)          |

docs/api/overview/methods_overview.md

@@ -19,6 +19,7 @@ description: You can check a Methods overview of the DHTMLX JavaScript Spreadshe
 | [](../spreadsheet_fitcolumn_method.md)      | @getshort(../spreadsheet_fitcolumn_method.md)      |
 | [](../spreadsheet_freezecols_method.md)     | @getshort(../spreadsheet_freezecols_method.md)     |
 | [](../spreadsheet_freezerows_method.md)     | @getshort(../spreadsheet_freezerows_method.md)     |
+| [](../spreadsheet_getcellindex_method.md)   | @getshort(../spreadsheet_getcellindex_method.md)   |
 | [](../spreadsheet_getfilter_method.md)      | @getshort(../spreadsheet_getfilter_method.md)      |
 | [](../spreadsheet_getformat_method.md)      | @getshort(../spreadsheet_getformat_method.md)      |
 | [](../spreadsheet_getformula_method.md)     | @getshort(../spreadsheet_getformula_method.md)     |
@@ -43,6 +44,7 @@ description: You can check a Methods overview of the DHTMLX JavaScript Spreadshe
 | [](../spreadsheet_setvalue_method.md)       | @getshort(../spreadsheet_setvalue_method.md)       |
 | [](../spreadsheet_showcols_method.md)       | @getshort(../spreadsheet_showcols_method.md)       |
 | [](../spreadsheet_showrows_method.md)       | @getshort(../spreadsheet_showrows_method.md)       |
+| [](../spreadsheet_sortcells_method.md)      | @getshort(../spreadsheet_sortcells_method.md)      |
 | [](../spreadsheet_startedit_method.md)      | @getshort(../spreadsheet_startedit_method.md)      |
 | [](../spreadsheet_undo_method.md)           | @getshort(../spreadsheet_undo_method.md)           |
 | [](../spreadsheet_unfreezecols_method.md)   | @getshort(../spreadsheet_unfreezecols_method.md)   |

docs/api/sheetmanager_add_method.md

@@ -10,7 +10,7 @@ description: You can learn about the add method of the Sheet Manager in the docu
 
 @short: Adds a new empty sheet to the spreadsheet and returns the unique identifier of the newly created sheet
 
-If no name is provided, a default name will be generated automatically (e.g. "Sheet 2", "Sheet 3", etc.).
+If no name is provided, a default name will be generated automatically (e.g. "sheet2", "sheet3", etc.).
 
 :::info
 To apply this method, you need to enable the [multiSheets](api/spreadsheet_multisheets_config.md) configuration option.
@@ -40,7 +40,7 @@ spreadsheet.parse(data);
 
 // Add a sheet with a custom name
 const newSheetId = spreadsheet.sheets.add("Q4 Report");
-console.log(newSheetId); // e.g. "sheet_2"
+console.log(newSheetId); // a generated unique id of the new sheet
 
 // Add a sheet with an auto-generated name
 const anotherSheetId = spreadsheet.sheets.add();

docs/api/sheetmanager_clear_method.md

@@ -31,7 +31,8 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
 spreadsheet.parse(data);
 
 // Clear a specific sheet by id
-spreadsheet.sheets.clear("sheet_1");
+const allSheets = spreadsheet.sheets.getAll();
+spreadsheet.sheets.clear(allSheets[0].id);
 
 // Clear the currently active sheet
 spreadsheet.sheets.clear();

docs/api/sheetmanager_get_method.md

@@ -32,8 +32,9 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
 });
 spreadsheet.parse(data);
 
-const sheet = spreadsheet.sheets.get("sheet_1");
-console.log(sheet.name); // "Sheet 1"
+const allSheets = spreadsheet.sheets.getAll();
+const sheet = spreadsheet.sheets.get(allSheets[0].id);
+console.log(sheet.name); // "sheet1"
 ~~~
 
 **Change log:** Added in v6.0

docs/api/sheetmanager_getactive_method.md

@@ -29,8 +29,8 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
 spreadsheet.parse(data);
 
 const active = spreadsheet.sheets.getActive();
-console.log(active.name); // "Sheet 1"
-console.log(active.id);   // "sheet_1"
+console.log(active.name); // "sheet1"
+console.log(active.id);   // a unique auto-generated id of the active sheet
 ~~~
 
 **Change log:** Added in v6.0

docs/api/sheetmanager_getall_method.md

@@ -35,8 +35,8 @@ spreadsheet.parse(data);
 const allSheets = spreadsheet.sheets.getAll();
 console.log(allSheets);
 // [
-//   { id: "sheet_1", name: "Sheet 1" },
-//   { id: "sheet_2", name: "Sheet 2" }
+//   { id: "...", name: "sheet1" }, // id is a unique auto-generated value
+//   { id: "...", name: "sheet2" }
 // ]
 ~~~
 

docs/api/sheetmanager_remove_method.md

@@ -36,8 +36,9 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
 });
 spreadsheet.parse(data);
 
-// Remove a sheet by its id
-spreadsheet.sheets.remove("sheet_2");
+// Remove the second sheet by its id
+const allSheets = spreadsheet.sheets.getAll();
+spreadsheet.sheets.remove(allSheets[1].id);
 ~~~
 
 **Change log:** Added in v6.0

docs/api/sheetmanager_setactive_method.md

@@ -31,11 +31,12 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
 spreadsheet.parse(data);
 
 // Switch to the second sheet
-spreadsheet.sheets.setActive("sheet_2");
+const allSheets = spreadsheet.sheets.getAll();
+spreadsheet.sheets.setActive(allSheets[1].id);
 
 // Verify the switch
 const active = spreadsheet.sheets.getActive();
-console.log(active.name); // "Sheet 2"
+console.log(active.name); // "sheet2"
 ~~~
 
 **Change log:** Added in v6.0

docs/api/spreadsheet_activesheetname.md

@@ -0,0 +1,35 @@
+---
+sidebar_label: activeSheetName
+title: activeSheetName property
+description: You can learn about the activeSheetName property in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
+---
+
+# activeSheetName
+
+### Description
+
+@short: A read-only property that returns the name of the currently active sheet
+
+### Usage
+
+~~~jsx
+activeSheetName: string;
+~~~
+
+### Details
+
+The property returns the display name of the currently active (visible) sheet. If there is
+no active sheet, an empty string is returned. The property is read-only; to switch the active
+sheet, use the [](api/sheetmanager_setactive_method.md) method.
+
+### Example
+
+~~~jsx {5}
+const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
+spreadsheet.parse(data);
+
+// gets the name of the currently active sheet
+const name = spreadsheet.activeSheetName; // -> "sheet1"
+~~~
+
+**Related articles:** [Working with sheets](working_with_sheets.md)

docs/api/spreadsheet_colscount_config.md

@@ -16,6 +16,12 @@ description: You can learn about the colsCount config in the documentation of th
 colsCount?: number;
 ~~~
 
+### Default config
+
+~~~jsx
+colsCount: 26
+~~~
+
 ### Example
 
 ~~~jsx {2}

docs/api/spreadsheet_endedit_method.md

@@ -13,9 +13,13 @@ description: You can learn about the endEdit method in the documentation of the
 ### Usage
 
 ~~~jsx
-endEdit(): void;
+endEdit(withoutSave?: boolean): void;
 ~~~
 
+### Parameters
+
+- `withoutSave` - (optional) pass `true` to discard the entered value instead of saving it; `false` by default
+
 ### Example
 
 ~~~jsx {5}

docs/api/spreadsheet_exportmodulepath_config.md

@@ -31,7 +31,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
 DHTMLX Spreadsheet uses the WebAssembly-based library [JSON2Excel](https://github.com/dhtmlx/json2excel) for export of data into Excel.
 :::
 
-To export files you need to set the path to the **worker.js** file of the [Json2Excel](https://github.com/dhtmlx/json2excel) library (where export will be processed)  via the **exportModulePath** option. By default, `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx` is used.
+To export files you need to set the path to the **worker.js** file of the [Json2Excel](https://github.com/dhtmlx/json2excel) library (where export will be processed)  via the **exportModulePath** option. By default, `https://cdn.dhtmlx.com/libs/json2excel/1.5/worker.js?vx` is used.
 - if you use the public export server, you don't need to specify the link to it, since it is used by default
 - if you use your own export server, you need to:
   - install the [**Json2Excel**](https://github.com/dhtmlx/json2excel) library

docs/api/spreadsheet_formats_config.md

@@ -42,6 +42,7 @@ defaultFormats = [
            mask: hh:mm:ss am/pm || hh:mm:ss, // depending on the timeFormat config
            example: "13:30:00"
     },
+    { name: "Scientific", id: "scientific", mask: "0.00E+00", example: "1.50E+03" },
     { name: "Text", id: "text", mask: "@", example: "'1500.31'" }
 ];
 ~~~

docs/api/spreadsheet_getcellindex_method.md

@@ -0,0 +1,46 @@
+---
+sidebar_label: getCellIndex()
+title: getCellIndex method
+description: You can learn about the getCellIndex method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
+---
+
+# getCellIndex()
+
+### Description
+
+@short: Returns the row number and column letter for the specified cell or range
+
+### Usage
+
+~~~jsx
+getCellIndex(cell: string): 
+    { row: string, col: string } |              // for a single cell
+    { start: {...}, end: {...} };               // for a range of cells
+~~~
+
+### Parameters
+
+- `cell` - (required) the id of a cell ("B5") or a range of cells ("A1:B2")
+
+### Returns
+
+- for a single cell - an object with two attributes:
+    - `row` - the row number as a string (e.g. "5")
+    - `col` - the column letter (e.g. "B")
+- for a range of cells - an object with the `start` and `end` attributes, each of which is a `{ row, col }` object for the top-left and bottom-right cells of the range
+
+### Example
+
+~~~jsx {5,8}
+const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
+spreadsheet.parse(data);
+
+// gets the index of a single cell
+const index = spreadsheet.getCellIndex("B5"); // -> { row: "5", col: "B" }
+
+// gets the index of a range of cells
+const range = spreadsheet.getCellIndex("A1:B2");
+// -> { start: { row: "1", col: "A" }, end: { row: "2", col: "B" } }
+~~~
+
+**Related articles:** [Work with Spreadsheet](working_with_ssheet.md)

docs/api/spreadsheet_load_method.md

@@ -55,7 +55,7 @@ Data loading is asynchronous, so you need to wrap any after-loading code into a
 
 ~~~jsx
 spreadsheet.load("../some/data.json").then(function(){
-    spreadsheet.selection.add(123);
+    spreadsheet.selection.setSelectedCell("A1");
 });
 ~~~
 :::

docs/api/spreadsheet_menu_config.md

@@ -19,7 +19,7 @@ menu?: boolean;
 ### Default config
 
 ~~~jsx
-menu: true
+menu: false
 ~~~
 
 ### Example

docs/api/spreadsheet_rowscount_config.md

@@ -16,6 +16,12 @@ description: You can learn about the rowsCount config in the documentation of th
 rowsCount?: number;
 ~~~
 
+### Default config
+
+~~~jsx
+rowsCount: 1000
+~~~
+
 ### Example
 
 ~~~jsx {2}

docs/api/spreadsheet_sortcells_method.md

@@ -13,13 +13,13 @@ description: You can learn about the sortCells method in the documentation of th
 ### Usage
 
 ~~~jsx
-sortCells(cell: string, dir: number): void;
+sortCells(cell: string, dir?: number): void;
 ~~~
 
 ### Parameters
 
 - `cell` -  (required) the id(s) of a cell(s) or a range of cells by which you want the data in the spreadsheet to be sorted
-- `dir` - (required) the direction of sorting: 
+- `dir` - (optional) the direction of sorting, `1` by default: 
     - 1 - ascending order
     - -1 - descending order
 

docs/configuration.md

@@ -55,7 +55,7 @@ You can also [customize the readonly behavior of Spreadsheet](customization.md#c
 
 ## Custom number formats for cells
 
-There are 7 default formats that can be applied to the values of cells: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text".
+There are 8 default formats that can be applied to the values of cells: "Common", "Number", "Percent", "Currency", "Date", "Time", "Scientific", "Text".
 
 You can redefine configuration of default formats or specify your own number format via the [`formats`](api/spreadsheet_formats_config.md) config option. Check the details in the [Number Formatting](number_formatting.md) article.