[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

Initializing SpreadJS

After adding references in the code editor, follow the steps below to initialize SpreadJS.

  1. Add the following code which creates the SpreadJS target DOM element.

  2. Initialize SpreadJS in spread-container using any one of the following ways:

    1. Using document method to pick DOM ID.

      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });

    2. Using the DOM ID directly.

      var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });

  3. Save it as an HTML file. For example, ‘index.html’. The HTML page will now look like this:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- a) Add SpreadJS Script and CSS-->
    <!-- a1) Add SpreadJS Script file-->
    <script type="text/javascript"
            src="SpreadJS\gc.spread.sheets.all.x.x.x.min.js"></script>

    <!-- a2) Add CSS File-->
    <link href="SpreadJS\gc.spread.sheets.x.x.x.css"
          rel="stylesheet"
          type="text/css" />
    <style>
        .spread-container {
            height: 550px;
        }
    </style>
</head>
<body>
    <h1>SpreadJS</h1>
    <p>This section goes over how to initialize SpreadJS</p>
    <div class="sample-container">
        <!-- b) Create SpreadJS's target DOM element, HTML DIV with id ss-->
        <div id="ss" class="spread-container"></div>
    </div>
</body>
<script>
    // c) Initialize SpreadJS in spread-container by div's id "ss"
    window.onload = function ()
    {
        var spread = new GC.Spread.Sheets.Workbook(
            document.getElementById( "ss" ),
            { sheetCount: 1 }
        );

        // Alternatively, initialize SpreadJS using the DOM ID directly
        // var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });
    };
</script>
</html>

  4. Open the HTML file in browser to view the SpreadJS widget.

ASP.NET Web Application

You can also create an ASP.NET Web application to view the SpreadJS widget:

  1. Create an Empty ASP.Net Web Application in Visual Studio.

  2. Create 'scripts' folder in your project's root location and include following script file:

    gc.spread.sheets.all.x.x.x.min.js

    To add export functionality, add following additional script file:

    gc.spread.sheets.excelio.x.x.x.min.js

  3. Create 'css' folder in your project's root location and include following css:

    gc.spread.sheets.x.x.x.css

  4. Add an HTML Page to Visual Studio project.

  5. Modify the content of the added HTML Page to:

    1. Add reference of SpreadJS script and css file

    2. Create SpreadJS target DOM element

    3. Initialize SpreadJS in spread-container by using any of the following ways:

      1. Using document method to pick DOM ID.

        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });

      2. Using the DOM ID directly.

        var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- a:- Add Script & css file-->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
    <link href="css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
    <script>
        $( document ).ready( function ()
        {
             // Note: Apply license key here, before the Workbook is initialized
             // GC.Spread.Sheets.LicenseKey = " [your Distribution license key here]";

            // c:- Initialize SpreadJS in spread-container by div's id "ss"
            // initializing Spread
            var spread = new GC.Spread.Sheets.Workbook( document.getElementById( "ss" ) );

            // alternatively, initialize SpreadJS using the DOM ID directly
            var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });

            // get the activesheet
            var sheet = spread.getActiveSheet();
        } );

    </script>
</head>
<body>
    <h1>SpreadJS</h1>
    <p>This section initializes SpreadJS</p>
    <!-- b:- Create SpreadJS's target DOM element, HTML DIV with id ss-->
    <div id="ss" style="height:700px;width:900px"></div>
</body>
</html>

  6. View the HTML Page in browser to view SpreadJS widget.