SpreadJS Documentation
Using the Style Element
SpreadJS Documentation > Developer's Guide > Working with JavaScript Frameworks > Using SpreadJS with AngularJS > Using the Style Element

The following table lists the attributes of the style element.

Attribute API Reference Type Comment
backColor style.backColor string  
backgroundImage style.backgroundImage string  
backgroundImageLayout spread.backgroundImageLayout(value) GC.Spread.Sheets.ImageLayout  
border style.borderLeft, borderTop, borderRight, borderBottom string Setting the border attribute sets borderLeft, borderTop, borderRight, and borderBottom at the same time
borderBottom style.borderBottom string  
borderLeft style.borderLeft string  
borderRight style.borderRight string  
borderTop style.borderTop string  
font style.font string  
foreColor style.foreColor string  
formatter style.formatter string  
hAlign style.hAlign GC.Spread.Sheets.HorizontalAlign  
locked style.locked boolean  
shrinkToFit style.shrinkToFit boolean  
textIndent style.textIndent number  
themeFont style.themeFont string  
vAlign style.vAlign GC.Spread.Sheets.VerticalAlign  
wordWrap style.wordWrap boolean  

The following table lists the child elements of the style element.

Child Element API Reference Count Type Comments
dateValidator style.validator 1 dateValidator  
formulaValidator style.validator 1 formulaValidator  
formulaListValidator style.validator 1 formulaListValidator  
listValidator style.validator 1 listValidator  
numberValidator style.validator 1 numberValidator  
textLengthValidator style.validator 1 textLengthValidator  
ButtonCellType style.cellType 1 GC.Spread.Sheets.CellTypes.Button If you add more then one cell type to a style, the last cell type overrides the previous cell types
CheckBoxCellType style.cellType 1 GC.Spread.Sheets.CellTypes.CheckBox If you add more then one cell type to a style, the last cell type overrides the previous cell types
ComboBoxCellType style.cellType 1 GC.Spread.Sheets.CellTypes.ComboBox If you add more then one cell type to a style, the last cell type overrides the previous cell types
HyperLinkCellType style.cellType 1 GC.Spread.Sheets.CellTypes.HyperLink If you add more then one cell type to a style, the last cell type overrides the previous cell types
TextCellType style.cellType 1 GC.Spread.Sheets.CellTypes.Text If you add more then one cell type to a style, the last cell type overrides the previous cell types

The following example uses a style element.

<gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <columns>
                <column>
                    <default-style formatter="#,##0.00">
                        <number-validator comparisonoperator="GreaterThan" value1="0"></number-validator>
                    </default-style>
                </column>
                <column>
                    <default-style>
                        <list-validator list="Japan,Germany,UK,Italy,US"></list-validator>
                    </default-style>
                </column>
                <column>
                    <default-style>
                        <button-cell-type text="click me"></button-cell-type>
                    </default-style>
                </column>
            </columns>
        </worksheet>
    </worksheets>
</gc-spread-sheets>