Edit this page

Store Data as JSON

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

The format follows the same structure as the widget configuration. It is designed to be used both for direct storage and as an intermediate format.

Important

Once the Spreadsheet goes out of its Beta version, an official JSON schema will be published.

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.

Serialization API

The Spreadsheet client-side API includes the fromJSON and 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 widget and clears all existing data.

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

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

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy