New to Kendo UI for jQuery? Start a free 30-day trial

FromJSON

methods

Loads the sheet from an object in the format defined in the sheet configuration.

The configuration and cell values will be merged.

Note: the Sheet objects are not resizable. If you use this method you must make sure that the JSON does not contain more rows or columns than defined when the Spreadsheet object has been constructed. To reload a full spreadsheet from JSON, we recommend using Spreadsheet's fromJSON method.

fromJSON

Parameters:dataObject

The object to load data from. This should be the deserialized object, not the JSON string.

<div id="spreadsheet"></div>
<pre id="result"></pre>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      name: "Food Order",
      mergedCells: [
        "A1:C1"
      ],
      rows: [{
        height: 70,
        cells: [{
          value: "Order #231", bold: "true", fontSize: 32, textAlign: "center"
        }]
      }, {
        height: 25,
        cells: [{
          value: "Product", bold: "true", textAlign: "center"
        }, {
          value: "Quantity", bold: "true", textAlign: "center"
        }, {
          value: "Price", bold: "true", textAlign: "center"
        }]
      }],
      columns: [{
        width: 200
      }, {
        width: 115
      }, {
        width: 115
      }]
    }]
  });

  // Load sheet data
  var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
  var sheet = spreadsheet.sheetByIndex(0);
  sheet.fromJSON({
    rows: [{
      index: 2,
      cells: [{
        value: "Calzone"
      }, {
        value: 1
      }, {
        value: 12.29, format: "$#,##0.00"
      }]
    }, {
      index: 3,
      cells: [{
        value: "Margarita"
      }, {
        value: 2
      }, {
        value: 9.11, format: "$#,##0.00"
      }]
    }]
  });
</script>