From edae9e1c87e108bb4de47a0f42434b0ff3908dac Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 1 Jul 2026 17:30:34 +0300 Subject: [PATCH 01/16] [update] grammar and API formatting in docs guides Grammar and writing-style review (article-grammar) of the first batch of top-level docs articles: - angular_integration, awaitredraw, configuration, customization, data_formatting - fix wordiness, tense, articles, passive voice and redundant phrasing - wrap API names (methods, properties, params, types, classes) in backticks; replace bold/italic API names with backticks - format file names and paths as italic - unify readonly -> read-only wording --- docs/angular_integration.md | 34 ++++++++++++------------- docs/awaitredraw.md | 2 +- docs/configuration.md | 18 +++++++------- docs/customization.md | 49 ++++++++++++++++++------------------- docs/data_formatting.md | 12 ++++----- 5 files changed, 57 insertions(+), 58 deletions(-) diff --git a/docs/angular_integration.md b/docs/angular_integration.md index 40b43e43..4a841f78 100644 --- a/docs/angular_integration.md +++ b/docs/angular_integration.md @@ -18,14 +18,14 @@ DHTMLX Spreadsheet is compatible with **Angular**. We have prepared code example Before you start to create a new project, install [**Angular CLI**](https://angular.dev/tools/cli) and [**Node.js**](https://nodejs.org/en/). ::: -Create a new **my-angular-spreadsheet-app** project using Angular CLI. Run the following command for this purpose: +Create a new *my-angular-spreadsheet-app* project using Angular CLI. Run the following command: ~~~json ng new my-angular-spreadsheet-app ~~~ :::note -If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating a new Angular app. ::: The command above installs all the necessary tools, so you don't need to run any additional commands. @@ -45,25 +45,25 @@ yarn yarn start ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app should run on localhost (for instance `http://localhost:3000`). ## Creating Spreadsheet -Now you should get the DHTMLX Spreadsheet source code. First of all, stop the app and proceed with installing the Spreadsheet package. +Now you should get the DHTMLX Spreadsheet source code. First, stop the app and install the Spreadsheet package. ### Step 1. Package installation -Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only. +Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow the steps in the README file. Note that trial Spreadsheet is available for 30 days only. ### Step 2. Component creation -Now you need to create an Angular component, to add Spreadsheet into the application. Create the **spreadsheet** folder in the **src/app/** directory, add a new file into it and name it **spreadsheet.component.ts**. Then complete the steps described below. +Now you need to create an Angular component to add Spreadsheet into the application. Create the *spreadsheet* folder in the *src/app/* directory, add a new file into it and name it *spreadsheet.component.ts*. Then complete the steps described below. #### Importing source files Open the file and import Spreadsheet source files. Note that: -- if you use PRO version and install the Spreadsheet package from a local folder, the imported path looks like this: +- if you use the PRO version and install the Spreadsheet package from a local folder, the imported path looks like this: ~~~jsx import { Spreadsheet } from 'dhx-spreadsheet-package'; @@ -111,7 +111,7 @@ export class SpreadsheetComponent implements OnInit, OnDestroy { #### Adding styles -To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the **spreadsheet.component.css** file in the **src/app/spreadsheet/** directory and specify important styles for Spreadsheet and its container: +To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the *spreadsheet.component.css* file in the *src/app/spreadsheet/* directory and specify important styles for Spreadsheet and its container: ~~~css title="spreadsheet.component.css" /* import Spreadsheet styles */ @@ -133,7 +133,7 @@ body { #### Loading data -To add data into Spreadsheet, you need to provide a data set. You can create the **data.ts** file in the **src/app/spreadsheet/** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. You can create the *data.ts* file in the *src/app/spreadsheet/* directory and add some data into it: ~~~jsx title="data.ts" export function getData(): any { @@ -178,7 +178,7 @@ export function getData(): any { } ~~~ -Then open the ***spreadsheet.component.ts*** file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below. +Then open the *spreadsheet.component.ts* file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below. ~~~jsx {2,18,21} title="spreadsheet.component.ts" import { Spreadsheet } from "@dhx/trial-spreadsheet"; @@ -210,13 +210,13 @@ export class SpreadsheetComponent implements OnInit, OnDestroy { } ~~~ -Now the Spreadsheet component is ready to use. When the element will be added to the page, it will initialize the Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties. +Now the Spreadsheet component is ready to use. When the element is added to the page, it initializes Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties. #### Handling events -When a user makes some action in the Spreadsheet, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +When a user performs an action in Spreadsheet, the widget invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). -Open the **spreadsheet.component.ts** file and complete the `ngOnInit()` method as in: +Open the *spreadsheet.component.ts* file and complete the `ngOnInit()` method as in: ~~~jsx {5-8} title="spreadsheet.component.ts" // ... @@ -236,7 +236,7 @@ ngOnDestroy() { ### Step 3. Adding Spreadsheet into the app -To add the ***SpreadsheetComponent*** component into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one: +To add the `SpreadsheetComponent` component into the app, open the *src/app/app.component.ts* file and replace the default code with the following one: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -250,7 +250,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *SpreadsheetComponent* as shown below: +Then create the *app.module.ts* file in the *src/app/* directory and specify the `SpreadsheetComponent` as shown below: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -267,7 +267,7 @@ import { SpreadsheetComponent } from "./spreadsheet/spreadsheet.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +The last step is to open the *src/main.ts* file and replace the existing code with the following one: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -281,4 +281,4 @@ After that, you can start the app to see Spreadsheet loaded with data on a page. ![DHTMLX Spreadsheet initialized with sample data in an Angular application](/img/integrations/trial_spreadsheet.png) -Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo). +Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. You can find the final example on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo). diff --git a/docs/awaitredraw.md b/docs/awaitredraw.md index e51c9452..383ee873 100644 --- a/docs/awaitredraw.md +++ b/docs/awaitredraw.md @@ -8,7 +8,7 @@ description: You can explore the AwaitRedraw helper in the documentation of the Some API methods of DHTMLX Spreadsheet take effect only after the component is rendered on the page. In some cases this can take a moment, so you need to wait until the browser completes rendering before running the next piece of code. -For such cases, you can use the **dhx.awaitRedraw** helper. It tracks the rendering cycle and runs your code as soon as Spreadsheet completes its rendering. +For such cases, you can use the `dhx.awaitRedraw` helper. It tracks the rendering cycle and runs your code as soon as Spreadsheet completes its rendering. ~~~js dhx.awaitRedraw().then(() => { diff --git a/docs/configuration.md b/docs/configuration.md index 03892a61..ad419a74 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -6,7 +6,7 @@ description: You can learn about the configuration of the DHTMLX JavaScript Spre # Configuration -You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the toolbar appearance and control the visibility of the menu and the editing bar. You can also initialize Spreadsheet in the readonly mode, if needed. +You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the toolbar appearance and control the visibility of the menu and the editing bar. You can also initialize Spreadsheet in read-only mode, if needed. ## Toolbar @@ -14,7 +14,7 @@ The toolbar of the Spreadsheet consists of several blocks of controls that can b -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. +The structure of the 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"`. @@ -24,7 +24,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { }); ~~~ -Toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack. +The toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack. ## Editing bar @@ -35,7 +35,7 @@ the editing bar. ## Number of rows and columns -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. +When Spreadsheet is initialized, it starts with a grid 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. @@ -47,15 +47,15 @@ The menu of the Spreadsheet is hidden by default. You can switch it on/off via t ## Read-only mode -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 enable 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). +You can also [customize the read-only behavior of Spreadsheet](customization.md#custom-read-only-mode). ## 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". +You can apply 7 default formats to cell values: "Common", "Number", "Percent", "Currency", "Date", "Time", "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. @@ -63,9 +63,9 @@ You can redefine configuration of default formats or specify your own number for ## Path to export/import modules -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. +DHTMLX Spreadsheet can import and export data in 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) +After installing the necessary library, you need to set the path to the *worker.js* file (either local or at CDN) 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. diff --git a/docs/customization.md b/docs/customization.md index 627615db..549de787 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -6,7 +6,7 @@ description: You can learn about the customization of the DHTMLX JavaScript Spre # Customization -You can customize the appearance, structure and functionality of toolbar, menu and context menu and define custom read-only behavior for Spreadsheet. +You can customize the appearance, structure and functionality of the toolbar, menu, and context menu and define custom read-only behavior for Spreadsheet. ## Default and custom icons @@ -23,44 +23,43 @@ For example, you can use the [Font Awesome](https://fontawesome.com/) icon pack crossorigin="anonymous"> ~~~ -Then you can use the name of the icon as the value of the **icon** property in the object with the control parameters for toolbar, menu or context menu. See details below. +Then you can use the name of the icon as the value of the `icon` property in the object with the control parameters for toolbar, menu or context menu. See details below. ## Controls types and operations ### Types -There are the following types of controls you can add: *button*, *menuItem*, *separator* and *spacer*. +You can add the following types of controls: `button`, `menuItem`, `separator`, and `spacer`. -The **button** object has the following properties: +The `button` object has the following properties: -- **type** - the type of a button, set it to "button" -- **id** - the id of a button -- **icon** - the name of an icon from the used icon font -- **hotkey** - the name of the hot key for a button -- **value** - the value of a button -- **tooltip** - the tooltip of a button -- **twoState** - the flag that defines whether a button can be used in two states -- **active** - the state of a button: *true* - active, *false* - inactive +- `type` - the type of a button, set it to "button" +- `id` - the id of a button +- `icon` - the name of an icon from the used icon font +- `hotkey` - the name of the hot key for a button +- `value` - the value of a button +- `tooltip` - the tooltip of a button +- `twoState` - the flag that defines whether a button can be used in two states +- `active` - the state of a button: `true` - active, `false` - inactive -The **menuItem** object has the properties below: +The `menuItem` object has the properties below: -- **type** - the type of a menu item, set it to "menuItem" -- **id** - the id of a menu item -- **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**) +- `type` - the type of a menu item, set it to "menuItem" +- `id` - the id of a menu item +- `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`) -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. +The data collection API of the **toolbar**, **menu**, and **context menu** lets you manage controls: add custom ones, remove those you don't need, or update them — for example, change their icons. ### Adding controls To add a new control, apply the `spreadsheet.{name}.data.add()` method. It takes the parameters below: -- **config** - (*object*) an object with the control config -- **index** - (*number*) the index of the position to place the control into -- **parent** - (*string*) the id of a parent control (for the *menuItem* type) +- `config` - (`object`) an object with the control config +- `index` - (`number`) the index of the position to place the control into +- `parent` - (`string`) the id of a parent control (for the `menuItem` type) For a button: @@ -435,7 +434,7 @@ spreadsheet.contextMenu.data.remove("lock"); ## Custom read-only mode -Besides applying the [read-only mode](configuration.md#read-only-mode) to the whole Spreadsheet, you can block certain operations via the events the name of which starts with **before**, e.g.: +Besides applying the [read-only mode](configuration.md#read-only-mode) to the whole Spreadsheet, you can block specific operations with the events whose names start with `before`, for example: - [](api/spreadsheet_beforeeditstart_event.md) - [](api/spreadsheet_beforeaction_event.md) diff --git a/docs/data_formatting.md b/docs/data_formatting.md index 8d1fd75f..607b5dbf 100644 --- a/docs/data_formatting.md +++ b/docs/data_formatting.md @@ -14,8 +14,8 @@ The toolbar of DHTMLX Spreadsheet contains several sections with buttons for mod What you can do: -- change the color of a text and its background via color picker linked to the **Text color** button -- change the color of text background via color picker linked to the **Background color** button +- change **text color** with the color picker of the **Text color** button +- change **background color** with the color picker of the **Background color** button - apply *Bold*, *Italic* and *Underline* styles to a text - apply *Strikethrough* formatting to a text @@ -75,7 +75,7 @@ When you change the width of the column, text wrapping adjusts automatically. ## Removing styles and values -To clear styles applied to data in a cell, or values entered into cells, or remove both data and formatting, you can choose one of the two ways: +You can clear cell values, cell styles, or both. Choose one of two ways: 1\. via the toolbar button: @@ -95,16 +95,16 @@ To clear styles applied to data in a cell, or values entered into cells, or remo ## Styled borders for cells -You can add a styled border(s) for a cell or a group of cells. +You can add styled borders for a cell or a group of cells. ### Setting styled borders -- Select the necessary cell or a group of cells to set a styled border(s) for +- Select the necessary cell or a group of cells to set styled borders for - Click the **Border** button in the toolbar and choose the desired type of the border, its color and style ![DHTMLX Spreadsheet Border toolbar button with border type, color, and style options](/img/styled_cell_border.png) -### Removing styled borders +### Removing styled borders - Select the necessary cell or a group of cells from which you want to remove styled borders - Click the **Border** button in the toolbar and choose the *Clear borders* option From 6de54b0cf36f5b5c64c5f677247e046ce9d174d7 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 6 Jul 2026 12:55:09 +0300 Subject: [PATCH 02/16] [update] grammar in data/excel/functions guides Grammar and writing-style review (article-grammar) of the second batch of top-level docs articles: - excel_import_export, filtering_data, functions - remove passive voice, wordiness and redundant phrasing - fix tense, articles and 'may' -> 'can' in filtering guide - data_search and formulas_locale needed no changes --- docs/excel_import_export.md | 8 ++++---- docs/filtering_data.md | 10 +++++----- docs/functions.md | 12 ++++++------ 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/excel_import_export.md b/docs/excel_import_export.md index c844a5a4..39a67c92 100644 --- a/docs/excel_import_export.md +++ b/docs/excel_import_export.md @@ -8,7 +8,7 @@ description: You can learn about the excel import and export in the documentatio ## Import from Excel -You can load data from an Excel file into Spreadsheet. There is quite a simple way to do this: +You can load data from an Excel file into Spreadsheet. To do this: 1\. Click the **Import** button in the toolbar and select *Microsoft Excel (.xlsx)* @@ -20,11 +20,11 @@ Go to: *File -> Import As... -> Microsoft Excel (.xlsx)* in the menu ![DHTMLX Spreadsheet File menu with the Import As option for Microsoft Excel XLSX files](/img/file_import.png) -2\. Select an Excel file on your computer and its content will be imported into an opened sheet. +2\. Select an Excel file on your computer, and its content is imported into the open sheet. ## Export to Excel -The data you've entered into Spreadsheet can be exported to an Excel file. Complete the steps below: +You can export the data you've entered into Spreadsheet to an Excel file. Complete the steps below: 1\. Click the **Export** button in the toolbar: @@ -36,4 +36,4 @@ Go to: *File -> Download As... -> Microsoft Excel (.xlsx)* in the menu ![DHTMLX Spreadsheet File menu with the Download As option for Microsoft Excel XLSX export](/img/file_export.png) -2\. Check the directory with downloaded files on your computer to find a downloaded Excel file with data from Spreadsheet. +2\. Check your downloads directory to find the Excel file with data from Spreadsheet. diff --git a/docs/filtering_data.md b/docs/filtering_data.md index 18a5ab66..cbaae6fb 100644 --- a/docs/filtering_data.md +++ b/docs/filtering_data.md @@ -6,9 +6,9 @@ description: You can learn about data filtering in the documentation of the DHTM # Filtering data -You may filter data in the spreadsheet to show only the records that meet the criteria you specify. +You can filter data in the spreadsheet to show only the records that meet the criteria you specify. -To activate the filtering functionality, you can use either of two ways: +To activate filtering, use one of two ways: - Set focus on a cell or select a range of cells and click the **Filter** button in the toolbar @@ -18,7 +18,7 @@ To activate the filtering functionality, you can use either of two ways: ![DHTMLX Spreadsheet Data menu with the Filter option for activating column filters](/img/filter_menu.png) -After that, a **filter** icon appears on the right side of the header of each column in the range. +After that, a **filter** icon appears on the right of each column header in the range. ## Filtering by condition @@ -54,9 +54,9 @@ To clear a filter, click the **filter** icon in the column header, click the **S ## Removing filters -To disable the filtering functionality, do one of the following: +To disable filtering, do one of the following: - click the **Filter** button in the toolbar - or go to: *Data -> Filter* in the menu -The **filter** icons will disappear from the column headers and all hidden records will be displayed. \ No newline at end of file +The **filter** icons disappear from the column headers, and all hidden records reappear. \ No newline at end of file diff --git a/docs/functions.md b/docs/functions.md index 2baecfb5..749c9ab4 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -6,7 +6,7 @@ description: You can learn about the formulas and functions of the DHTMLX JavaSc # Formulas and functions -Starting from v4.0, the package of DHTMLX Spreadsheet includes a set of predefined formulas that can be used for different types of calculations of strings and numbers. The formulas are compatible with Excel and Google Sheets. +Starting from v4.0, the package of DHTMLX Spreadsheet includes a set of predefined formulas for different types of calculations of strings and numbers. The formulas are compatible with Excel and Google Sheets. :::note Lowercase letters in formulas are automatically converted to upper case. @@ -20,7 +20,7 @@ Here's a list of all the available functions with detailed descriptions. ### Boolean operators -You can compare two values via using logical expressions that in any given case will only return either TRUE or FALSE. +You can compare two values with logical expressions that return either TRUE or FALSE. | Operator | Example | Description | | :------- | :------------ | :------------------------------------------------------------------------------------------------------- | @@ -1435,7 +1435,7 @@ Check the example in our [snippet tool](https://snippet.dhtmlx.com/wux2b35b). ## Getting cell formula -Starting with v4.1, you can get the formula applied to a cell via the [`getFormula()`](api/spreadsheet_getformula_method.md) method. The method takes the id of the cell as a parameter: +Starting with v4.1, you can retrieve the formula applied to a cell with the [`getFormula()`](api/spreadsheet_getformula_method.md) method. The method takes the id of the cell as a parameter: ~~~js var formula = spreadsheet.getFormula("B2"); @@ -1444,7 +1444,7 @@ var formula = spreadsheet.getFormula("B2"); ## Popup with formula description -When you enter a formula, a popup with description of the function and its parameters appears. +When you enter a formula, a popup with a description of the function and its parameters appears. ![DHTMLX Spreadsheet formula popup showing a function description and parameters while typing](/img/formula_popup.png) @@ -1454,7 +1454,7 @@ You can modify the default locale for the popup with formula parameters and add ## Custom formulas -Starting with v6.0, you can register custom formula functions via the [`addFormula()`](api/spreadsheet_addformula_method.md) method. Once registered, the formula is available in any cell by its uppercase name. +Starting with v6.0, you can register custom formula functions with the [`addFormula()`](api/spreadsheet_addformula_method.md) method. Once registered, the formula is available in any cell by its uppercase name. The method takes two parameters: the formula name and a synchronous handler function that receives the resolved cell values as arguments and returns the result: @@ -1464,7 +1464,7 @@ spreadsheet.addFormula("DOUBLE", (value) => { }); ~~~ -After that, the formula can be used in cells just like any built-in function: +After that, you can use the formula in cells just like any built-in function: ~~~js spreadsheet.parse([ From 971d3966c9a037e3a6c6a2919a123aca6337fea6 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 6 Jul 2026 13:22:26 +0300 Subject: [PATCH 03/16] [update] grammar in overview and start guides Grammar and writing-style review (article-grammar) of the third batch of top-level docs articles: - guides, handling_events, how_to_start, index - fix typo 'guide your' -> 'guide you', tense, articles and passive/wordy phrasing; tone down puffery - correct context menu item count (5 -> 6) in overview - wrap API names in backticks (parse, toolbarBlocks, event methods); format index.html as italic; unify readonly -> read-only - hotkeys needed no changes --- docs/guides.md | 6 +++--- docs/handling_events.md | 6 +++--- docs/how_to_start.md | 18 +++++++++--------- docs/index.md | 18 +++++++++--------- 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/guides.md b/docs/guides.md index b921481e..97f6411f 100644 --- a/docs/guides.md +++ b/docs/guides.md @@ -6,7 +6,7 @@ description: You can study developer and user guides in the documentation of the # Guides -DHTMLX Spreadsheet provides a range of great features to build a perfect application that include: support for import/export of data in different formats, handy work with content and style of data, adaptable structure of a spreadsheet, readonly mode, wide possibilities for look and feel customization, integration with famous frameworks, etc. +DHTMLX Spreadsheet includes a wide range of features: import and export of data in different formats, convenient work with cell content and styles, an adaptable spreadsheet structure, a read-only mode, extensive look-and-feel customization, and integration with popular frameworks. ## Developer guides @@ -20,7 +20,7 @@ Discusses the main stages of installing and creating Spreadsheet on a page, adju ### Exploring Spreadsheet features -Shows the ways of loading data into Spreadsheet, handling events and using main functionality. It also dwells on the ways of customizing the main parts of Spreadsheet. +Shows how to load data into Spreadsheet, handle events, and use the main functionality. It also covers customizing the main parts of Spreadsheet. - [Data loading and export](loading_data.md) - [Work with Spreadsheet](working_with_ssheet.md) @@ -40,7 +40,7 @@ Shows the ways of loading data into Spreadsheet, handling events and using main ## User guides -The User guides are provided to make work with Spreadsheet easy for your end users. +The user guides make working with Spreadsheet easy for your users. - [Hot keys list](hotkeys.md) - [Work with sheets](work_with_sheets.md) diff --git a/docs/handling_events.md b/docs/handling_events.md index ea4512c4..a8c2b8d0 100644 --- a/docs/handling_events.md +++ b/docs/handling_events.md @@ -10,7 +10,7 @@ description: You can learn about event handling in the DHTMLX JavaScript Spreads ## Attaching event listeners -You can attach event listeners with the [spreadsheet.events.on()](api/eventsbus_on_method.md) method: +You can attach event listeners with the [`spreadsheet.events.on()`](api/eventsbus_on_method.md) method: ~~~jsx spreadsheet.events.on("AfterColumnAdd", function(cells){ @@ -20,7 +20,7 @@ spreadsheet.events.on("AfterColumnAdd", function(cells){ ## Detaching event listeners -To detach events, use [spreadsheet.events.detach()](api/eventsbus_detach_method.md): +To detach events, use [`spreadsheet.events.detach()`](api/eventsbus_detach_method.md): ~~~jsx var addcolumn = spreadsheet.events.on("AfterColumnAdd", function(cells){ @@ -31,7 +31,7 @@ spreadsheet.events.detach(addcolumn); ## Calling events -To call events, use [spreadsheet.events.fire()](api/eventsbus_fire_method.md): +To call events, use [`spreadsheet.events.fire()`](api/eventsbus_fire_method.md): ~~~jsx spreadsheet.events.fire("name",args); diff --git a/docs/how_to_start.md b/docs/how_to_start.md index a84a258a..0b5f5584 100644 --- a/docs/how_to_start.md +++ b/docs/how_to_start.md @@ -6,13 +6,13 @@ description: You can learn how to start with the DHTMLX JavaScript Spreadsheet l # How to start -This clear and comprehensive tutorial will guide your through the steps you need to complete in order to get a full-functional DHTMLX Spreadsheet on a page. The component will be especially effective for managing large amounts of data when you need to save the results of calculations and reproduce them. +This tutorial guides you through the steps to get a fully functional DHTMLX Spreadsheet on a page. The component is especially effective for managing large amounts of data when you need to save the results of calculations and reproduce them. ![DHTMLX Spreadsheet initialized with a sample data table in a browser window](/img/how_to_start.png) ## Step 1. Including source files -Start from creating an HTML file and call it *index.html*. Then proceed to include Spreadsheet source files into the created file. [The detailed description of the DHTMLX Spreadsheet package is given here](initialization.md#including-source-files). +Start by creating an HTML file named *index.html*. Then include Spreadsheet source files in it. [The detailed description of the DHTMLX Spreadsheet package is given here](initialization.md#including-source-files). There are two necessary files: @@ -48,20 +48,20 @@ You can import JavaScript Spreadsheet into your project using the `yarn` or `npm #### Installing trial Spreadsheet via npm or yarn :::info -If you want to use the trial version of Spreadsheet, download the [**trial Spreadsheet package**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) and follow the steps mentioned in the *README* file. Note that the trial Spreadsheet is available 30 days only. +If you want to use the trial version of Spreadsheet, download the [**trial Spreadsheet package**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) and follow the steps in the *README* file. Note that the trial Spreadsheet is available for 30 days only. ::: #### Installing PRO Spreadsheet via npm or yarn :::info -You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Please note that access to the private **npm** is available only while your proprietary Spreadsheet license is active. +You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Note that access to the private **npm** is available only while your proprietary Spreadsheet license is active. ::: ## Step 2. Creating Spreadsheet -Now you are ready to add Spreadsheet to the page. First, let's create a DIV container and then place DHTMLX Spreadsheet into it. So, your steps will be: +Now you are ready to add Spreadsheet to the page. First, create a DIV container and place DHTMLX Spreadsheet into it. Your steps are: -- to specify a DIV container in the **index.html** file +- to specify a DIV container in the *index.html* file - to initialize DHTMLX Spreadsheet using the `dhx.Spreadsheet` constructor As parameters, the constructor function takes the HTML container to place Spreadsheet into and the Spreadsheet configuration object. @@ -91,7 +91,7 @@ As parameters, the constructor function takes the HTML container to place Spread Next you can specify additional configuration options you want the Spreadsheet component to have when initialized besides the default ones. -There are several options you can use to adjust the look and feel of Spreadsheet to your needs, e.g.: **toolbarBlocks**, **rowsCount** and **colsCount**. [Check the details](configuration.md). +You can adjust the look and feel of Spreadsheet with several options, for example: `toolbarBlocks`, `rowsCount`, and `colsCount`. [Check the details](configuration.md). ~~~jsx const spreadsheet = new dhx.Spreadsheet("spreadsheet", { @@ -105,7 +105,7 @@ The configuration of DHTMLX Spreadsheet is quite flexible, so you can change it ## Step 4. Loading data into Spreadsheet -The last step is to populate Spreadsheet with data. DHTMLX Spreadsheet takes data in JSON format. Besides data you can pass necessary styles in a dataset. While loading inline data, you need to use the **parse()** method and pass an object with data to it as in the example below: +The last step is to populate Spreadsheet with data. DHTMLX Spreadsheet takes data in JSON format. Besides data you can pass necessary styles in a dataset. While loading inline data, you need to use the `parse()` method and pass an object with data to it as in the example below: ~~~jsx title="data.json" const data = [ @@ -140,7 +140,7 @@ spreadsheet.parse(data); ## What's next -That's all. Just four simple steps and you have a handy tool for work with data in the tabular form. Now you can start working with your data or keep exploring the inner world of DHTMLX Spreadsheet. +That's all. In four steps you get a handy tool for working with tabular data. Now you can start working with your data or keep exploring DHTMLX Spreadsheet. - [Spreadsheet overview](/) - [](guides.md) diff --git a/docs/index.md b/docs/index.md index 5f8699ec..d70677e2 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,10 +7,10 @@ description: You can have an overview of the JavaScript Spreadsheet library in t # DHTMLX Spreadsheet overview -DHTMLX Spreadsheet 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. +DHTMLX Spreadsheet is a client-side JavaScript component for editing and formatting spreadsheet data online. It includes a configurable toolbar, handy menu and context menu, and an adjustable grid, supports hotkey navigation, loads data from external and local sources, and can localize the interface into the desired language. :::tip -There is a [User Guide](guides.md#user-guides) provided to make work with Spreadsheet easy for your end users +The [User Guide](guides.md#user-guides) makes working with Spreadsheet easy for your users. ::: ## Spreadsheet structure @@ -21,28 +21,28 @@ The **Toolbar** section is rather flexible. It contains several default blocks o ![DHTMLX Spreadsheet toolbar with undo, color, decoration, align, cell, format, and action controls](/img/overview_toolbar.png) -It is also possible to [customize the toolbar](customization.md#toolbar) by adding your own controls and updating the controls' configuration. +You can also [customize the toolbar](customization.md#toolbar) by adding your own controls and updating the controls' configuration. ### Editing line -The **editing line** can be used for two purposes: +The **editing line** serves two purposes: - to edit the content of the selected cell - to control changes made in the currently edited cell ![DHTMLX Spreadsheet editing line for editing cell content and tracking changes](/img/overview_editline.png) -You can switch the editing line off, if necessary via the corresponding [configuration option](configuration.md#editing-bar). +If necessary, you can switch the editing line off via the corresponding [configuration option](configuration.md#editing-bar). ### Grid -**Grid** represents a table with columns defined by letters and rows defined by numbers. Thus, a cell of the grid is defined by the column's letter and the row's number, e.g. C3. +The **Grid** is a table with columns defined by letters and rows defined by numbers. Thus, a cell of the grid is defined by the column's letter and the row's number, for example, C3. ![DHTMLX Spreadsheet grid with columns labeled by letters and numbered rows](/img/spreadsheet_init.png) ### 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. ![DHTMLX Spreadsheet context menu with Lock, Clear, Columns, Rows, Sort, and Insert link options](/img/overview_contextmenu.png) @@ -50,7 +50,7 @@ The [structure of Context menu is customizable](customization.md#context-menu) a ### Menu -The **Menu** section contains several blocks that combine most frequently used options from the Toolbar and Context Menu to provide quick and handy access to them. +The **Menu** section contains several blocks that combine the most frequently used options from the Toolbar and Context menu for quick access. By default the **Menu** section is hidden, but you can switch it on via the related [configuration option](configuration.md#menu). @@ -62,7 +62,7 @@ You can [modify the structure of the menu](customization.md#menu) by using custo Now you can get down to using DHTMLX Spreadsheet in your application. Follow the directions of the [How to Start](how_to_start.md) tutorial for guidance. -To dive deeper into the specificity of DHTMLX Spreadsheet, go into more profound manuals: +To learn more about DHTMLX Spreadsheet, see these guides: - [API overview](api/api_overview.md) - [Guides](guides.md) From 2a01c6cf995624ca0371ce1c0c4354e9e1c0b83a Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 6 Jul 2026 13:46:18 +0300 Subject: [PATCH 04/16] [update] grammar in init, data and migration guides Grammar and writing-style review (article-grammar) of the fourth batch of top-level docs articles: - initialization, loading_data, localization, merge_cells, migration - replace passive voice, future tense and wordy phrasing with active present-tense wording; tone down puffery - wrap API names in backticks (css, locked, link, value, text, toolbarBlocks, event methods); format worker.js/folders as italic; unify .xlsx in backticks; 'Please note that' -> 'Note that' --- docs/initialization.md | 12 ++++++------ docs/loading_data.md | 40 ++++++++++++++++++++-------------------- docs/localization.md | 8 ++++---- docs/merge_cells.md | 2 +- docs/migration.md | 14 +++++++------- 5 files changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/initialization.md b/docs/initialization.md index 9c3879b4..1490adc7 100644 --- a/docs/initialization.md +++ b/docs/initialization.md @@ -6,7 +6,7 @@ description: You can learn about the initialization of the DHTMLX JavaScript Spr # Initialization -This guide will give you detailed instructions on how to create DHTMLX Spreadsheet on a page to enrich your application with features of a mighty worksheet. Follow the steps below to get a ready-to-use component: +This guide describes how to create DHTMLX Spreadsheet on a page and add a full-featured worksheet to your application. Follow the steps below to get a ready-to-use component: 1. [Include the DHTMLX Spreadsheet source files on a page](#including-source-files). 2. [Create a container for DHTMLX Spreadsheet](#creating-container). @@ -32,10 +32,10 @@ Make sure that you set correct relative paths to these files: The structure of the Spreadsheet pack is the following: -- **sources** - the source code files of the library; they are easy-to-read and are mostly intended for debugging; -- **codebase** - the obfuscated code files of the library; they are much smaller and intended for use in production. **Include these files in your apps when they are ready**; -- **samples** - the code samples; -- **docs** - the full documentation of the component. +- *sources* - the source code files of the library; they are easy-to-read and are mostly intended for debugging; +- *codebase* - the obfuscated code files of the library; they are much smaller and intended for use in production. **Include these files in your apps when they are ready**; +- *samples* - the code samples; +- *docs* - the full documentation of the component. ## Creating container @@ -61,7 +61,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ### Configuration properties -See the full list of [properties](api/api_overview.md#spreadsheet-properties) that you can specify in the Spreadsheet configuration object in the [Spreadsheet API overview](api/api_overview.md#spreadsheet-properties) article. +See the full list of [properties](api/api_overview.md#spreadsheet-properties) that you can specify in the Spreadsheet configuration object. You can set configuration options during initialization as the second parameter of the constructor: diff --git a/docs/loading_data.md b/docs/loading_data.md index b3a04f51..a471319b 100644 --- a/docs/loading_data.md +++ b/docs/loading_data.md @@ -6,7 +6,7 @@ description: You can learn about loading data in the DHTMLX JavaScript Spreadshe # Data loading and export -You can populate DHTMLX Spreadsheet with a ready dataset that may include the data itself and styling for cells. The component supports two ways of data loading: +You can populate DHTMLX Spreadsheet with a prepared dataset that can include both cell data and styles. The component supports two ways to load data: - load from an external file - load from a local source @@ -15,7 +15,7 @@ The component also supports [export of data into an Excel file](#exporting-data) ## Preparing data -DHTMLX Spreadsheet expects data in the JSON format. +DHTMLX Spreadsheet expects data in JSON format. It can be a simple array with cell objects. Use this way if you need to create a data set for only one sheet. @@ -84,9 +84,9 @@ The ability to load merged cells is available only if you prepare data in a shee ### Setting styles for cells -You may need to define the cells styling in the data set. In this case the data should be an object with *separate properties* that describe data objects and CSS classes applied to particular cells. +You may need to define the cell styling in the data set. In this case the data should be an object with *separate properties* that describe data objects and CSS classes applied to particular cells. -A CSS class is set for a cell via the **css** property. +Set a CSS class for a cell with the `css` property. ~~~jsx const styledData = { @@ -118,7 +118,7 @@ const styledData = { ### Setting the locked state for a cell -If you want to specify locked cells in a data set, you can do it with the help of the **locked** property of a cell by setting it to *true*: +If you want to specify locked cells in a data set, use the `locked` property of a cell and set it to `true`: ~~~jsx const dataset = [ @@ -140,7 +140,7 @@ Check the full list of available cell properties in the [API reference](api/spre ### Adding a link into a cell -There is a possibility to specify a link for a cell right in a data set. For this, you need to set the **link** property as an object and provide the necessary settings: +You can specify a link for a cell right in a data set. To do this, set the `link` property as an object and provide the necessary settings: - `text` - (optional) the text of a link - `href` - (required) the URL that defines the link destination @@ -165,7 +165,7 @@ const dataset = [ ~~~ :::note -Note that you should not use the **value** property of the *cell* object and the **text** property of the *link* object at the same time, since they are mutually exclusive. +Note that you should not use the `value` property of the `cell` object and the `text` property of the `link` object at the same time, since they are mutually exclusive. ::: **Related sample**: [Spreadsheet. Import and export to JSON](https://snippet.dhtmlx.com/e3xct53l?tag=spreadsheet) @@ -185,12 +185,12 @@ spreadsheet.load("../common/data.json"); :::info -If you need to provide end users with the ability to import a JSON file into the spreadsheet via the File Explorer, read [Loading JSON files](api/spreadsheet_load_method.md#loading-json-files). +If you need to let users import a JSON file into the spreadsheet through the File Explorer, read [Loading JSON files](api/spreadsheet_load_method.md#loading-json-files). ::: ### Loading CSV data -You can also load data in the CSV format. For this, you need to call the [](api/spreadsheet_load_method.md) method and pass the name of the format ("csv") as the second parameter: +You can also load data in CSV format. For this, you need to call the [](api/spreadsheet_load_method.md) method and pass the name of the format ("csv") as the second parameter: ~~~jsx var spreadsheet = new dhx.Spreadsheet("spreadsheet"); @@ -201,7 +201,7 @@ spreadsheet.load("../common/data.csv", "csv"); ### Loading Excel file (.xlsx) -It is possible to load a file in the Excel format with the **.xlsx** extension into a spreadsheet. There are corresponding controls in the Toolbar and Menu in the user interface: +You can load a file in Excel format with the `.xlsx` extension into a spreadsheet. There are corresponding controls in the Toolbar and Menu in the user interface: - Menu: File -> Import as..-> Microsoft Excel(.xlsx) @@ -213,12 +213,12 @@ It is possible to load a file in the Excel format with the **.xlsx** extension i #### How to import data -{{note Please note that the import feature won't work in the Internet Explorer browser.}} +{{note Note that the import feature does not work in Internet Explorer.}} -DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) for import of data from Excel. So, to enable the possibility to load data from Excel into Spreadsheet, you need to: +DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) to import data from Excel. To load Excel data into Spreadsheet, you need to: - install the **Excel2Json** library -- specify the [](api/spreadsheet_importmodulepath_config.md) option in the Spreadsheet configuration and set the path to the **worker.js** file in one of the two ways: +- specify the [](api/spreadsheet_importmodulepath_config.md) option in the Spreadsheet configuration and set the path to the *worker.js* file in one of two ways: - by providing a local path to the file on your computer, like: `"../libs/excel2json/1.0/worker.js"` - by providing a link to the file from CDN: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` @@ -237,7 +237,7 @@ To load data from an Excel file, pass a string with the type of the extension (" spreadsheet.load("../common/data.xlsx", "xlsx"); ~~~ -{{note Please note that the component supports import from Excel files with the **.xlsx** extension only.}} +{{note Note that the component supports import from Excel files with the `.xlsx` extension only.}} **Related sample**: [Spreadsheet. Import Xlsx](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet) @@ -245,7 +245,7 @@ You can also [export data from a spreadsheet into an Excel file](#exporting-data ### Processing after-loading code -The component will make an AJAX call and expect the remote URL to provide valid data. Data loading is asynchronous, so you need to wrap any after-loading code into a promise: +The component makes an AJAX call and expects the remote URL to provide valid data. Data loading is asynchronous, so you need to wrap any after-loading code into a promise: ~~~jsx spreadsheet.load("/some/data").then(function(){ @@ -288,7 +288,7 @@ spreadsheet2.parse(state); ### Export into Excel -DHTMLX Spreadsheet provides the ability to export data from a spreadsheet into an Excel file. There are corresponding controls in the Toolbar and Menu in the user interface: +DHTMLX Spreadsheet can export data from a spreadsheet into an Excel file. There are corresponding controls in the Toolbar and Menu in the user interface: - Menu: File -> Download as..-> Microsoft Excel(.xlsx) @@ -301,12 +301,12 @@ DHTMLX Spreadsheet provides the ability to export data from a spreadsheet into a #### How to export data :::note -Please note that the export feature won't work in the Internet Explorer browser. +Note that the export feature does not work in Internet Explorer. ::: -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 export data to Excel. Export is processed in 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. To export 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: +- 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 - if you use your own export server, you need to: - install the [**Json2Excel**](https://github.com/dhtmlx/json2excel) library @@ -346,7 +346,7 @@ Check the steps of [importing data from an Excel file into Spreadsheet](#loading ### Export into JSON -From v4.3, the library also includes the ability to export data from a spreadsheet into a JSON file. Use the [json()](api/export_json_method.md) method of the Export object for this purpose: +From v4.3, the library can also export data from a spreadsheet into a JSON file. Use the [json()](api/export_json_method.md) method of the Export object for this purpose: ~~~jsx spreadsheet.export.json(); diff --git a/docs/localization.md b/docs/localization.md index ad7f9c20..7454f90f 100644 --- a/docs/localization.md +++ b/docs/localization.md @@ -6,7 +6,7 @@ description: You can learn about the localization of the DHTMLX JavaScript Sprea # Localization -You can localize labels in the interface of DHTMLX Spreadsheet and present it in any necessary language. You just need to provide localized strings for labels and apply your locale to the component. +You can localize the labels in the DHTMLX Spreadsheet interface and present the interface in any language. To do this, provide localized strings for the labels and apply your locale to the component. @@ -182,9 +182,9 @@ const en = { ## Custom locale -To apply a different locale you need to: +To apply a different locale, you need to: -- provide translations for all text labels in Spreadsheet, e.g. for the Russian locale: +- provide translations for all text labels in Spreadsheet, for example, for the Russian locale: ~~~jsx const ru = { @@ -201,7 +201,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container"); ## Default locale for formulas -The i18n locale for the Spreadsheet popup with descriptions for formulas is contained in the `dhx.i18n.formulas` object. The default locale for formulas is the following: +The `dhx.i18n.formulas` object contains the i18n locale for the Spreadsheet formula popup. The default locale for formulas is the following: ~~~jsx const en = { diff --git a/docs/merge_cells.md b/docs/merge_cells.md index 0262d96c..8b1dbdfa 100644 --- a/docs/merge_cells.md +++ b/docs/merge_cells.md @@ -25,7 +25,7 @@ or ![DHTMLX Spreadsheet Format menu with the Merge option for cell merging](/img/merge_cells_via_menu.png) :::info -The merged cell will display the content of the upper-left cell of the selected range. +The merged cell displays the content of the upper-left cell of the selected range. ::: ## Split cells diff --git a/docs/migration.md b/docs/migration.md index 5d120eb5..27c718b3 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -12,9 +12,9 @@ description: You can learn about migration in the documentation of the DHTMLX Ja The following properties of `ISpreadsheetConfig` are deprecated and removed. Check the current usage below: -- `dateFormat` configuration property. Set it in the [**localization**](api/spreadsheet_localization_config.md) configuration object as: +- `dateFormat` configuration property. Set it in the [`localization`](api/spreadsheet_localization_config.md) configuration object as: - `{ localization: { dateFormat: "%d/%m/%Y" } }` -- `timeFormat` configuration property. Set it in the [**localization**](api/spreadsheet_localization_config.md) configuration object as: +- `timeFormat` configuration property. Set it in the [`localization`](api/spreadsheet_localization_config.md) configuration object as: - `{ localization: { timeFormat: 12 } }` ### Deprecated methods @@ -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 `"help"` option of the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) property is renamed to `"helpers"`. In addition, the default set of options now includes the new `"actions"` option. ~~~jsx title="Before v5.0" {8} // default configuration @@ -178,9 +178,9 @@ toolbarBlocks: [ Version 4.3 is the last version which provides IE support ::: -Version 4.3 brings a new conception of tracking and handling the actions which are performed when you change something in the spreadsheet. +Version 4.3 introduces a new approach to tracking and handling the actions performed when you change something in the spreadsheet. -The new [beforeAction](api/spreadsheet_beforeaction_event.md) and [afterAction](api/spreadsheet_afteraction_event.md) events will fire right before / after an action is executed and indicate which action has been performed. Thus, the new approach allows you to add the necessary logic for several actions at once via using only these two events. For instance: +The new [`beforeAction`](api/spreadsheet_beforeaction_event.md) and [`afterAction`](api/spreadsheet_afteraction_event.md) events fire right before/after an action is executed and indicate which action was performed. This approach lets you add the necessary logic for several actions at once using only these two events. For instance: ~~~jsx spreadsheet.events.on("BeforeAction", (actionName, config) => { @@ -206,7 +206,7 @@ spreadsheet.events.on("AfterAction", (actionName, config) => { }); ~~~ -This way will reduce the size of your code because you won't need to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events for each separate action. +This approach reduces the size of your code because you won't need to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events for each separate action. Still, the old approach continues working as before. For more details, check [Spreadsheet actions](api/overview/actions_overview.md). @@ -265,7 +265,7 @@ const locale = { ## 2.1 -> 3.0 -This list of changes will help you to migrate from the previous version 2.1 where DHTMLX Spreadsheet was PHP-based to the totally renewed version 3.0 in which the component is totally built on JavaScript. Check the list below to explore all the changes. +This list of changes helps you migrate from version 2.1, where DHTMLX Spreadsheet was PHP-based, to the fully rebuilt version 3.0, which is built entirely in JavaScript. Check the list below to explore all the changes. :::info The **API of version 2.1** is still available, but it is incompatible with the [**API starting from version 3.0**](api/api_overview.md). If you require the documentation for version 2.1, please [contact us](https://dhtmlx.com/docs/contact.shtml), and we will send it to you. From 6087e61ed9a40238ba9f73b8ead3bd9d9269e75d Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 6 Jul 2026 14:39:26 +0300 Subject: [PATCH 05/16] [update] grammar in formatting and svelte guides Grammar and writing-style review (article-grammar) of the fifth batch of top-level docs articles: - number_formatting, number_formatting_guide, sorting_data, svelte_integration, using_typescript - fix passive voice, future tense, wordiness and 'how ... looks like' - fix typos: 'ommitted' -> 'omitted', 'Typescript' -> 'TypeScript', and a wrong code comment (currency -> percent example) - wrap property/param names and value literals in backticks; format Svelte file names as italic; switch first person to second person --- docs/number_formatting.md | 56 ++++++++++++++++----------------- docs/number_formatting_guide.md | 2 +- docs/sorting_data.md | 2 +- docs/svelte_integration.md | 32 +++++++++---------- docs/using_typescript.md | 8 ++--- 5 files changed, 50 insertions(+), 50 deletions(-) diff --git a/docs/number_formatting.md b/docs/number_formatting.md index 43a5c321..1c932ca5 100644 --- a/docs/number_formatting.md +++ b/docs/number_formatting.md @@ -6,22 +6,22 @@ description: You can study the developer guide about number formatting in the do # Number formatting -DHTMLX Spreadsheet supports number formatting that you can apply for numeric values in cells. +DHTMLX Spreadsheet supports number formatting that you can apply to numeric values in cells. ![DHTMLX Spreadsheet Number format dropdown with Common, Number, Currency, Percent, Date, Time, and Text options](/img/number_format_options.png) :::note -There is a [User Guide](number_formatting_guide.md) provided to make work with Spreadsheet easy for your end users. +The [User Guide](number_formatting_guide.md) makes working with Spreadsheet easy for your users. ::: ## Default number formats A number format is an object that includes a set of properties: -- **id** - the id of a format that is used to set format to a cell via the [`setFormat()`](api/spreadsheet_setformat_method.md) method -- **mask** - a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) -- **name** - the name of a format displayed in the toolbar and menu drop-down lists -- **example** - an example that shows how a formatted number looks like. The number 2702.31 is used as a default value for format examples +- `id` - the id of a format used to set a format for a cell with the [`setFormat()`](api/spreadsheet_setformat_method.md) method +- `mask` - a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) +- `name` - the name of a format displayed in the toolbar and menu drop-down lists +- `example` - an example that shows what a formatted number looks like. The number 2702.31 is used as a default value for format examples The default number formats are the following: @@ -43,13 +43,13 @@ defaultFormats = [ ]; ~~~ -This is how a spreadsheet with data in various number formats looks like: +This is what a spreadsheet with data in various number formats looks like: ## Date format -You can define the format for dates displayed in the spreadsheet via the `dateFormat` option of the [`localization`](api/spreadsheet_localization_config.md) property. The default format is "%d/%m/%Y". +You can define the format for dates displayed in the spreadsheet with the `dateFormat` option of the [`localization`](api/spreadsheet_localization_config.md) property. The default format is "%d/%m/%Y". ~~~jsx const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { @@ -98,11 +98,11 @@ spreadsheet.parse({ With Spreadsheet configuration options, you can localize time and date, specify the necessary currency sign and provide the desired decimal and thousands separators. All these settings are available in the [`localization`](api/spreadsheet_localization_config.md) property. It is an object with the following properties: -- **decimal** - (optional) the symbol used as a decimal separator, **"."** (a period) by default
Possible values are `"." | ","` -- **thousands** - (optional) the symbol used as a thousands separator, **","** (a comma) by default
Possible values are `"." | "," | " " | ""` -- **currency** - (optional) the currency sign, **"$"** by default -- **dateFormat** - (optional) the format of displaying dates set as a string, **"%d/%m/%Y"** by default. Check the details at the [`localization`](api/spreadsheet_localization_config.md) API page -- **timeFormat** - (optional) the format of displaying time set as either *12* or *24*, **12** by default +- `decimal` - (optional) the symbol used as a decimal separator, `"."` (a period) by default
Possible values are `"." | ","` +- `thousands` - (optional) the symbol used as a thousands separator, `","` (a comma) by default
Possible values are `"." | "," | " " | ""` +- `currency` - (optional) the currency sign, `"$"` by default +- `dateFormat` - (optional) the format of displaying dates set as a string, `"%d/%m/%Y"` by default. Check the details at the [`localization`](api/spreadsheet_localization_config.md) API page +- `timeFormat` - (optional) the format of displaying time set as either `12` or `24`, `12` by default For example, you can change the default localization settings as shown below: @@ -120,7 +120,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { spreadsheet.parse(dataset); ~~~ -Here is the result of configuring the **localization** object for Spreadsheet: +Here is the result of configuring the `localization` object for Spreadsheet: @@ -146,27 +146,27 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { ## Formats customization -You are not limited by [default number formats](#default-number-formats) only. There are two options of formats customization available: +You are not limited to the [default number formats](#default-number-formats). You can customize formats in two ways: - changing the settings of default number formats - adding custom number formats into spreadsheet -All such modifications can be implemented via the [`formats`](api/spreadsheet_formats_config.md) configuration option. It represents an array of format objects each of which contains a set of properties: +You can make all these modifications with the [`formats`](api/spreadsheet_formats_config.md) configuration option. It is an array of format objects, each of which contains a set of properties: -- **id** - (*string*) mandatory, the id of a format that is used to set format to a cell via the [`setFormat()`](api/spreadsheet_setformat_method.md) method -- **mask** - (*string*) mandatory, a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) -- **name** - (*string*) optional, the name of a format that will be displayed in the toolbar and menu drop-down lists -- **example** - (*string*) optional, an example that shows how a formatted number will look like +- `id` - (`string`) mandatory, the id of a format used to set a format for a cell with the [`setFormat()`](api/spreadsheet_setformat_method.md) method +- `mask` - (`string`) mandatory, a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) +- `name` - (`string`) optional, the name of a format displayed in the toolbar and menu drop-down lists +- `example` - (`string`) optional, an example that shows what a formatted number looks like ### The structure of a mask A mask may contain a set of common syntax characters that include digit placeholders, separators, percent and currency signs, valid characters: - **0** - a digit in the number. Used to display insignificant zeros, if a number has fewer digits than there are zeros in the format. For example, to display 2 as 2.0, use the format 0.0. -- **#** - a digit in the number. Used to display only significant numbers (insignificant zeros will be ommitted, if a number has fewer digits than there are # symbols in the format). -- **$** - formats numbers as a dollar value. To use a different currency sign, you need to define it in a mask as **[$ your_currency_sign]**#,##0.00 ,e.g. [$ €]#,##0.00. +- **#** - a digit in the number. Used to display only significant numbers (insignificant zeros will be omitted, if a number has fewer digits than there are # symbols in the format). +- **$** - formats numbers as a dollar value. To use a different currency sign, you need to define it in a mask as **[$ your_currency_sign]**#,##0.00, for example, [$ €]#,##0.00. {{note Note that all characters between [$ and ] will be interpreted as a currency sign.}} - **.(period)** - applies a decimal point to numbers. - **,(comma)** - applies a thousands separator to numbers. @@ -175,21 +175,21 @@ A mask may contain a set of common syntax characters that include digit placehol ## Setting format -In order to apply the necessary format to a numeric value, make use of the [`setFormat()`](api/spreadsheet_setformat_method.md) method. It takes two parameters: +To apply the necessary format to a numeric value, use the [`setFormat()`](api/spreadsheet_setformat_method.md) method. It takes two parameters: -- **cell** - (*string*) the id of a cell the value of which should be formatted -- **format** - (*string*) the name of the [default number format](#default-number-formats) to apply to the cell value +- `cell` - (`string`) the id of the cell whose value should be formatted +- `format` - (`string`) the name of the [default number format](#default-number-formats) to apply to the cell value For example: ~~~jsx -// applies the currency format to the cell A1 +// applies the percent format to cell A1 spreadsheet.setFormat("A1","percent"); ~~~ ## Getting format -You can get the number format applied to the value of a cell with the help of the [`getFormat()`](api/spreadsheet_getformat_method.md) method. The method takes the id of a cell as a parameter. +You can retrieve the number format applied to a cell's value with the [`getFormat()`](api/spreadsheet_getformat_method.md) method. The method takes the id of a cell as a parameter. ~~~jsx var format = spreadsheet.getFormat("A1"); @@ -198,7 +198,7 @@ var format = spreadsheet.getFormat("A1"); ## Events -There is a pair of events you can use to control the process of cell's format changing. They are: +You can use a pair of events to control cell format changes: - [`beforeAction`](api/spreadsheet_beforeaction_event.md) - fires before the `setCellFormat` action is executed - [`afterAction`](api/spreadsheet_afteraction_event.md) - fires after the `setCellFormat` action is executed \ No newline at end of file diff --git a/docs/number_formatting_guide.md b/docs/number_formatting_guide.md index 1b7b307d..ce1fbbdf 100644 --- a/docs/number_formatting_guide.md +++ b/docs/number_formatting_guide.md @@ -8,7 +8,7 @@ description: You can study the user guide about number formatting in the documen ## Supported number formats -There are several number formats you can apply to format numeric values of cells: +You can apply several number formats to cell values: diff --git a/docs/sorting_data.md b/docs/sorting_data.md index 92190b73..2979d4f8 100644 --- a/docs/sorting_data.md +++ b/docs/sorting_data.md @@ -30,7 +30,7 @@ To sort spreadsheet data by a separate range, take the following steps: 1\. Select a range of cells in the column you want to sort the data by -2\. Choose one of the two actions: +2\. Choose one of two actions: - Right-click a cell in the selected range and choose *Sort* -> *Sort A to Z* or *Sort Z to A* diff --git a/docs/svelte_integration.md b/docs/svelte_integration.md index ac140103..90b54872 100644 --- a/docs/svelte_integration.md +++ b/docs/svelte_integration.md @@ -34,7 +34,7 @@ Go to the app directory: cd my-svelte-spreadsheet-app ~~~ -Then you need to install dependencies and run the app. For this, you need to make use of a package manager: +Then install dependencies and run the app. To do this, use a package manager: - if you use [**yarn**](https://yarnpkg.com/), you need to call the following commands: @@ -50,25 +50,25 @@ npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app should run on localhost (for instance `http://localhost:3000`). ## Creating Spreadsheet -Now you should get the DHTMLX Spreadsheet source code. First of all, stop the app and proceed with installing the Spreadsheet package. +Now you should get the DHTMLX Spreadsheet source code. First, stop the app and install the Spreadsheet package. ### Step 1. Package installation -Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only. +Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow the steps in the README file. Note that trial Spreadsheet is available for 30 days only. ### Step 2. Component creation -Now you need to create a Svelte component, to add Spreadsheet into the application. Let's create a new file in the ***src/*** directory and name it ***Spreadsheet.svelte***. +Now you need to create a Svelte component to add Spreadsheet into the application. Create a new file in the *src/* directory and name it *Spreadsheet.svelte*. #### Importing source files -Open the ***Spreadsheet.svelte*** file and import Spreadsheet source files. Note that: +Open the *Spreadsheet.svelte* file and import Spreadsheet source files. Note that: -- if you use PRO version and install the Spreadsheet package from a local folder, the import paths look like this: +- if you use the PRO version and install the Spreadsheet package from a local folder, the import paths look like this: ~~~html title="Spreadsheet.svelte" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **spreadsheet.min.css**. +Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as *spreadsheet.min.css*. - if you use the trial version of Spreadsheet, specify the following paths: @@ -138,7 +138,7 @@ body, #### Loading data -To add data into the Spreadsheet, we need to provide a data set. Let's create the ***data.js*** file in the ***src/*** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. Create the *data.js* file in the *src/* directory and add some data into it: ~~~jsx title="data.js" export function getData() { @@ -183,7 +183,7 @@ export function getData() { } ~~~ -Then open the ***App.svelte*** file, import data, and pass it into the new created `` components as **props**: +Then open the *App.svelte* file, import data, and pass it into the newly created `` component as **props**: ~~~html {3,5,8} title="App.svelte" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **spreadsheet.min.css**. +Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as *spreadsheet.min.css*. - if you use the trial version of Spreadsheet, specify the following paths: @@ -140,7 +140,7 @@ body, #### Loading data -To add data into the Spreadsheet, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. You can create the *data.js* file in the *src/* directory and add some data into it: ~~~jsx title="data.js" export function getData() { @@ -185,7 +185,7 @@ export function getData() { } ~~~ -Then open the ***App.vue*** file, import data, and initialize it via the inner `data()` method. After this you can pass data into the new created `` component as **props**: +Then open the *App.vue* file, import data, and initialize it with the inner `data()` method. After this you can pass data into the newly created `` component as **props**: ~~~html {3,7-9,14} title="App.vue"