Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
5bedd3a
[add] what's new and migration notes for v6.0.4
Sorokin-Oleg Oct 20, 2026
9e73886
[update] read-only mode, setFocusedCell(), deleting merged rows and c…
Sorokin-Oleg Oct 20, 2026
e11b9ce
[add] selection config, selection enable()/disable()/isDisabled() and…
Sorokin-Oleg Oct 20, 2026
00f172a
[update] Fixed annonce method (DHX-5299)
Sorokin-Oleg Oct 20, 2026
7fd3e0b
[update] hotkeys list and scope of toolbar shortcuts in what's new an…
Sorokin-Oleg Oct 20, 2026
b5bb8af
[update] localization: new locale keys and built-in widget locales fo…
Sorokin-Oleg Oct 20, 2026
f907b2a
[update] search, Excel import/export, autofill, copy/paste, themes an…
Sorokin-Oleg Oct 20, 2026
04e2619
[update] React: readonly as init-only prop, selection prop, ISelectio…
Sorokin-Oleg Oct 20, 2026
43b8dec
[add] accessibility guide
Sorokin-Oleg Oct 20, 2026
3d04db4
[add] accessibility guide and conformance report (VPAT 2.5 INT) as a …
Sorokin-Oleg Oct 20, 2026
2a7311e
[update] condense v6.0.4 what's new and drop the 6.0.3 -> 6.0.4 migra…
Sorokin-Oleg Oct 20, 2026
618c4f6
[update] accessibility guide and conformance report wording
Sorokin-Oleg Oct 20, 2026
33adb31
[update] accessibility docs, links fixes
mafanya23 Oct 21, 2026
079b856
[update] v6.0.4 API pages, descriptions and wording
mafanya23 Oct 23, 2026
aaf1958
[update] actions config, copy/paste and a11y links
mafanya23 Oct 26, 2026
7f44f5f
[update] add links to the accessibility guide
mafanya23 Oct 26, 2026
0baf2dd
[update] v6.0.4 what's new, a11y and keyboard details
mafanya23 Oct 26, 2026
43d8f9d
[update] correct what's new
mafanya23 Oct 26, 2026
38574e1
[update] v6.0.4 screenshots, focus and type notation
mafanya23 Oct 28, 2026
be30fb1
[fix] correct v6.0.4 a11y, toolbar and action docs
mafanya23 Oct 28, 2026
45abafa
[fix] align v6.0.4 docs with the final behavior
mafanya23 Oct 28, 2026
f6a2ff8
[update] group toolbar popup focus in what's new
mafanya23 Oct 28, 2026
ba32416
[update] simplify a11y, selection and Excel import notes
mafanya23 Oct 28, 2026
1853f28
Merge pull request #88 from DHTMLX/spreadsheet/doc/DHX-5299-improvements
mafanya23 Oct 28, 2026
5bde9b2
[update] sync ru, de, zh, ko translations with v6.0.4
mafanya23 Oct 28, 2026
76774e7
[update] unify spreadsheet container id in code examples
mafanya23 Oct 29, 2026
09f6add
Merge pull request #87 from DHTMLX/spreadsheet/doc/DHX-5299
mafanya23 Oct 29, 2026
e8f9fef
[update] rewrite page descriptions for SEO
mafanya23 Oct 29, 2026
9f21953
[update] add muon #REF! fix to v6.0.4 what's new
mafanya23 Oct 30, 2026
7c8aabc
[update] retake rows and columns context menu images
mafanya23 Oct 30, 2026
e086bf9
[update] separate react section in v6.0.4 what's new
mafanya23 Nov 2, 2026
5f31f42
[update] sync react section of v6.0.4 what's new
mafanya23 Nov 2, 2026
56438df
[update] note core changes apply to react in v6.0.4
mafanya23 Nov 2, 2026
9ff2cef
Merge pull request #89 from DHTMLX/mr-next-descriptions-images-updates
mafanya23 Nov 2, 2026
ad78e10
[dev] move translation sync markers to 9ff2cef6
mafanya23 Nov 2, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
449 changes: 449 additions & 0 deletions docs/accessibility.md

Large diffs are not rendered by default.

220 changes: 220 additions & 0 deletions docs/accessibility_conformance_report.md

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion docs/angular_integration.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Integration with Angular
title: Angular Integration
description: You can learn about the Angular integration of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: Use DHTMLX Spreadsheet in an Angular application. Create a project, add Spreadsheet as an Angular component, load data and handle events.
---

