# Storing Data as JSON

The Spreadsheet allows you to store and load data in a native JSON format.

## Getting Started

The format follows the same structure as the [widget configuration](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/spreadsheet#configuration). It is designed to be used both for direct storage and as an [intermediate format](https://www.telerik.com/kendo-jquery-ui/documentation/controls/spreadsheet/import-and-export-data/server-side-processing).

The information that is persisted includes:

* Cell formulas, values, formatting and styling.
* Row height and column width.
* Sorting and filtering options.
* Active sheet and selection.

## Using the Serialization API

The Spreadsheet client-side API includes the [`fromJSON`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/spreadsheet/methods/fromjson) and [`toJSON`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/spreadsheet/methods/tojson) methods for loading and storing its state. To load the Spreadsheet with data, pass an object matching the required schema to `fromJSON`. This resets the component and clears all existing data.

The following example demonstrates how to load data by using `fromJSON`.

```dojo
    <div id="spreadsheet"></div>
    <script>
        $("#spreadsheet").kendoSpreadsheet();

        var spreadsheet = $("#spreadsheet").getKendoSpreadsheet();
        spreadsheet.fromJSON({
            sheets: [{
                name: "Food Order",
                mergedCells: [
                    "A1:G1"
                ],
                rows: [{
                    height: 70,
                    cells: [{
                        value: "My Company", fontSize: 32, textAlign: "center"
                    }]
                }]
            }]
        });
    </script>
```

You can also choose to load data only in a specific [sheet](https://www.telerik.com/kendo-jquery-ui/documentation/api/spreadsheet/sheet). This will not affect the data located in the other sheets, apart from the formulas that refer to it.

The following example demonstrates how to load sheet data by using `fromJSON`.

```dojo
    <div id="spreadsheet"></div>
    <script>
        $("#spreadsheet").kendoSpreadsheet({
            sheets: [{
                name: "Inventory"
            }, {
                name: "Food Order",
                mergedCells: [
                    "A1:G1"
                ],
                rows: [{
                    height: 70,
                    cells: [{
                        value: "My Company", fontSize: 32, textAlign: "center"
                    }]
                }]
            }]
        });

        var spreadsheet = $("#spreadsheet").getKendoSpreadsheet();
        spreadsheet.sheetByName("Inventory").fromJSON({
            rows: [{
                cells: [{
                    value: "Chai", textAlign: "center"
                }, {
                    value: 12
                }]
            }]
        });
    </script>
```

## See Also

* [Server-Side Import and Export in the Spreadsheet (Demo)](https://demos.telerik.com/kendo-ui/spreadsheet/server-side-import-export)
* [Spreadsheet JavaScript API Reference](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/spreadsheet)