Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/api/export_xlsx_method.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ spreadsheet.export.xlsx("MyData");
Note that the component supports export to Excel files with the `.xlsx` extension only.
:::

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).

:::info
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).
:::
Expand Down
4 changes: 3 additions & 1 deletion docs/api/spreadsheet_lock_method.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,6 @@ where `sheet1` is the name of the tab.
If the name of the tab isn't specified, the method locks the cell(s) of the active tab.
:::

**Related sample**: [Spreadsheet. Locked Cells](https://snippet.dhtmlx.com/czeyiuf8)
**Related sample**: [Spreadsheet. Locked Cells](https://snippet.dhtmlx.com/czeyiuf8)

**Related article:** [Locking cells](working_with_cells.md#locking-cells)
81 changes: 71 additions & 10 deletions docs/api/spreadsheet_serialize_method.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,30 +13,91 @@ description: You can learn about the serialize method in the documentation of th
### Usage

~~~jsx
serialize(): object;
serialize(): {
sheets: [
{
name: string,
id: string,
data: [
{
cell: string,
value?: string | number,
css?: string,
format?: string,
editor?: {
type: string, // type: "select"
options: string | array
},
locked?: boolean,
link?: {
text?: string,
href: string
}
},
// more cell objects
],
cols: [
{
width: number,
hidden: boolean
},
// more column objects
],
rows: [
{
height: number,
hidden: boolean
},
// more row objects
],
merged: [
{
from: { column: number, row: number },
to: { column: number, row: number }
},
// more objects
],
freeze: {
col: number,
row: number
}
},
// more sheet objects
],
styles: object,
formats: array
};
~~~

### Returns

The method returns a serialized JSON object

The serialized data is an object with the following attributes:
The method returns a serialized JSON object with the following attributes:

- `formats` - an array of objects with number formats
- `styles` - an object with the applied CSS classes
- `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
- `sheets` - an array of sheet objects. Each object contains the following attributes:
- `name` - the sheet name
- `data` - an array of data objects
- `rows` - an array of height objects
- `cols` - an array of width objects
- `name` - the sheet name
- `id` - the sheet id
- `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`
- `cols` - an array of objects with columns configurations. Each object contains the `width` and `hidden` attributes
- `rows` - an array of objects with rows configurations. Each object contains the `height` and `hidden` attributes
- `merged` - an array of objects where each object defines a range of merged cells via the `from` and `to` attributes
- `freeze` - an object with the number of fixed columns and rows, `{ col: 0, row: 0 }` if nothing is frozen

Note that:

- 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
- 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
- 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
- the returned object can be passed to the [](api/spreadsheet_parse_method.md) method as is

### Example

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

const data = spreadsheet.serialize();
const state = spreadsheet.serialize();
~~~

**Related article:** [Data loading and export](loading_data.md#saving-and-restoring-state)
8 changes: 7 additions & 1 deletion docs/loading_data.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,8 @@ const dataset = [

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

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).

**Related sample**: [Spreadsheet. Locked cells](https://snippet.dhtmlx.com/czeyiuf8?tag=spreadsheet)

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

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

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).

**Related sample**: [Spreadsheet. Import Xlsx](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet)

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

## Saving and restoring state

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.
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.

~~~jsx
// saving state of the spreadsheet1
Expand Down Expand Up @@ -328,6 +332,8 @@ spreadsheet.export.xlsx();

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

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).

:::note
Please note that the component supports export to Excel files with the `.xlsx` extension only.
:::
Expand Down
11 changes: 11 additions & 0 deletions docs/whats_new.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,17 @@ description: You can learn what's new in the DHTMLX JavaScript Spreadsheet libra

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

## Version 6.0.3

Released on August 24, 2026

### Fixes

- Custom column and row sizes were lost by the `serialize()` method if the cells were empty
- Scroll "jumping" in Chrome when a selected cell re-entered the viewport
- Some formulas disappeared after importing data from an Excel file
- The "locked" state of cells was lost during Excel export and import

## Version 6.0.2

Released on July 1, 2026
Expand Down
9 changes: 9 additions & 0 deletions docs/working_with_cells.md
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,15 @@ var cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6");

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.

### Saving the locked state

The locked state of cells is a part of the spreadsheet data, so it survives saving and restoring:

- the [](api/spreadsheet_serialize_method.md) method includes the `locked` property into the serialized cell objects, even if a locked cell has no value
- [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

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).

## Merging cells

### Merge cells
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ spreadsheet.export.xlsx("MyData");
Beachten Sie, dass die Komponente den Export in Excel-Dateien ausschließlich mit der Erweiterung `.xlsx` unterstützt.
:::

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.

:::info
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).
:::
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,5 @@ Wenn der Name des Tabs nicht angegeben wird, sperrt die Methode die Zelle(n) des
:::

**Verwandtes Beispiel**: [Spreadsheet. Gesperrte Zellen](https://snippet.dhtmlx.com/czeyiuf8)

**Verwandter Artikel:** [Zellen sperren](working_with_cells.md#locking-cells)
Original file line number Diff line number Diff line change
Expand Up @@ -13,30 +13,91 @@ description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek e
### Verwendung {#usage}

~~~jsx
serialize(): object;
serialize(): {
sheets: [
{
name: string,
id: string,
data: [
{
cell: string,
value?: string | number,
css?: string,
format?: string,
editor?: {
type: string, // type: "select"
options: string | array
},
locked?: boolean,
link?: {
text?: string,
href: string
}
},
// more cell objects
],
cols: [
{
width: number,
hidden: boolean
},
// more column objects
],
rows: [
{
height: number,
hidden: boolean
},
// more row objects
],
merged: [
{
from: { column: number, row: number },
to: { column: number, row: number }
},
// more objects
],
freeze: {
col: number,
row: number
}
},
// more sheet objects
],
styles: object,
formats: array
};
~~~

### Rückgabewert {#returns}

Die Methode gibt ein serialisiertes JSON-Objekt zurück

Die serialisierten Daten sind ein Objekt mit den folgenden Attributen:
Die Methode gibt ein serialisiertes JSON-Objekt mit den folgenden Attributen zurück:

- `formats` - ein Array von Objekten mit Zahlenformaten
- `styles` - ein Objekt mit den angewendeten CSS-Klassen
- `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
- `sheets` - ein Array von Tabellenblatt-Objekten. Jedes Objekt enthält die folgenden Attribute:
- `name` - der Name des Tabellenblatts
- `data` - ein Array von Datenobjekten
- `rows` - ein Array von Höhenobjekten
- `cols` - ein Array von Breitobjekten
- `name` - der Name des Tabellenblatts
- `id` - die ID des Tabellenblatts
- `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`
- `cols` - ein Array von Objekten mit Spaltenkonfigurationen. Jedes Objekt enthält die Attribute `width` und `hidden`
- `rows` - ein Array von Objekten mit Zeilenkonfigurationen. Jedes Objekt enthält die Attribute `height` und `hidden`
- `merged` - ein Array von Objekten, wobei jedes Objekt über die Attribute `from` und `to` einen Bereich verbundener Zellen definiert
- `freeze` - ein Objekt mit der Anzahl der fixierten Spalten und Zeilen, `{ col: 0, row: 0 }`, wenn nichts fixiert ist

Beachten Sie:

- 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
- 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
- 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
- das zurückgegebene Objekt kann unverändert an die Methode [](api/spreadsheet_parse_method.md) übergeben werden

### Beispiel {#example}

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

const data = spreadsheet.serialize();
const state = spreadsheet.serialize();
~~~

**Verwandter Artikel:** [Datenladen und -export](loading_data.md#saving-and-restoring-state)
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,8 @@ const dataset = [

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

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.

**Verwandtes Beispiel**: [Spreadsheet. Gesperrte Zellen](https://snippet.dhtmlx.com/czeyiuf8?tag=spreadsheet)

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

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

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.

**Verwandtes Beispiel**: [Spreadsheet. Xlsx importieren](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet)

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

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

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.
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.

~~~jsx
// Zustand von spreadsheet1 speichern
Expand Down Expand Up @@ -328,6 +332,8 @@ spreadsheet.export.xlsx();

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

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).

:::note
Bitte beachten Sie, dass die Komponente nur den Export in Excel-Dateien mit der Erweiterung `.xlsx` unterstützt.
:::
Expand Down
11 changes: 11 additions & 0 deletions i18n/de/docusaurus-plugin-content-docs/current/whats_new.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,17 @@ description: Sie erfahren in der Dokumentation, was neu in der DHTMLX JavaScript

Wenn Sie Spreadsheet von einer älteren Version aktualisieren, lesen Sie die [Migration auf eine neuere Version](migration.md) für Details.

## Version 6.0.3 {#version-603}

Veröffentlicht am 24. August 2026

### Fehlerbehebungen {#fixes-603}

- Benutzerdefinierte Spalten- und Zeilengrößen gingen bei der Methode `serialize()` verloren, wenn die Zellen leer waren
- "Springendes" Scrollen in Chrome, wenn eine ausgewählte Zelle wieder in den sichtbaren Bereich gelangte
- Einige Formeln verschwanden nach dem Importieren von Daten aus einer Excel-Datei
- Der Zustand "gesperrt" von Zellen ging beim Excel-Export und -Import verloren

## Version 6.0.2 {#version-602}

Veröffentlicht am 1. Juli 2026
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,15 @@ var cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6");

Die Methode gibt `true` oder `false` zurück, abhängig vom Zustand der Zelle. Wenn mehrere Zellen gleichzeitig geprüft werden, gibt die Methode `true` zurück, wenn mindestens eine gesperrte Zelle unter den angegebenen Zellen vorhanden ist.

### Speichern des gesperrten Zustands {#saving-the-locked-state}

Der gesperrte Zustand der Zellen ist Teil der Spreadsheet-Daten und bleibt daher beim Speichern und Wiederherstellen erhalten:

- die Methode [](api/spreadsheet_serialize_method.md) nimmt die Eigenschaft `locked` in die serialisierten Zellobjekte auf, auch wenn eine gesperrte Zelle keinen Wert hat
- der [Export in eine Excel-Datei](loading_data.md#export-into-excel) behält den gesperrten Zustand bei, und der [Import einer solchen Datei](loading_data.md#loading-excel-file-xlsx) stellt ihn wieder her

Sie können den gesperrten Zustand auch direkt im Datensatz über die Eigenschaft `locked` einer Zelle festlegen. [Weitere Details](loading_data.md#setting-the-locked-state-for-a-cell).

## Zellen zusammenführen {#merging-cells}

### Zellen zusammenführen {#merge-cells}
Expand Down
Loading
Loading