# Integration with Angular
Expand Down Expand Up @@ -234,6 +234,10 @@ ngOnDestroy() {
}
~~~

:::info
The `destructor()` method removes the event handlers attached with `spreadsheet.events.on()`. When a new Spreadsheet instance is created, for example, when the component is created again, attach the handlers to the new instance.
:::

### 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:
Expand Down
7 changes: 6 additions & 1 deletion docs/api/api_overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: API overview
title: API Overview
description: You can check an API overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: Overview of the DHTMLX Spreadsheet API, covering the constructor, methods, events, properties, and the sheet manager, selection, event bus and export modules.
---

# API overview
Expand All @@ -27,6 +27,7 @@ Parameters:
| [](api/spreadsheet_addcolumn_method.md) | @getshort(api/spreadsheet_addcolumn_method.md) |
| [](api/spreadsheet_addformula_method.md) | @getshort(api/spreadsheet_addformula_method.md) |
| [](api/spreadsheet_addrow_method.md) | @getshort(api/spreadsheet_addrow_method.md) |
| [](api/spreadsheet_announce_method.md) | @getshort(api/spreadsheet_announce_method.md) |
| [](api/spreadsheet_clear_method.md) | @getshort(api/spreadsheet_clear_method.md) |
| [](api/spreadsheet_deletecolumn_method.md) | @getshort(api/spreadsheet_deletecolumn_method.md) |
| [](api/spreadsheet_deleterow_method.md) | @getshort(api/spreadsheet_deleterow_method.md) |
Expand Down Expand Up @@ -99,6 +100,7 @@ Parameters:
| [](api/spreadsheet_multisheets_config.md) | @getshort(api/spreadsheet_multisheets_config.md) |
| [](api/spreadsheet_readonly_config.md) | @getshort(api/spreadsheet_readonly_config.md) |
| [](api/spreadsheet_rowscount_config.md) | @getshort(api/spreadsheet_rowscount_config.md) |
| [](api/spreadsheet_selection_config.md) | @getshort(api/spreadsheet_selection_config.md) |
| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(api/spreadsheet_toolbarblocks_config.md) |


Expand All @@ -118,8 +120,11 @@ Parameters:

| Name | Description |
| :--------------------------------------------- | :---------------------------------------------------- |
| [](api/selection_disable_method.md) | @getshort(api/selection_disable_method.md) |
| [](api/selection_enable_method.md) | @getshort(api/selection_enable_method.md) |
| [](api/selection_getfocusedcell_method.md) | @getshort(api/selection_getfocusedcell_method.md) |
| [](api/selection_getselectedcell_method.md) | @getshort(api/selection_getselectedcell_method.md) |
| [](api/selection_isdisabled_method.md) | @getshort(api/selection_isdisabled_method.md) |
| [](api/selection_removeselectedcell_method.md) | @getshort(api/selection_removeselectedcell_method.md) |
| [](api/selection_setfocusedcell_method.md) | @getshort(api/selection_setfocusedcell_method.md) |
| [](api/selection_setselectedcell_method.md) | @getshort(api/selection_setselectedcell_method.md) |
Expand Down
4 changes: 2 additions & 2 deletions docs/api/eventsbus_detach_method.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: detach()
title: detach events bus method
description: You can learn about the detach events bus method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: Detach an event handler attached with the on() method from DHTMLX Spreadsheet with the events.detach() method, by the name of the event.
---

# detach()
Expand All @@ -23,7 +23,7 @@ detach(name: string): void;
### Example

~~~jsx {10}
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
// config parameters
});
spreadsheet.parse(data);
Expand Down
4 changes: 2 additions & 2 deletions docs/api/eventsbus_fire_method.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: fire()
title: fire events bus method
description: You can learn about the fire events bus method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: Trigger an inner event of DHTMLX Spreadsheet with the events.fire() method, passing the name of the event and an array of the event data.
---

# fire()
Expand Down Expand Up @@ -32,7 +32,7 @@ The method returns `false` if some of the event handlers return `false`. Otherwi
### Example

~~~jsx {10}
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
// config parameters
});
spreadsheet.parse(data);
Expand Down
4 changes: 2 additions & 2 deletions docs/api/eventsbus_on_method.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: on()
title: on events bus method
description: You can learn about the on events bus method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: Attach a handler to an inner event of DHTMLX Spreadsheet with the events.on() method, for example, to react to a change of the cell style.
---

# on()
Expand All @@ -24,7 +24,7 @@ on(name: string, callback: function): void;
### Example

