Designer Component: Display file onload with JavaScript

Background:

To dynamically load JSON data to SpreadJS, we will be sure to include the proper script and css files, then define the JSON data, and finally we will load the SpreadJS instance with the data using the fromJSON method within the window.onload function

Steps to Complete:

1. Define JSON data

2. Use the fromJSON method

Getting Started:

Step 1: Define JSON data

Define the JSON data within your project. For this example we have included a JavaScript file in the header of our project that contains JSON data. This file was created with the SpreadJS Designer app and was exported to JS. This file contains JSON data following SpreadJS JSON Schema to display a worksheet within the instance:

<script src="/data.js"></script>

Step 2: Use the fromJSON method

Using SpreadJS’s workbook method fromJSON we will load the objects state from the data JSON string like so:

		window.onload = function () {
			var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
			var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);
            // Loading JSON data to the SpreadJS instance
			spread.fromJSON(data);
		}

After applying the code as descripted above, we will now see the SpreadJS instance loading JSON data with the Designer Components: