Setting Styles

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.
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 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.
The following image displays a style in cell B2:

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);

Using Code
This example uses the setDefaultStyle method.

JavaScript

Copy Code

//setDefaultStyleactiveSheet.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); }}

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.Spread.Sheets;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));

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"); });

Page tree

Setting Styles