~~~jsx {6-8}
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
// config parameters
});
spreadsheet.parse(data);
Expand Down
4 changes: 2 additions & 2 deletions docs/api/export_json_method.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: json()
title: json export method
description: You can learn about the json export method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: Export the data of DHTMLX Spreadsheet into a JSON file with the export.json() method.
---

# json()
Expand All @@ -19,7 +19,7 @@ json(): void;
### Example

~~~jsx {7}
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
// config parameters
});
spreadsheet.parse(data);
Expand Down
4 changes: 2 additions & 2 deletions docs/api/export_xlsx_method.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: xlsx()
title: xlsx export method
description: You can learn about the xlsx export method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: Export the data of DHTMLX Spreadsheet into an Excel (.xlsx) file with the export.xlsx() method, optionally with a custom file name.
---

# xlsx()
Expand All @@ -23,7 +23,7 @@ xlsx(name:string): void;
### Example

~~~jsx {7,10}
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
// config parameters
});
spreadsheet.parse(data);
Expand Down
13 changes: 10 additions & 3 deletions docs/api/overview/actions_overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Spreadsheet actions
title: Actions Overview
description: You can check an Actions overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: Overview of the DHTMLX Spreadsheet actions and the full list of the actions that you can handle in the beforeAction and afterAction events.
---

