Skip to content

[add] "font" toolbar block, "font-size" control, complete related guides #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mafanya23 wants to merge 1 commit into
base: 6.0
Choose a base branch
from
+35 −10
Open

[add] "font" toolbar block, "font-size" control, complete related guides #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/api/spreadsheet_toolbarblocks_config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ toolbarBlocks?: array;
### Default config

~~~jsx
toolbarBlocks: ["undo", "colors", "decoration", "align", "cell", "format", "actions"]
toolbarBlocks: ["undo", "colors", "font", "decoration", "align", "cell", "format", "actions"]
~~~

### Example
Expand All @@ -30,6 +30,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
toolbarBlocks: [
"undo",
"colors",
"font",
"decoration",
"align",
"cell",
Expand Down Expand Up @@ -59,6 +60,7 @@ Check how you can [customize the toolbar](customization.md/#toolbar).

**Change log:**

- The *"font"* block was added in v6.0
- The *"cell"* block was added in v5.2
- The *"actions"* block was added in v5.0

Expand Down
18 changes: 9 additions & 9 deletions docs/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ 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", "cell", "format", "actions". You can add more blocks from the list: "lock", "clear", "rows", "columns", "file", "help".
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"`, `"font"`, `"decoration"`, `"align"`, `"cell"`, `"format"`, `"actions"`. You can add more blocks from the list: `"lock"`, `"clear"`, `"rows"`, `"columns"`, `"file"`, `"help"`.

<iframe src="https://snippet.dhtmlx.com/kpm017nx?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="450"></iframe>

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.
The structure of toolbar can be adjusted via the [`toolbarBlocks`](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: "colors", "align", "cell", "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", {
Expand All @@ -28,26 +28,26 @@ Toolbar is [highly customizable](customization.md). You can add new controls, ch

## Editing bar

Since the structure of Spreadsheet is flexible, you can switch on/off the editing bar to get the desired look and feel of the component. Use the [](api/spreadsheet_editline_config.md) configuration option to hide/show
Since the structure of Spreadsheet is flexible, you can switch on/off the editing bar to get the desired look and feel of the component. Use the [`editLine`](api/spreadsheet_editline_config.md) configuration option to hide/show
the editing bar.

<iframe src="https://snippet.dhtmlx.com/unem2jkh?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="400"></iframe>

## Number of rows and columns

When Spreadsheet is initialized, it has the initial configuration of grid which consists of 1000 columns and 25 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [](api/spreadsheet_colscount_config.md) and [](api/spreadsheet_rowscount_config.md) options for this purpose.
When Spreadsheet is initialized, it has the initial configuration of grid which consists of 26 columns and 1000 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [`colsCount`](api/spreadsheet_colscount_config.md) and [`rowsCount`](api/spreadsheet_rowscount_config.md) options for this purpose.

<iframe src="https://snippet.dhtmlx.com/vc3mstsw?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="400"></iframe>

## Menu

The menu of the Spreadsheet is hidden by default. You can switch it on/off via the corresponding configuration option [](api/spreadsheet_menu_config.md):
The menu of the Spreadsheet is hidden by default. You can switch it on/off via the corresponding configuration option [`menu`](api/spreadsheet_menu_config.md):

<iframe src="https://snippet.dhtmlx.com/uulux27v?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="400"></iframe>

## Read-only mode

It is also possible to enable the read-only mode to prevent editing of Spreadsheet cells via the [](api/spreadsheet_readonly_config.md) configuration option.
It is also possible to enable the read-only mode to prevent editing of Spreadsheet cells via the [`readonly`](api/spreadsheet_readonly_config.md) configuration option.

You can also [customize the readonly behavior of Spreadsheet](customization.md#custom-read-only-mode).

Expand All @@ -57,7 +57,7 @@ You can also [customize the readonly behavior of Spreadsheet](customization.md#c

There are 7 default formats that can be applied to the values of cells: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text".

You can redefine configuration of default formats or specify your own number format via the [](api/spreadsheet_formats_config.md) config option. Check the details in the [Number Formatting](number_formatting.md) article.
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.

<iframe src="https://snippet.dhtmlx.com/4c0c0zm7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="550"></iframe>

Expand All @@ -66,7 +66,7 @@ You can redefine configuration of default formats or specify your own number for
DHTMLX Spreadsheet provides the possibility to import/export data in the Excel format. The component uses WebAssembly-based libraries: [Excel2Json](https://github.com/dhtmlx/excel2json) and [JSON2Excel](https://github.com/dhtmlx/json2excel) for import/export of data.

After installing the necessary library, you need to set path to the **worker.js** file (either local or at CDN)
via the corresponding configuration option - [](api/spreadsheet_importmodulepath_config.md) or [](api/spreadsheet_exportmodulepath_config.md).
via the corresponding configuration option: [`importModulePath`](api/spreadsheet_importmodulepath_config.md) or [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md).

All the details are given in the [Data Loading and Export](loading_data.md) article.

Expand Down
23 changes: 23 additions & 0 deletions docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,8 @@ The [default toolbar](/#toolbar) contains the following blocks of controls:
- the **Colors** block
- the *Text color* button (id: "color")
- the *Background color* button (id: "background")
- the **Font** block
- the *Font size* combobox (id: "font-size")
- the **Decoration** block
- the *Bold* button (id: "font-weight-bold")
- the *Italic* button (id: "font-style-italic")
Expand Down Expand Up @@ -234,6 +236,27 @@ In the example below the Undo button is removed from the toolbar:
spreadsheet.toolbar.data.remove("undo");
~~~

### Custom font size

You can redefine the list of available font sizes in the **Font** toolbar block by removing the existing items from the `"font-size"` combobox and adding your own:

~~~jsx
const FONT_SIZES = [8, 10, 12, 14, 16, 20];

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
// configuration options
});

spreadsheet.toolbar.data.removeAll("font-size");
spreadsheet.toolbar.data.add(
FONT_SIZES.map(size => ({ value: size, id: `font-size-${size}` })),
-1,
"font-size"
);

spreadsheet.parse(dataset);
~~~

## Menu

### Default controls
Expand Down