Adding the Client Widget to a Browser Page

Use the following steps to add the client widget to a browser page.

Add the JavaScript for the page. The following code is a general example.

JavaScript	Copy Code
<!DOCTYPE html> <html> <head> <title>Spread HTML test page</title>

Add the SpreadJS scripts. Spread provides minified and debug versions of the scripts. The gc.spread.sheets.all.xxxx.min.js supports all the functions of Spread.
<script src="[Your_Scripts_Path]/gc.spread.sheets.all.xxxx.min.js" type="text/javascript"></script>
Add the CSS files to change the appearance. Use the gc.spread.sheets.xxxx.css file for a default appearance (effects the style of the scroll bar, the style of the filter dialog and child elements, cells, and tab strip).
//<link href="[Your_CSS_Path]/gc.spread.sheets.xxxx.css" rel="stylesheet" type="text/css"/> //OR <link href="[Your_CSS_Path]/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"/> <link href="[Your_CSS_Path]/bootstrap/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
Add the product license. For example, GC.Spread.Sheets.LicenseKey = “xxx”;

Implement the initialization and any other code. This example initializes the SpreadJS widget in a DOM element with an id of 'ss'.

JavaScript	Copy Code
<script type="text/javascript"> // Add your license GC.Spread.Sheets.LicenseKey = “xxx”; // Add your code window.onload = function(){ var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3}); var sheet = spread.getActiveSheet(); } </script> </head> <body>

JavaScript

Copy Code

<script type="text/javascript">
// Add your license
GC.Spread.Sheets.LicenseKey = “xxx”;
// Add your code
window.onload = function(){
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var sheet = spread.getActiveSheet();                              
}
    </script>
</head>
<body>

Create the DOM element that is the target of the SpreadJS widget.

JavaScript	Copy Code
<div id="ss" style="height: 500px; width: 800px"></div> </body> </html>

<!DOCTYPE html> is required to view the widget properly.