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

  1. 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>
                                    
    
  2. Add the SpreadJS host element - Include a DOM element as the container in the page body.
    <div id="ss"></div>
    
  3. 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

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

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

  1. 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);