Skip to content

Commit e5106b1

Browse files
mafanya23mafanya23
authored
Merge pull request #84 from DHTMLX/next
[update] docs for v6.0.3
2 parents 97409c1 + 3b089dd commit e5106b1

30 files changed

Lines changed: 511 additions & 56 deletions

‎docs/api/export_xlsx_method.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ spreadsheet.export.xlsx("MyData");
3939
Note that the component supports export to Excel files with the `.xlsx` extension only.
4040
:::
4141

42+
Besides cell values, an exported file keeps the cell styles, the number formats, the merged cells, the frozen columns and rows, the links, the drop-down editors, and the locked state of cells. All of them are restored on [import of the file back into Spreadsheet](loading_data.md#loading-excel-file-xlsx).
43+
4244
:::info
4345
DHTMLX Spreadsheet uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to export data to Excel. [Check the details](loading_data.md#exporting-data).
4446
:::

‎docs/api/spreadsheet_lock_method.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,6 @@ where `sheet1` is the name of the tab.
4848
If the name of the tab isn't specified, the method locks the cell(s) of the active tab.
4949
:::
5050

51-
**Related sample**: [Spreadsheet. Locked Cells](https://snippet.dhtmlx.com/czeyiuf8)
51+
**Related sample**: [Spreadsheet. Locked Cells](https://snippet.dhtmlx.com/czeyiuf8)
52+
53+
**Related article:** [Locking cells](working_with_cells.md#locking-cells)

‎docs/api/spreadsheet_serialize_method.md‎

Lines changed: 71 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,91 @@ description: You can learn about the serialize method in the documentation of th
1313
### Usage
1414

1515
~~~jsx
16-
serialize(): object;
16+
serialize(): {
17+
sheets: [
18+
{
19+
name: string,
20+
id: string,
21+
data: [
22+
{
23+
cell: string,
24+
value?: string | number,
25+
css?: string,
26+
format?: string,
27+
editor?: {
28+
type: string, // type: "select"
29+
options: string | array
30+
},
31+
locked?: boolean,
32+
link?: {
33+
text?: string,
34+
href: string
35+
}
36+
},
37+
// more cell objects
38+
],
39+
cols: [
40+
{
41+
width: number,
42+
hidden: boolean
43+
},
44+
// more column objects
45+
],
46+
rows: [
47+
{
48+
height: number,
49+
hidden: boolean
50+
},
51+
// more row objects
52+
],
53+
merged: [
54+
{
55+
from: { column: number, row: number },
56+
to: { column: number, row: number }
57+
},
58+
// more objects
59+
],
60+
freeze: {
61+
col: number,
62+
row: number
63+
}
64+
},
65+
// more sheet objects
66+
],
67+
styles: object,
68+
formats: array
69+
};
1770
~~~
1871

1972
### Returns
2073

21-
The method returns a serialized JSON object
22-
23-
The serialized data is an object with the following attributes:
74+
The method returns a serialized JSON object with the following attributes:
2475

2576
- `formats` - an array of objects with number formats
26-
- `styles` - an object with the applied CSS classes
77+
- `styles` - an object with the applied CSS classes, where a key is the name of a class and a value is an object with its style properties
2778
- `sheets` - an array of sheet objects. Each object contains the following attributes:
28-
- `name` - the sheet name
29-
- `data` - an array of data objects
30-
- `rows` - an array of height objects
31-
- `cols` - an array of width objects
79+
- `name` - the sheet name
80+
- `id` - the sheet id
81+
- `data` - an array of cell objects. Each object contains the `cell` attribute with the cell id and the attributes that were set for the cell: `value`, `css`, `format`, `editor`, `locked`, `link`
82+
- `cols` - an array of objects with columns configurations. Each object contains the `width` and `hidden` attributes
83+
- `rows` - an array of objects with rows configurations. Each object contains the `height` and `hidden` attributes
84+
- `merged` - an array of objects where each object defines a range of merged cells via the `from` and `to` attributes
85+
- `freeze` - an object with the number of fixed columns and rows, `{ col: 0, row: 0 }` if nothing is frozen
86+
87+
Note that:
88+
89+
- the `merged` and `freeze` attributes are always present in a sheet object, as well as the `hidden` attribute in a column or row object, which is `false` when the column or row is visible
90+
- the `cols` and `rows` arrays cover the data range of a sheet and are extended further if a column width, a row height, or a `hidden` state was changed beyond that range. Thus custom sizes of empty columns and rows are kept as well
91+
- a cell gets into the `data` array if it has a value, a CSS class, an editor, or the `locked` state. Thus locked empty cells are kept as well
92+
- the returned object can be passed to the [](api/spreadsheet_parse_method.md) method as is
3293

3394
### Example
3495

3596
~~~jsx {4}
3697
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
3798
spreadsheet.parse(data);
3899

39-
const data = spreadsheet.serialize();
100+
const state = spreadsheet.serialize();
40101
~~~
41102

42103
**Related article:** [Data loading and export](loading_data.md#saving-and-restoring-state)

‎docs/loading_data.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,8 @@ const dataset = [
136136

137137
Check the full list of available cell properties in the [API reference](api/spreadsheet_parse_method.md#parameters).
138138

139+
The locked state is a part of the spreadsheet data. It is included into the object returned by the [](api/spreadsheet_serialize_method.md) method, even if a locked cell is empty, and it is kept when data is [exported into an Excel file](#export-into-excel) and [imported back](#loading-excel-file-xlsx).
140+
139141
**Related sample**: [Spreadsheet. Locked cells](https://snippet.dhtmlx.com/czeyiuf8?tag=spreadsheet)
140142

141143
### Adding a link into a cell
@@ -239,6 +241,8 @@ spreadsheet.load("../common/data.xlsx", "xlsx");
239241

240242
{{note Note that the component supports import from Excel files with the `.xlsx` extension only.}}
241243

244+
Along with cell values, import restores the cell styles, the number formats, the merged cells, the links, the data validation lists (as drop-down editors), and the [locked state of cells](#setting-the-locked-state-for-a-cell).
245+
242246
**Related sample**: [Spreadsheet. Import Xlsx](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet)
243247

244248
You can also [export data from a spreadsheet into an Excel file](#exporting-data), if needed.
@@ -268,7 +272,7 @@ For details on how to load multiple sheets into the spreadsheet, see the [Work w
268272

269273
## Saving and restoring state
270274

271-
To save the current state of a spreadsheet, use the [](api/spreadsheet_serialize_method.md) method. It converts data into an array of JSON objects. Each JSON object contains the configuration of a cell.
275+
To save the current state of a spreadsheet, use the [](api/spreadsheet_serialize_method.md) method. It converts the spreadsheet into a JSON object with the `sheets`, `styles`, and `formats` attributes. Besides cell values, the saved state includes the applied styles and number formats, the merged cells, the frozen columns and rows, the locked cells, and the custom sizes and visibility of columns and rows.
272276

273277
~~~jsx
274278
// saving state of the spreadsheet1
@@ -328,6 +332,8 @@ spreadsheet.export.xlsx();
328332

329333
**Related sample**: [Spreadsheet. Export Xlsx](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet)
330334

335+
Besides cell values, an exported file keeps the styles applied to cells, the number formats, the merged cells, the frozen columns and rows, the links added into cells, the drop-down editors (as Excel data validation), and the [locked state of cells](#setting-the-locked-state-for-a-cell). All of them are restored when the file is [imported back into Spreadsheet](#loading-excel-file-xlsx).
336+
331337
:::note
332338
Please note that the component supports export to Excel files with the `.xlsx` extension only.
333339
:::

‎docs/whats_new.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,17 @@ description: You can learn what's new in the DHTMLX JavaScript Spreadsheet libra
88

99
If you are updating Spreadsheet from an older version, check [Migration to Newer Version](migration.md) for details.
1010

11+
## Version 6.0.3
12+
13+
Released on August 24, 2026
14+
15+
### Fixes
16+
17+
- Custom column and row sizes were lost by the `serialize()` method if the cells were empty
18+
- Scroll "jumping" in Chrome when a selected cell re-entered the viewport
19+
- Some formulas disappeared after importing data from an Excel file
20+
- The "locked" state of cells was lost during Excel export and import
21+
1122
## Version 6.0.2
1223

1324
Released on July 1, 2026

‎docs/working_with_cells.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,15 @@ var cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6");
208208

209209
The method returns `true` or `false` depending on the state of the cell. If several cells are checked at once, the method returns `true` if there is at least one locked cell among the specified cells.
210210

211+
### Saving the locked state
212+
213+
The locked state of cells is a part of the spreadsheet data, so it survives saving and restoring:
214+
215+
- the [](api/spreadsheet_serialize_method.md) method includes the `locked` property into the serialized cell objects, even if a locked cell has no value
216+
- [export into an Excel file](loading_data.md#export-into-excel) keeps the locked state, and [import of such a file](loading_data.md#loading-excel-file-xlsx) restores it
217+
218+
You can also set the locked state right in a data set via the `locked` property of a cell. [Check the details](loading_data.md#setting-the-locked-state-for-a-cell).
219+
211220
## Merging cells
212221

213222
### Merge cells

‎i18n/de/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ spreadsheet.export.xlsx("MyData");
3939
Beachten Sie, dass die Komponente den Export in Excel-Dateien ausschließlich mit der Erweiterung `.xlsx` unterstützt.
4040
:::
4141

42+
Neben den Zellwerten behält eine exportierte Datei die Zellstile, die Zahlenformate, die verbundenen Zellen, die fixierten Spalten und Zeilen, die Links, die Dropdown-Editoren und den gesperrten Zustand der Zellen bei. All dies wird beim [Reimport der Datei in Spreadsheet](loading_data.md#loading-excel-file-xlsx) wiederhergestellt.
43+
4244
:::info
4345
DHTMLX Spreadsheet verwendet die WebAssembly-basierte Bibliothek [Json2Excel](https://github.com/dhtmlx/json2excel) für den Export von Daten nach Excel. [Weitere Details](loading_data.md#exporting-data).
4446
:::

‎i18n/de/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,5 @@ Wenn der Name des Tabs nicht angegeben wird, sperrt die Methode die Zelle(n) des
4949
:::
5050

5151
**Verwandtes Beispiel**: [Spreadsheet. Gesperrte Zellen](https://snippet.dhtmlx.com/czeyiuf8)
52+
53+
**Verwandter Artikel:** [Zellen sperren](working_with_cells.md#locking-cells)

‎i18n/de/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md‎

Lines changed: 71 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,91 @@ description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek e
1313
### Verwendung {#usage}
1414

1515
~~~jsx
16-
serialize(): object;
16+
serialize(): {
17+
sheets: [
18+
{
19+
name: string,
20+
id: string,
21+
data: [
22+
{
23+
cell: string,
24+
value?: string | number,
25+
css?: string,
26+
format?: string,
27+
editor?: {
28+
type: string, // type: "select"
29+
options: string | array
30+
},
31+
locked?: boolean,
32+
link?: {
33+
text?: string,
34+
href: string
35+
}
36+
},
37+
// more cell objects
38+
],
39+
cols: [
40+
{
41+
width: number,
42+
hidden: boolean
43+
},
44+
// more column objects
45+
],
46+
rows: [
47+
{
48+
height: number,
49+
hidden: boolean
50+
},
51+
// more row objects
52+
],
53+
merged: [
54+
{
55+
from: { column: number, row: number },
56+
to: { column: number, row: number }
57+
},
58+
// more objects
59+
],
60+
freeze: {
61+
col: number,
62+
row: number
63+
}
64+
},
65+
// more sheet objects
66+
],
67+
styles: object,
68+
formats: array
69+
};
1770
~~~
1871

1972
### Rückgabewert {#returns}
2073

21-
Die Methode gibt ein serialisiertes JSON-Objekt zurück
22-
23-
Die serialisierten Daten sind ein Objekt mit den folgenden Attributen:
74+
Die Methode gibt ein serialisiertes JSON-Objekt mit den folgenden Attributen zurück:
2475

2576
- `formats` - ein Array von Objekten mit Zahlenformaten
26-
- `styles` - ein Objekt mit den angewendeten CSS-Klassen
77+
- `styles` - ein Objekt mit den angewendeten CSS-Klassen, wobei ein Schlüssel der Name einer Klasse und ein Wert ein Objekt mit deren Stileigenschaften ist
2778
- `sheets` - ein Array von Tabellenblatt-Objekten. Jedes Objekt enthält die folgenden Attribute:
28-
- `name` - der Name des Tabellenblatts
29-
- `data` - ein Array von Datenobjekten
30-
- `rows` - ein Array von Höhenobjekten
31-
- `cols` - ein Array von Breitobjekten
79+
- `name` - der Name des Tabellenblatts
80+
- `id` - die ID des Tabellenblatts
81+
- `data` - ein Array von Zellobjekten. Jedes Objekt enthält das Attribut `cell` mit der Zell-ID sowie die Attribute, die für die Zelle gesetzt wurden: `value`, `css`, `format`, `editor`, `locked`, `link`
82+
- `cols` - ein Array von Objekten mit Spaltenkonfigurationen. Jedes Objekt enthält die Attribute `width` und `hidden`
83+
- `rows` - ein Array von Objekten mit Zeilenkonfigurationen. Jedes Objekt enthält die Attribute `height` und `hidden`
84+
- `merged` - ein Array von Objekten, wobei jedes Objekt über die Attribute `from` und `to` einen Bereich verbundener Zellen definiert
85+
- `freeze` - ein Objekt mit der Anzahl der fixierten Spalten und Zeilen, `{ col: 0, row: 0 }`, wenn nichts fixiert ist
86+
87+
Beachten Sie:
88+
89+
- die Attribute `merged` und `freeze` sind immer im Tabellenblatt-Objekt vorhanden, ebenso wie das Attribut `hidden` im Spalten- oder Zeilenobjekt, das `false` ist, wenn die Spalte oder Zeile sichtbar ist
90+
- die Arrays `cols` und `rows` decken den Datenbereich eines Tabellenblatts ab und werden darüber hinaus erweitert, wenn eine Spaltenbreite, eine Zeilenhöhe oder ein `hidden`-Zustand außerhalb dieses Bereichs geändert wurde. So bleiben auch benutzerdefinierte Größen leerer Spalten und Zeilen erhalten
91+
- eine Zelle gelangt in das Array `data`, wenn sie einen Wert, eine CSS-Klasse, einen Editor oder den Zustand `locked` hat. So bleiben auch gesperrte leere Zellen erhalten
92+
- das zurückgegebene Objekt kann unverändert an die Methode [](api/spreadsheet_parse_method.md) übergeben werden
3293

3394
### Beispiel {#example}
3495

3596
~~~jsx {4}
3697
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
3798
spreadsheet.parse(data);
3899

39-
const data = spreadsheet.serialize();
100+
const state = spreadsheet.serialize();
40101
~~~
41102

42103
**Verwandter Artikel:** [Datenladen und -export](loading_data.md#saving-and-restoring-state)

‎i18n/de/docusaurus-plugin-content-docs/current/loading_data.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,8 @@ const dataset = [
136136

137137
Die vollständige Liste der verfügbaren Zell-Eigenschaften finden Sie in der [API-Referenz](api/spreadsheet_parse_method.md#parameters).
138138

139+
Der gesperrte Zustand ist Teil der Spreadsheet-Daten. Er wird in das von der Methode [](api/spreadsheet_serialize_method.md) zurückgegebene Objekt aufgenommen, auch wenn eine gesperrte Zelle leer ist, und er bleibt beim [Export der Daten in eine Excel-Datei](#export-into-excel) und beim [Reimport](#loading-excel-file-xlsx) erhalten.
140+
139141
**Verwandtes Beispiel**: [Spreadsheet. Gesperrte Zellen](https://snippet.dhtmlx.com/czeyiuf8?tag=spreadsheet)
140142

141143
### Einen Link in eine Zelle einfügen {#adding-a-link-into-a-cell}
@@ -239,6 +241,8 @@ spreadsheet.load("../common/data.xlsx", "xlsx");
239241

240242
{{note Beachten Sie, dass die Komponente nur den Import aus Excel-Dateien mit der Erweiterung `.xlsx` unterstützt.}}
241243

244+
Neben den Zellwerten stellt der Import die Zellstile, die Zahlenformate, die verbundenen Zellen, die Links, die Datenüberprüfungslisten (als Dropdown-Editoren) und den [gesperrten Zustand der Zellen](#setting-the-locked-state-for-a-cell) wieder her.
245+
242246
**Verwandtes Beispiel**: [Spreadsheet. Xlsx importieren](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet)
243247

244248
Sie können bei Bedarf auch [Daten aus einem Spreadsheet in eine Excel-Datei exportieren](#exporting-data).
@@ -268,7 +272,7 @@ Einzelheiten zum Laden mehrerer Tabellenblätter in das Spreadsheet finden Sie i
268272

269273
## Zustand speichern und wiederherstellen {#saving-and-restoring-state}
270274

271-
Um den aktuellen Zustand eines Spreadsheets zu speichern, verwenden Sie die Methode [](api/spreadsheet_serialize_method.md). Sie konvertiert Daten in ein Array von JSON-Objekten. Jedes JSON-Objekt enthält die Konfiguration einer Zelle.
275+
Um den aktuellen Zustand eines Spreadsheets zu speichern, verwenden Sie die Methode [](api/spreadsheet_serialize_method.md). Sie konvertiert das Spreadsheet in ein JSON-Objekt mit den Attributen `sheets`, `styles` und `formats`. Neben den Zellwerten enthält der gespeicherte Zustand die angewendeten Stile und Zahlenformate, die verbundenen Zellen, die fixierten Spalten und Zeilen, die gesperrten Zellen sowie die benutzerdefinierten Größen und die Sichtbarkeit von Spalten und Zeilen.
272276

273277
~~~jsx
274278
// Zustand von spreadsheet1 speichern
@@ -328,6 +332,8 @@ spreadsheet.export.xlsx();
328332

329333
**Verwandtes Beispiel**: [Spreadsheet. Xlsx exportieren](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet)
330334

335+
Neben den Zellwerten behält eine exportierte Datei die auf Zellen angewendeten Stile, die Zahlenformate, die verbundenen Zellen, die fixierten Spalten und Zeilen, die in Zellen eingefügten Links, die Dropdown-Editoren (als Excel-Datenüberprüfung) und den [gesperrten Zustand der Zellen](#setting-the-locked-state-for-a-cell) bei. All dies wird wiederhergestellt, wenn die Datei [zurück in Spreadsheet importiert wird](#loading-excel-file-xlsx).
336+
331337
:::note
332338
Bitte beachten Sie, dass die Komponente nur den Export in Excel-Dateien mit der Erweiterung `.xlsx` unterstützt.
333339
:::

0 commit comments

Comments
 (0)