SpreadJS with AngularJS

SpreadJS supports AngularJS.

AngularJS is a web application framework that uses JavaScript on the client side.

Use the following steps to use SpreadJS with AngularJS.

• Add the SpreadJS AngularJS module js file, /scripts/interop/angular/gc.spread.sheets.angularjs.xxx.js.

• Add the gcspreadsheets module to your application js file. For example, if your work scope is indicated by the "ng-app" attribute named "myApp", then add code like this to your app define js file:

  angular.module("myApp", ["gcspreadsheets", "module2","module3",...])

• Add a valid SpreadJS license key before initializing the component, if available.

   <script>
      // Licensing SpreadJS. 
      GC.Spread.Sheets.LicenseKey = "xxx";        // Enter a valid license key.      
   </script>

• Add the gc-spread-sheets tag to your HTML page. Then add sheets and columns in the sheet. You can set attributes to spread, sheet, or column. For example:

   <gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">
      <worksheets>
          <worksheet frozen-column-count="1">
          </worksheet>
      </worksheets>
  </gc-spread-sheets>

The Spread, Sheet, and Column are the basic elements of tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <columns>
                <column></column>
            </columns>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

If the element's setting is a simple type or it can be set as a simple string, it will be set as the element's attribute. A simple type can be a number, string, boolean, enum, font, lineBorder, and so on, as shown in the following example:

<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <default-style backcolor="#c6e0b4" font="large Meiryo" border="#8ea9db dashed"></default-style>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

The following topics list element directives.

• Gc-spread-sheets Element

• Sheet and Sheets Elements

• Column, Columns, and Group Elements

• Style Element

• Cell Elements

• Validator Element

The attribute name is case insensitive and supports using the '-' to split every word. For example, the following code result is the same:

<column dataField="country"></column>
<column datafield="country"></column>
<column DATAFIELD="country"></column>

The attribute value supports {{binding}} to bind the scope's data. For example, this is a column with the width bound to the columnWidth:

<column width={{columnWidth}} >

This is an HTML INPUT element that binds the columnWidth using ng-model.

Column Width: <input ng-model="columnWidth" />

The column width is resized automatically when you input a number in the input element.

If you put a spread directive element or attribute to another element that does not follow the element directives, it will not take effect. You cannot reorder, insert, or remove columns defined on the HTML tag. Doing so might cause a binding value error.