From 62d15c427ceb7c5024098619789601c95333c880 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Wed, 7 May 2025 16:34:28 +0300 Subject: [PATCH] [update] toolbar-related docs and migration guide for v5.2 --- docs/api/spreadsheet_toolbarblocks_config.md | 28 +++++----- docs/configuration.md | 10 +++- docs/customization.md | 56 ++++++++++---------- docs/index.md | 2 +- docs/migration.md | 34 ++++++++++++ 5 files changed, 86 insertions(+), 44 deletions(-) diff --git a/docs/api/spreadsheet_toolbarblocks_config.md b/docs/api/spreadsheet_toolbarblocks_config.md index cc1823c8..6ea946a4 100644 --- a/docs/api/spreadsheet_toolbarblocks_config.md +++ b/docs/api/spreadsheet_toolbarblocks_config.md @@ -19,47 +19,47 @@ toolbarBlocks?: array; ### Default config ~~~jsx -toolbarBlocks: ["undo", "colors", "decoration", "align", "format", "actions", "helpers"] +toolbarBlocks: ["undo", "colors", "decoration", "align", "cell", "format", "actions"] ~~~ ### Example ~~~jsx {3-15} -const spreadsheet = new dhx.Spreadsheet("spreadsheet", { +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { // full toolbar toolbarBlocks: [ "undo", "colors", "decoration", "align", + "cell", + "format", + "actions", "lock", "clear", - "rows", "columns", - "helpers", - "format", - "file" + "rows", + "file", + "help" ] }); ~~~ ### Details -You can specify your own structure of the toolbar by enumerating necessary elements in the **toolbarBlocks** array in the desired order, for example: +You can specify your own structure of the toolbar by enumerating necessary elements in the `toolbarBlocks` array in the desired order, for example: -~~~jsx {2} -const spreadsheet = new dhx.Spreadsheet("spreadsheet", { - toolbarBlocks: ["helpers", "colors", "align", "decoration", "lock", "clear"] +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] }); ~~~ -![Custom toolbar](../assets/custom_toolbar.png) - Check how you can [customize the toolbar](customization.md/#toolbar). **Change log:** -- The *"actions"* block was added in v5.0 -- The *"help"* block was renamed to *"helpers"* in v5.0 +- The *"actions"* block is added in v5.0 +- The *"cell"* block is added in v5.2 **Related articles:** - [Configuration](configuration.md#toolbar) diff --git a/docs/configuration.md b/docs/configuration.md index 12c8341f..17cdd9a2 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -10,13 +10,19 @@ You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. Th ## Toolbar -The toolbar of the Spreadsheet consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar: "undo", "colors", "decoration", "align", "format", "actions", "helpers". You can add more blocks from the list: "lock", "clear", "rows", "columns", "file". +The toolbar of the Spreadsheet consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar: "undo", "colors", "decoration", "align", "cell", "format", "actions". You can add more blocks from the list: "lock", "clear", "rows", "columns", "file", "help". The structure of toolbar can be adjusted via the [](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls. -You can also specify your own structure of the toolbar by enumerating necessary elements in the **toolbarBlocks** array in the desired order, for example: "helpers", "colors", "align", "decoration", "lock", "clear". +You can also specify your own structure of the toolbar by enumerating necessary elements in the **toolbarBlocks** array in the desired order, for example: "colors", "align", "cell", "decoration", "lock", "clear". + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] +}); +~~~ Toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack. diff --git a/docs/customization.md b/docs/customization.md index 532094a3..93ea27f6 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -115,16 +115,16 @@ spreadsheet.toolbar.data.remove("control-id"); The [default toolbar](/#toolbar) contains the following blocks of controls: - the **Undo** block - - the *Undo* button (id:"undo") - - the *Redo* button (id:"redo") + - the *Undo* button (id: "undo") + - the *Redo* button (id: "redo") - the **Colors** block - - the *Text color* button (id:"color") - - the *Background color* button (id:"background") + - the *Text color* button (id: "color") + - the *Background color* button (id: "background") - the **Decoration** block - - the *Bold* button (id:"font-weight-bold") - - the *Italic* button (id:"font-style-italic") - - the *Underline* button (id:"text-decoration-underline") - - the *Strikethrough* button (id:"text-decoration-line-through") + - the *Bold* button (id: "font-weight-bold") + - the *Italic* button (id: "font-style-italic") + - the *Underline* button (id: "text-decoration-underline") + - the *Strikethrough* button (id: "text-decoration-line-through") - the **Align** block - the **Horizontal align** sub-block - the *Left* button (id: "halign-left") @@ -137,35 +137,37 @@ The [default toolbar](/#toolbar) contains the following blocks of controls: - the **Text wrapping** sub-block - the *Clip* button (id: "multiline-clip") - the *Wrap* button (id: "multiline-wrap") - - the **Merge/Unmerge** button (id: "merge") +- the **Cell** block + - the *Border* button (id: "border") + - the *Merge/Unmerge* button (id: "merge") - the **Format** block - - the *Format* menuItem (id:"format") + - the *Format* menuItem (id: "format") - the **Actions** block - - the *Filter* button (id:"filter") -- the **Helpers** block - - the *Link* button (id:"link") - - the *Help* button (id:"help") + - the *Filter* button (id: "filter") + - the *Insert link* button (id: "link") It is also possible to add the blocks enumerated below: - the **Lock** block - - the *Lock* button (id:"lock") + - the *Lock* button (id: "lock") - the **Clear** block - - the *Clear group* menuItem (id:"clear-group") - - the *Clear value* menuItem (id:"clear-value") - - the *Clear styles* menuItem (id:"clear-styles") - - the *Clear all* menuItem (id:"clear-all") + - the *Clear group* menuItem (id: "clear-group") + - the *Clear value* menuItem (id: "clear-value") + - the *Clear styles* menuItem (id: "clear-styles") + - the *Clear all* menuItem (id: "clear-all") - the **Rows** block - - the *Add row* button (id:"add-row") - - the *Remove row* button (id:"remove-row") + - the *Add row* button (id: "add-row") + - the *Remove row* button (id: "remove-row") - the **Columns** block - - the *Add column* button (id:"add-col") - - the *Remove column* button (id:"remove-col") + - the *Add column* button (id: "add-col") + - the *Remove column* button (id: "remove-col") - the **File** block - - the *Export* menuItem (id:"export") - - the *"Microsoft Excel(.xlsx)"* menuItem (id:"export-xlsx") - - the *Import* menuItem (id:"import") - - the *"Microsoft Excel(.xlsx)"* menuItem (id:"import-xlsx") + - the *Export* menuItem (id: "export") + - the *"Microsoft Excel(.xlsx)"* menuItem (id: "export-xlsx") + - the *Import* menuItem (id: "import") + - the *"Microsoft Excel(.xlsx)"* menuItem (id: "import-xlsx") +- the **Help** block + - the *Help* button (id: "help") ### Adding controls diff --git a/docs/index.md b/docs/index.md index 946ebc73..f5de9de2 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 6 default blocks of controls: "undo", "colors", "decoration", "align", "format", "actions", "helpers". You can [change the toolbar structure](configuration.md#toolbar) and add more blocks, or change the order of the blocks. +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. ![Spreadsheet Toolbar](assets/overview_toolbar.png) diff --git a/docs/migration.md b/docs/migration.md index 3a682ebb..a6a68087 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -6,6 +6,40 @@ description: You can learn about migration in the documentation of the DHTMLX Ja # Migration to newer versions +## 5.1 -> 5.2 + +In v5.2 the [toolbarBlocks](api/spreadsheet_toolbarblocks_config.md) property is modified in the following way: + +- the default set of toolbar options is extended by the new *"cell"* option. It includes the *Border* button and the *Merge* button (previously, it was in the *"align"* block) +- the *"actions"* toolbar block is extended with the *Insert link* button (previously, it was in the *"helpers"* block) +- the *"helpers"* toolbar block is renamed to *"help"* and isn't included in the default set of toolbar options + +~~~jsx title="Before v5.2" {9} +// default configuration +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "actions", + "helpers" +] +~~~ + +~~~jsx title="From v5.2" {7} +// default configuration +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "cell", + "format", + "actions" +] +~~~ + ## 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.