SpreadJS 13
SpreadJS Documentation / Developer's Guide / JavaScript Frameworks / SpreadJS with AngularJS
In This Topic
    SpreadJS with AngularJS
    In This Topic

    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.

    1. Add the SpreadJS AngularJS module js file, "/scripts/interop/angular.gc.spread.sheets.xxx.js".
    2. 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",...])

    3. 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:
      JavaScript
      Copy Code
      <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 with tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

    JavaScript
    Copy Code
    <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 number, string, Boolean, enum, font, lineBorder, and so on, as shown in the following example:

    JavaScript
    Copy Code
    <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>
    

    If the element's setting is an object type and it cannot be set as a simple string, it will be set as a child element of the basic element. The child element may have another child element. For example:

    JavaScript
    Copy Code
    <gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
        <worksheets>
            <worksheet>
                <columns>
                    <column width="100">
                       <default-style formatter="#,##0.00">
                            <number-validator comparisonoperator="GreaterThan" value1="0"></number-validator>
                       </default-style>                 
                    </column>
                </columns>
            </worksheet>
        </worksheets>
    </gc-spread-sheets>
    

    The following topics list element directives.

    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>
    <column data-field="country"></column>
    <column Data-Field="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.