SpreadJS 14
Features / Cells / Styles
In This Topic
    Styles
    In This Topic

    You can create a style using the Style object or you can create your own named style that uses a Style object. The style can contain settings such as borders, colors, and fonts. You can set styles for the cell, row, column, and the sheet.

    The cell style is a composite of settings that are applied based on a priority. The style in the cell has the highest priority. The style of the row the cell is in is next, then the column the cell is in, and then the default style of the sheet.

    Style objects can be assigned using the setStyle method. Use -1 to specify an entire row or entire column.

    Set Style for a Cell

    You can create a style and apply it to a cell in a spreadsheet using the setStyle method.

    The following image displays a style in cell B2:

    Cell styling

    Using Code

    This example uses the setStyle method to assign a style to a cell.

    JavaScript
    Copy Code
    var style = new GC.Spread.Sheets.Style();
    style.backColor = "red";
    style.borderLeft = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
    style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
    style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
    style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
    activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
    //row
    //activeSheet.setStyle(1,-1,style,GC.Spread.Sheets.SheetArea.viewport);
    //column
    //activeSheet.setStyle(-1,2,style,GC.Spread.Sheets.SheetArea.viewport);
    

    Set Default Style

    You can specify a default style for the cells in a spreadsheet by using the SetDefaultStyle method.

    The following image displays the default style for the cells.

    Default styling 

    Using Code

    This example uses the setDefaultStyle method.

    JavaScript
    Copy Code
    //setDefaultStyle
    activeSheet.setRowCount(5, GC.Spread.Sheets.SheetArea.viewport);
    activeSheet.setColumnCount(5, GC.Spread.Sheets.SheetArea.viewport);
    //Set the default styles.
    var defaultStyle = new GC.Spread.Sheets.Style();
    defaultStyle.backColor = "LemonChiffon";
    defaultStyle.foreColor = "Red";
    defaultStyle.formatter = "0.00";
    defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
    defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
    defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
    defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
    activeSheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
    var rowCount = activeSheet.getRowCount();
    var colCount = activeSheet.getColumnCount();
    for(var i = 0; i < rowCount; i++){
        for(var j = 0; j < colCount; j++){
            activeSheet.setValue(i, j, i+j, GC.Spread.Sheets.SheetArea.viewport);
        }
    }
    

    Set Style for a Range

    You can specify a style and apply it to a range of cells in a spreadsheet.

    The following image displays styles for cells, rows, and columns in a spreadsheet.

    Applying style to a range of cells in a spreadsheet

    Using Code

    This example displays the results when setting styles for cells, rows, and columns.

    JavaScript
    Copy Code
    activeSheet.setRowCount(15);
    activeSheet.setColumnCount(14);
    var ns = GC.SpreadJS;
    var style = activeSheet.getDefaultStyle();
    style.backColor = "lightgray";
    style.foreColor = "purple";
    style.borderLeft = new ns.LineBorder("red", ns.LineStyle.hair);
    style.borderTop = new ns.LineBorder("red", ns.LineStyle.hair);
    style.borderRight = new ns.LineBorder("red", ns.LineStyle.hair);
    style.borderBottom = new ns.LineBorder("red", ns.LineStyle.hair);
    var cell = activeSheet.getRange(3, 3, 6, 6);
    cell.value(10);
    cell.formatter("0.0%");
    cell.backColor("lightgreen");
    cell.borderLeft(new ns.LineBorder("gray", ns.LineStyle.double));
    cell.borderTop(new ns.LineBorder("gray", ns.LineStyle.double));
    cell.borderRight(new ns.LineBorder("gray", ns.LineStyle.double));
    cell.borderBottom(new ns.LineBorder("gray", ns.LineStyle.double));
    var row = activeSheet.getRange(2, -1, 8, -1);
    row.backColor("lightblue");
    row.borderLeft(new ns.LineBorder("green", ns.LineStyle.dashed));
    row.borderRight(new ns.LineBorder("green", ns.LineStyle.dashed));
    var col = activeSheet.getRange(-1, 2, -1, 8);
    col.backColor("pink");
    col.borderTop(new ns.LineBorder("blue", ns.LineStyle.dashed));
    col.borderBottom(new ns.LineBorder("blue", ns.LineStyle.dashed));
    

    Set Named Style

    You can create your own named style and add it to the sheet or the spread with the addNamedStyle method. You can change the style settings or remove the named style. Use the setStyleName method to use the style on a cell. Use -1 to specify an entire row or entire column.

    Named Style Example

    Named styles are useful if a style is used many times or in many cells. Use a named style with a JSON data store or Excel import and export since less data is used.

    Using Code

    This example uses a named style to set a style for several cells. Use the button to remove the style.

    JavaScript
    Copy Code
    <input type="button" id="button1" value="button1"/>
    var namedStyle = new GC.Spread.Sheets.Style();
    namedStyle.name = "style1";
    namedStyle.backColor = "green";
    activeSheet.addNamedStyle(namedStyle);
    activeSheet.setStyleName(1, 1, "style1"); // cell(1,1)'s backColor is green.
    activeSheet.setStyleName(2, 1, "style1");
     
    var style = activeSheet.getNamedStyle("style1");
    style.foreColor = "red";    // the namedStyle's foreColor is red.
    activeSheet.repaint(); // the foreColor of the cell(1,1) and cell(2,1) is red.
    activeSheet.getCell(1,1).value("test");
    $("#button1").click(function () {
    activeSheet.removeNamedStyle("style1");
        });
    
    See Also