# Actions overview
Expand Down Expand Up @@ -67,8 +67,8 @@ spreadsheet.events.on("beforeColumnAdd", function(cell){
| **merge** | The action is executed when merging a range of cells |
| **removeCellStyles** | The action is executed when clearing styles of a cell |
| **renameSheet** | The action is executed when renaming a sheet |
| **resizeCol** | The action is executed when resizing a column |
| **resizeRow** | The action is executed when resizing a row |
| **resizeCol** | The action is executed when resizing a column by dragging its border or with the *Column width* command |
| **resizeRow** | The action is executed when resizing a row by dragging its border or with the *Row height* command |
| **setCellFormat** | The action is executed when changing the format of a cell |
| **setCellValue** | The action is executed when changing or removing the value of a cell |
| **setValidation** | The action is executed when setting data validation for a cell |
Expand All @@ -78,6 +78,13 @@ spreadsheet.events.on("beforeColumnAdd", function(cell){
| **toggleFreeze** | The action is executed when freezing/unfreezing columns/rows |
| **unmerge** | The action is executed when splitting cells |

:::note
In the `config` object of the [`beforeAction`](api/spreadsheet_beforeaction_event.md) and [`afterAction`](api/spreadsheet_afteraction_event.md) events, the **resizeCol** and **resizeRow** actions pass:

- `cell` - the cell or range of cells whose columns or rows are resized
- `val` - the new width or height in pixels. It is set only for the *Column width* and *Row height* commands, not for resizing by dragging
:::

**Change log:**

- The **toggleFreeze** and **toggleVisibility** actions were added in v5.2
Expand Down
2 changes: 1 addition & 1 deletion docs/api/overview/eventbus_overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Event Bus methods overview
title: Event Bus Methods Overview
description: You can check an Event Bus methods overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: List of the DHTMLX Spreadsheet event bus methods that attach, detach and trigger events.
---

# Event Bus methods overview
Expand Down
2 changes: 1 addition & 1 deletion docs/api/overview/events_overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Events overview
title: Events Overview
description: You can have an Events overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: List of the DHTMLX Spreadsheet events that fire on actions, data loading, cell editing, selection, focus and sheet changes.
---

# Events overview
Expand Down
2 changes: 1 addition & 1 deletion docs/api/overview/export_overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Export methods overview
title: Export Methods Overview
description: You can check an Export methods overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: List of the DHTMLX Spreadsheet export module methods that save the data to a JSON or an Excel (.xlsx) file.
---

# Export methods overview
Expand Down
3 changes: 2 additions & 1 deletion docs/api/overview/methods_overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Methods overview
title: Methods Overview
description: You can check a Methods overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: List of the DHTMLX Spreadsheet methods for loading and saving data, editing cells, styling, merging, sorting, filtering and managing sheets.
---

# Methods overview
Expand All @@ -11,6 +11,7 @@ description: You can check a Methods overview of the DHTMLX JavaScript Spreadshe
| [](api/spreadsheet_addcolumn_method.md) | @getshort(../spreadsheet_addcolumn_method.md) |
| [](api/spreadsheet_addformula_method.md) | @getshort(../spreadsheet_addformula_method.md) |
| [](api/spreadsheet_addrow_method.md) | @getshort(../spreadsheet_addrow_method.md) |
| [](api/spreadsheet_announce_method.md) | @getshort(../spreadsheet_announce_method.md) |
| [](api/spreadsheet_clear_method.md) | @getshort(../spreadsheet_clear_method.md) |
| [](api/spreadsheet_deletecolumn_method.md) | @getshort(../spreadsheet_deletecolumn_method.md) |
| [](api/spreadsheet_deleterow_method.md) | @getshort(../spreadsheet_deleterow_method.md) |
Expand Down
3 changes: 2 additions & 1 deletion docs/api/overview/properties_overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Properties overview
title: Properties Overview
description: You can check a Properties overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: List of the DHTMLX Spreadsheet configuration properties that set up the toolbar, the menu, the read-only mode, the selection, the grid size and more.
---

# Properties overview
Expand All @@ -18,5 +18,6 @@ description: You can check a Properties overview of the DHTMLX JavaScript Spread
| [](api/spreadsheet_multisheets_config.md) | @getshort(../spreadsheet_multisheets_config.md) |
| [](api/spreadsheet_readonly_config.md) | @getshort(../spreadsheet_readonly_config.md) |
| [](api/spreadsheet_rowscount_config.md) | @getshort(../spreadsheet_rowscount_config.md) |
| [](api/spreadsheet_selection_config.md) | @getshort(../spreadsheet_selection_config.md) |
| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(../spreadsheet_toolbarblocks_config.md) |

5 changes: 4 additions & 1 deletion docs/api/overview/selection_overview.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
---
sidebar_label: Selection methods overview
title: Selection Methods Overview
description: You can check a Selection methods overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: List of the DHTMLX Spreadsheet selection module methods that select cells, set focus and turn the selection of cells off and on.
---

# Selection methods overview

| Name | Description |
| :--------------------------------------------- | :---------------------------------------------------- |
| [](api/selection_disable_method.md) | @getshort(../selection_disable_method.md) |
| [](api/selection_enable_method.md) | @getshort(../selection_enable_method.md) |
| [](api/selection_getfocusedcell_method.md) | @getshort(../selection_getfocusedcell_method.md) |
| [](api/selection_getselectedcell_method.md) | @getshort(../selection_getselectedcell_method.md) |
| [](api/selection_isdisabled_method.md) | @getshort(../selection_isdisabled_method.md) |
| [](api/selection_removeselectedcell_method.md) | @getshort(../selection_removeselectedcell_method.md) |
| [](api/selection_setfocusedcell_method.md) | @getshort(../selection_setfocusedcell_method.md) |
| [](api/selection_setselectedcell_method.md) | @getshort(../selection_setselectedcell_method.md) |
2 changes: 1 addition & 1 deletion docs/api/overview/sheetmanager_overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Sheet Manager API overview
title: Sheet Manager API Overview
description: You can check a Sheet Manager API overview of the DHTMLX JavaScript Spreadsheet library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
description: List of the DHTMLX Spreadsheet sheet manager methods that add, remove, clear, get and switch sheets.
---

# Sheet Manager API overview
Expand Down
47 changes: 47 additions & 0 deletions docs/api/selection_disable_method.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
sidebar_label: disable()
title: disable selection method
description: Turn the selection of cells off in DHTMLX Spreadsheet at runtime with the selection.disable() method, which removes the active cell and ignores selection by the mouse, the keyboard and the API.
---

# disable()

### Description

@short: Turns the selection of cells off

### Usage

~~~jsx
disable(): void;
~~~

### Example

~~~jsx {6}
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
// config parameters
});
spreadsheet.parse(data);

spreadsheet.selection.disable();
~~~

### Details

The method:

- ends the editing of a cell and saves the entered value
- removes the selected and the active cells on every sheet
- ignores the selection by the mouse, the keyboard and the API until the [`enable()`](api/selection_enable_method.md) method is called

While the selection is turned off, the [`getSelectedCell()`](api/selection_getselectedcell_method.md) and [`getFocusedCell()`](api/selection_getfocusedcell_method.md) methods return `undefined`. The other effects are the same as for the [`selection: false`](api/spreadsheet_selection_config.md#details) configuration option.

If the selection is already turned off, the method does nothing.

**Change log:** Added in v6.0.4

**Related articles:**
- [`selection`](api/spreadsheet_selection_config.md)
- [`enable()`](api/selection_enable_method.md)
- [Accessibility: read-only setup](accessibility.md#read-only-setup)
Loading
Loading