diff --git a/docs/angular_integration.md b/docs/angular_integration.md index 1c403a7b..44bd50c3 100644 --- a/docs/angular_integration.md +++ b/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); }); } diff --git a/docs/api/api_overview.md b/docs/api/api_overview.md index 01947e25..da3a7b17 100644 --- a/docs/api/api_overview.md +++ b/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 diff --git a/docs/api/eventsbus_detach_method.md b/docs/api/eventsbus_detach_method.md index 4da0f011..214358f5 100644 --- a/docs/api/eventsbus_detach_method.md +++ b/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) diff --git a/docs/api/eventsbus_on_method.md b/docs/api/eventsbus_on_method.md index 97139e27..bde8c12c 100644 --- a/docs/api/eventsbus_on_method.md +++ b/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"); + } }); ~~~ diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md index b2fc3887..d3f5ea7b 100644 --- a/docs/api/overview/events_overview.md +++ b/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) | \ No newline at end of file +| [](../spreadsheet_beforesheetchange_event.md) | @getshort(../spreadsheet_beforesheetchange_event.md) | +| [](../spreadsheet_groupfill_event.md) | @getshort(../spreadsheet_groupfill_event.md) | \ No newline at end of file diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md index cb50cdbe..64dc9d17 100644 --- a/docs/api/overview/methods_overview.md +++ b/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) | diff --git a/docs/api/sheetmanager_add_method.md b/docs/api/sheetmanager_add_method.md index 3156c2ff..3cb1ad96 100644 --- a/docs/api/sheetmanager_add_method.md +++ b/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(); diff --git a/docs/api/sheetmanager_clear_method.md b/docs/api/sheetmanager_clear_method.md index f057d21b..73f169d3 100644 --- a/docs/api/sheetmanager_clear_method.md +++ b/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(); diff --git a/docs/api/sheetmanager_get_method.md b/docs/api/sheetmanager_get_method.md index 634a7de8..c829f2a6 100644 --- a/docs/api/sheetmanager_get_method.md +++ b/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 diff --git a/docs/api/sheetmanager_getactive_method.md b/docs/api/sheetmanager_getactive_method.md index 8728c176..eb739205 100644 --- a/docs/api/sheetmanager_getactive_method.md +++ b/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 diff --git a/docs/api/sheetmanager_getall_method.md b/docs/api/sheetmanager_getall_method.md index a45438bb..b8e60d10 100644 --- a/docs/api/sheetmanager_getall_method.md +++ b/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" } // ] ~~~ diff --git a/docs/api/sheetmanager_remove_method.md b/docs/api/sheetmanager_remove_method.md index 499a03dc..7d0abf59 100644 --- a/docs/api/sheetmanager_remove_method.md +++ b/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 diff --git a/docs/api/sheetmanager_setactive_method.md b/docs/api/sheetmanager_setactive_method.md index 0136af7b..84acadbf 100644 --- a/docs/api/sheetmanager_setactive_method.md +++ b/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 diff --git a/docs/api/spreadsheet_activesheetname.md b/docs/api/spreadsheet_activesheetname.md new file mode 100644 index 00000000..caa93132 --- /dev/null +++ b/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) diff --git a/docs/api/spreadsheet_colscount_config.md b/docs/api/spreadsheet_colscount_config.md index f006171a..4618cb1c 100644 --- a/docs/api/spreadsheet_colscount_config.md +++ b/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} diff --git a/docs/api/spreadsheet_endedit_method.md b/docs/api/spreadsheet_endedit_method.md index afcbcec3..376feee8 100644 --- a/docs/api/spreadsheet_endedit_method.md +++ b/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} diff --git a/docs/api/spreadsheet_exportmodulepath_config.md b/docs/api/spreadsheet_exportmodulepath_config.md index f339213d..8b60789b 100644 --- a/docs/api/spreadsheet_exportmodulepath_config.md +++ b/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 diff --git a/docs/api/spreadsheet_formats_config.md b/docs/api/spreadsheet_formats_config.md index 83098626..d5903278 100644 --- a/docs/api/spreadsheet_formats_config.md +++ b/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'" } ]; ~~~ diff --git a/docs/api/spreadsheet_getcellindex_method.md b/docs/api/spreadsheet_getcellindex_method.md new file mode 100644 index 00000000..47a4b3b9 --- /dev/null +++ b/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) diff --git a/docs/api/spreadsheet_load_method.md b/docs/api/spreadsheet_load_method.md index 2b59ea65..4d022177 100644 --- a/docs/api/spreadsheet_load_method.md +++ b/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"); }); ~~~ ::: diff --git a/docs/api/spreadsheet_menu_config.md b/docs/api/spreadsheet_menu_config.md index 1ac03ec3..21594da8 100644 --- a/docs/api/spreadsheet_menu_config.md +++ b/docs/api/spreadsheet_menu_config.md @@ -19,7 +19,7 @@ menu?: boolean; ### Default config ~~~jsx -menu: true +menu: false ~~~ ### Example diff --git a/docs/api/spreadsheet_rowscount_config.md b/docs/api/spreadsheet_rowscount_config.md index c21cb7a0..5ddf402f 100644 --- a/docs/api/spreadsheet_rowscount_config.md +++ b/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} diff --git a/docs/api/spreadsheet_sortcells_method.md b/docs/api/spreadsheet_sortcells_method.md index 924eef0c..2fc76ffd 100644 --- a/docs/api/spreadsheet_sortcells_method.md +++ b/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 diff --git a/docs/configuration.md b/docs/configuration.md index 03892a61..eb4894d3 100644 --- a/docs/configuration.md +++ b/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. diff --git a/docs/customization.md b/docs/customization.md index e70e4b11..95a3fab5 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -49,7 +49,7 @@ The **menuItem** object has the properties below: - **icon** - the name of an icon from the used icon font - **hotkey** - the name of the hot key for a menu item - **value** - the value of a menu item -- **childs** - an array of children controls (note that all the children should have the type **menuItem**) +- **items** - an array of children controls (note that all the children should have the type **menuItem**) The data collection API of the **toolbar**, **menu** and **context menu** allows you to manipulate the controls, namely to add custom controls, remove the controls you don't need, or update the controls, e.g. change their icons. @@ -162,12 +162,14 @@ It is also possible to add the blocks enumerated below: - the *Remove row* button (id: "remove-row") - the *Unfreeze rows* button (id: "unfreeze-rows") - the *Freeze up to row [id]* (id: "freeze-rows") + - the *Show rows* button (id: "show-rows") - the *Hide row(s) [id]* (id: "hide-rows") - the **Columns** block - the *Add column* button (id: "add-col") - the *Remove column* button (id: "remove-col") - the *Unfreeze columns* button (id: "unfreeze-cols") - the *Freeze up to column [id]* (id: "freeze-cols") + - the *Show columns* button (id: "show-cols") - the *Hide column(s) [id]* (id: "hide-cols") - the **File** block - the *Export* menuItem (id: "export") @@ -265,7 +267,7 @@ spreadsheet.parse(dataset); The [default menu](/#menu) has the following structure: -- the **File** menuItem (id: "edit") +- the **File** menuItem (id: "file") - the *Import as...* menuItem (id: "import") - the *"Microsoft Excel(.xlsx)"* menuItem (id: "import-xlsx") - the *Download as...* menuItem (id: "download") @@ -330,7 +332,7 @@ In the example below a new menuItem is added into the menu: spreadsheet.menu.data.add({ id: "validate", value: "Validate", - childs: [ + items: [ { id: "isNumber", value: "Is number" diff --git a/docs/functions.md b/docs/functions.md index af45830a..e3f50fae 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -82,11 +82,21 @@ Check the example in our [snippet tool](https://snippet.dhtmlx.com/wux2b35b). =EOMONTH(start_date, months) Returns the date for the last day of the month, n months before or after the specified start date. + + HOUR + =HOUR(date) + Returns the hour of a time value, as a number from 0 (12:00 AM) to 23 (11:00 PM). + ISOWEEKNUM =ISOWEEKNUM(date) Returns the number of the ISO week number of the year for the specified date. + + MINUTE + =MINUTE(date) + Returns the minutes of a time value, as a number from 0 to 59. + MONTH =MONTH(date) @@ -98,8 +108,8 @@ Check the example in our [snippet tool](https://snippet.dhtmlx.com/wux2b35b). Returns the number of whole working days between two dates. Working days exclude weekends and any dates specified in holidays. - NETWORKDAYSINTL - =NETWORKDAYSINTL(start_date, end_date, [weekend], [holidays]) + NETWORKDAYS.INTL + =NETWORKDAYS.INTL(start_date, end_date, [weekend], [holidays]) Returns the number of whole working days between two dates.
The optional weekend parameter is used to specify which days of the week are considered weekends.
Weekend days and holidays are not considered as workdays. @@ -107,6 +117,16 @@ Check the example in our [snippet tool](https://snippet.dhtmlx.com/wux2b35b). =NOW() Returns the current date. + + SECOND + =SECOND(date) + Returns the seconds of a time value, as a number from 0 to 59. + + + TIME + =TIME(hour, minute, second) + Combines separate hour, minute, and second values and returns a time. + TIMEVALUE
added in v4.3 =TIMEVALUE(time_text) @@ -128,8 +148,8 @@ Check the example in our [snippet tool](https://snippet.dhtmlx.com/wux2b35b). Returns the date of the nearest working day n days in the future or past.
Working days exclude weekends and any dates specified in holidays. - WORKDAYINTL - =WORKDAYINTL(start_date, days, [weekend], [holidays]) + WORKDAY.INTL + =WORKDAY.INTL(start_date, days, [weekend], [holidays]) Returns the date of the nearest working day n days in the future or past.
The optional weekend parameter is used to specify which days of the week are considered weekends.
Weekend days and holidays are not considered as workdays. @@ -1052,6 +1072,10 @@ Only numbers in the array or reference are multiplied. Empty cells, logical valu STDEV.S
added in v4.3 Estimates standard deviation based on a sample (ignores logical values and text in the sample).
The standard deviation is a measure of how widely values are dispersed from the average value (the mean).
If an argument is an array or reference, only values in that array or reference are used. Empty cells, logical values, text, or error values in the array or reference are ignored.
Error values cause errors. + + STDEV.P + Calculates standard deviation based on the entire population given as arguments (ignores logical values and text).
The standard deviation is a measure of how widely values are dispersed from the average value (the mean).
If an argument is an array or reference, only values in that array or reference are used. Empty cells, logical values, text, or error values in the array or reference are ignored. + SUBTOTAL Returns a subtotal in a list or database. @@ -1120,6 +1144,10 @@ Only numbers in the array or reference are multiplied. Empty cells, logical valu VAR.S
added in v4.3 Returns the variance based on a sample (ignores logical values and text in the sample).
Empty cells, logical values, text, or error values in the array or reference are ignored. + + VAR.P + Calculates the variance based on the entire population (ignores logical values and text in the population).
Empty cells, logical values, text, or error values in the array or reference are ignored. +
diff --git a/docs/handling_events.md b/docs/handling_events.md index ea4512c4..d1ed14a4 100644 --- a/docs/handling_events.md +++ b/docs/handling_events.md @@ -23,10 +23,11 @@ spreadsheet.events.on("AfterColumnAdd", function(cells){ To detach events, use [spreadsheet.events.detach()](api/eventsbus_detach_method.md): ~~~jsx -var addcolumn = spreadsheet.events.on("AfterColumnAdd", function(cells){ +spreadsheet.events.on("AfterColumnAdd", function(cells){ console.log("A new column is added"); }); -spreadsheet.events.detach(addcolumn); +// pass the name of the event to detach its handlers +spreadsheet.events.detach("AfterColumnAdd"); ~~~ ## Calling events diff --git a/docs/index.md b/docs/index.md index f5de9de2..bb30ac9e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -17,7 +17,7 @@ There is a [User Guide](guides/#user-guides) provided to make work with Spreadsh ### Toolbar -The **Toolbar** section is rather flexible. It contains several default blocks of controls: "undo", "colors", "decoration", "align", "cell", "format", "actions". You can [change the toolbar structure](configuration.md#toolbar) and add more blocks, or set your own order of the blocks. +The **Toolbar** section is rather flexible. It contains several default blocks of controls: "undo", "colors", "font", "decoration", "align", "cell", "format", "actions". You can [change the toolbar structure](configuration.md#toolbar) and add more blocks, or set your own order of the blocks. ![Spreadsheet Toolbar](assets/overview_toolbar.png) @@ -42,7 +42,7 @@ You can switch the editing line off, if necessary via the corresponding [configu ### Context menu -The **Context menu** section includes 5 items **Lock**, **Clear**, **Columns**, **Rows**, **Sort**, and **Insert link** with sub-items. +The **Context menu** section includes 6 items **Lock**, **Clear**, **Columns**, **Rows**, **Sort**, and **Insert link** with sub-items. ![Spreadsheet Context Menu](assets/overview_contextmenu.png) diff --git a/docs/loading_data.md b/docs/loading_data.md index 8ebafbba..7047ee60 100644 --- a/docs/loading_data.md +++ b/docs/loading_data.md @@ -304,7 +304,7 @@ DHTMLX Spreadsheet provides the ability to export data from a spreadsheet into a Please note that the export feature won't work in the Internet Explorer browser. ::: -The library uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to enable the functionality of export to Excel. Export is processed at the **worker.js** file of the **Json2Excel** library (the default link is `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`). You can use either the public export server or a local export server. Thus, to have the possibility of exporting files you need to: +The library uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to enable the functionality of export to Excel. Export is processed at the **worker.js** file of the **Json2Excel** library (the default link is `https://cdn.dhtmlx.com/libs/json2excel/1.5/worker.js?vx`). You can use either the public export server or a local export server. Thus, to have the possibility of exporting files you need to: - specify the [](api/spreadsheet_exportmodulepath_config.md) option in the Spreadsheet configuration and set the path to the **worker.js** file: - if you use the public export server, you don't need to specify the link to it, since it is used by default diff --git a/docs/localization.md b/docs/localization.md index 39e928e0..bcdb27ca 100644 --- a/docs/localization.md +++ b/docs/localization.md @@ -23,6 +23,8 @@ const en = { textColor: "Text color", backgroundColor: "Background color", + fontSize: "Font size", + bold: "Bold", italic: "Italic", underline: "Underline", @@ -82,6 +84,7 @@ const en = { text: "Text", date: "Date", time: "Time", + scientific: "Scientific", filter: "Filter", diff --git a/docs/migration.md b/docs/migration.md index a542e59b..01a9ebda 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -144,7 +144,7 @@ spreadsheet.parse(data); ## 4.3 -> 5.0 -In v5.0, the *"help"* option of the [toolbarBlocks](api/spreadsheet_toolbarblocks_config.md) property is renamed to *"helpers"*. Besides, the default set of options is extended by the new *"actions"* option. +In v5.0, the default set of the [toolbarBlocks](api/spreadsheet_toolbarblocks_config.md) options is extended by the new *"actions"* option. ~~~jsx title="Before v5.0" {8} // default configuration @@ -167,7 +167,7 @@ toolbarBlocks: [ "align", "format", "actions", - "helpers" + "help" ] ~~~ diff --git a/docs/working_with_sheets.md b/docs/working_with_sheets.md index 3dbeb603..21a7a0b4 100644 --- a/docs/working_with_sheets.md +++ b/docs/working_with_sheets.md @@ -34,9 +34,9 @@ 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 +// Add a sheet with an auto-generated name (e.g. "sheet2") const anotherId = spreadsheet.sheets.add(); ~~~ @@ -52,8 +52,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); ~~~ Note, that a sheet won't be removed if the number of sheets in the spreadsheet is less than 2. @@ -69,11 +70,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" ~~~ **Related sample:** [Spreadsheet. Set active sheet](https://snippet.dhtmlx.com/iowl449t) @@ -89,8 +91,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 ~~~ The method returns an object with the name and id attributes of the currently active sheet. @@ -108,8 +110,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" } // ] ~~~ @@ -123,8 +125,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" ~~~ ## Clearing sheets