JavaScript | Getting Started | SpreadJS JavaScript Demos

Getting Started with SpreadJS Javascript Component

With just a couple rows of code, you can embed Excel-like JavaScript spreadsheets into your enterprise applications. Below you can find instructions for creating a JavaScript Application and initializing the SpreadJS.

Steps

Create a JavaScript Application - SpreadJS is dependency free. It requires the following files: gc.spread.sheets.xx.x.x.css, gc.spread.sheets.all.xx.x.x.min.js.

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

<script src="gc.spread.sheets.all.xx.x.x.min.js">
<link rel="stylesheet" href="gc.spread.sheets.xx.x.x.css"type="text/css"/>
</head>

<body></body>
</html>

Add the SpreadJS host element - Include a DOM element as the container in the page body.
```
<div id="ss"></div>
```

Initialize JavaScript SpreadJS Component - The Spread component is initialized with new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }).

    
window.onload = function () {
// Initialize a workbook
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// get workbook object
// var workbook = GC.Spread.Sheets.findControl(document.getElementById('ss'));
};

Setting Values and Formulas

Steps

Use the setValue method to set the value of the cell and setFormula to make your calculations .

var sheet = spread.getSheet(0);
//Setting Values - Text
sheet.setText(0,0,"This is a text");
//Setting Values - Number 
sheet.setValue(1, 0, 2245);
sheet.setValue(2, 0, 345);
//Setting Values - DateTime
sheet.setValue(3, 0, new Date(2020, 10, 7).toLocaleDateString('en-US');
sheet.getRange(3, 0, 1, 1).formatter("mm-dd-yyyy");

//Setting Formula, Sum of the A2 and A3 cell
sheet.setFormula(3, 3, '=SUM(A2:A3)');

Setting Style

Give your data a more valuable and appealing look by using the functions below.

Steps

In this step, set the style for the sheet to make it more attractive and engaging.

//Setting style
sheet.setColumnWidth(1, 200);
sheet.setColumnWidth(2, 200);
sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
sheet.addSpan(1, 1, 1, 2);
sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
    all: true
});
sheet.getRange(2, 1, 3, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
    inside: true
});
sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);

Binding Data

Discover how you can bind your data with effortless efficiency.

Steps

Use the getSheet method to get the sheet you are working with. Set the cell binding source with "new GC.Spread.Sheets.Bindings.CellBindingSource(person);". Then use the setBindingPath method to set the binding path for the specified cell in the specified sheet area. Then set the data source for the sheet using the setDataSource method.

var sheet = spread.getSheet(0);
var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
sheet.setBindingPath(2, 2, 'name');
sheet.setBindingPath(3, 2, 'age');
sheet.setBindingPath(4, 2, 'gender');
sheet.setBindingPath(5, 2, 'address.postcode');
sheet.setDataSource(source);