[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

GC.Spread.Sheets.Style

Class: Style

Spread.Sheets.Style

Table of contents

Constructors

Properties

Methods

Constructors

constructor

• new Style(backColor?, foreColor?, hAlign?, vAlign?, font?, themeFont?, formatter?, borderLeft?, borderTop?, borderRight?, borderBottom?, locked?, textIndent?, wordWrap?, showEllipsis?, shrinkToFit?, backgroundImage?, cellType?, backgroundImageLayout?, tabStop?, textDecoration?, imeMode?, name?, parentName?, watermark?, cellPadding?, labelOptions?, quotePrefix?, diagonalDown?, diagonalUp?, isVerticalText?, cellButtons?, dropdown?, textOrientation?, decoration?, mask?, fontStyle?, fontWeight?, fontSize?, fontFamily?, hidden?, textDirection?)

Represents the style for a cell, row, and column.

example

//This example uses a style with rules.
activeSheet.setArray(0,0,[1,2,3,4,5,6,7,8,9,10]);
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.foreColor = "black";
var cell = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
cell.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.cellValueRule);
cell.operator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan);
cell.value1(5);
cell.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
cell.style(style);
activeSheet.conditionalFormats.addRule(cell);
var style1 = new GC.Spread.Sheets.Style();
style1.foreColor = "red";
var top = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
top.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.top10Rule);
top.type(GC.Spread.Sheets.ConditionalFormatting.Top10ConditionType.top);
top.rank(3);
top.style(style1);
top.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
top.stopIfTrue(true);
activeSheet.conditionalFormats.addRule(top);

example

//This example creates and sets parameters for the style.
sheet.setValue(0,0, 1,3);
sheet.setValue(1,0, 50,3);
sheet.setValue(2,0, 100,3);
sheet.setValue(3,0, 2,3);
sheet.setValue(4,0, 60,3);
sheet.setValue(5,0, 90,3);
sheet.setValue(6,0, 3,3);
sheet.setValue(7,0, 40,3);
sheet.setValue(8,0, 70,3);
sheet.setValue(9,0, 5,3);
sheet.setValue(10,0, 35,3);
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);
sheet.conditionalFormats.addAverageRule(GC.Spread.Sheets.ConditionalFormatting.AverageConditionType.above, style, [new GC.Spread.Sheets.Range(0, 0, 10, 3)]);

Parameters

Name Type
backColor? string | IGradientFill | IGradientPathFill | IPatternFill
foreColor? string
hAlign? HorizontalAlign
vAlign? VerticalAlign
font? string
themeFont? string
formatter? string | GeneralFormatter
borderLeft? LineBorder
borderTop? LineBorder
borderRight? LineBorder
borderBottom? LineBorder
locked? boolean
textIndent? number
wordWrap? boolean
showEllipsis? boolean
shrinkToFit? boolean
backgroundImage? string
cellType? Base
backgroundImageLayout? ImageLayout
tabStop? boolean
textDecoration? TextDecorationType
imeMode? ImeMode
name? string
parentName? string
watermark? string
cellPadding? string
labelOptions? ILabelOptions
quotePrefix? boolean
diagonalDown? LineBorder
diagonalUp? LineBorder
isVerticalText? boolean
cellButtons? ICellButton[]
dropdown? IDropdown[]
textOrientation? number
decoration? TextDecorationType
mask? IMaskType
fontStyle? string
fontWeight? string
fontSize? string
fontFamily? string
hidden? boolean
textDirection? TextDirectionType

Properties

applyAlignment

• applyAlignment: boolean

Only work for namedStyle, the boolean value indicates whether the alignment formatting applied.

example

//This example sets the applyAlignment property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyAlignment = false;
spread.addNamedStyle(style);

applyBorder

• applyBorder: boolean

Only work for namedStyle, the boolean value indicates whether the border formatting applied.

example

//This example sets the applyBorder property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyBorder = false;
spread.addNamedStyle(style);

applyFill

• applyFill: boolean

Only work for namedStyle, the boolean value indicates whether the fill formatting applied.

example

//This example sets the applyFill property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyFill = false;
spread.addNamedStyle(style);

applyFont

• applyFont: boolean

Only work for namedStyle, the boolean value indicates whether the font formatting applied.

example

//This example sets the applyFont property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyFont = false;
spread.addNamedStyle(style);

applyNumberFormat

• applyNumberFormat: boolean

Only work for namedStyle, the boolean value indicates whether the number formatting applied.

example

//This example sets the applyNumberFormat property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyNumberFormat = false;
spread.addNamedStyle(style);

applyProtection

• applyProtection: boolean

Only work for namedStyle, the boolean value indicates whether the protection formatting applied.

example

//This example sets the applyProtection property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyProtection = false;
spread.addNamedStyle(style);

backColor

• backColor: undefined | string | IGradientFill | IGradientPathFill | IPatternFill

Indicates the background color.

example

//This example sets the style backColor property.
activeSheet.setArray(0,0,[1,2,3,4,5,6,7,8,9,10]);
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.foreColor = "black";
var cell = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
cell.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.cellValueRule);
cell.operator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan);
cell.value1(5);
cell.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
cell.style(style);
activeSheet.conditionalFormats.addRule(cell);
var style1 = new GC.Spread.Sheets.Style();
style1.foreColor = "red";
var top = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
top.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.top10Rule);
top.type(GC.Spread.Sheets.ConditionalFormatting.Top10ConditionType.top);
top.rank(3);
top.style(style1);
top.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
top.stopIfTrue(true);
activeSheet.conditionalFormats.addRule(top);

backgroundImage

• backgroundImage: undefined | string

Indicates the background image.

example

//This example sets the backgroundImage property.
var style = new GC.Spread.Sheets.Style();
style.backColor = "lightgreen";
style.backgroundImage = "./css/images/quarter1.png";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

backgroundImageLayout

• backgroundImageLayout: undefined | ImageLayout

Indicates the background image layout.

example

//This example sets the backgroundImageLayout property.
var style = new GC.Spread.Sheets.Style();
style.backColor = "lightgreen";
style.backgroundImage = "./css/images/quarter1.png";
style.backgroundImageLayout  = GC.Spread.Sheets.ImageLayout.center;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

borderBottom

• borderBottom: undefined | LineBorder

Indicates the bottom border line.

example

//This example creates a border.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
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);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

borderLeft

• borderLeft: undefined | LineBorder

Indicates the left border line.

example

//This example creates a border.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
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);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

borderRight

• borderRight: undefined | LineBorder

Indicates the right border line.

example

//This example creates a border.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
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);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

borderTop

• borderTop: undefined | LineBorder

Indicates the top border line.

example

//This example creates a border.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
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);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

cellButtons

• cellButtons: undefined | ICellButton[]

Indicates the cellButtons of cell.

property [caption] - Specific the text of the button to display

property [captionAlign] - Specific the position of image and caption.

property [position] - Specific the button's position in cell

property [enabled] - Specific whether the cell button responds to user actions, default value is true.

property [useButtonStyle] - Specific whether the cellButton is a button style, default value is false.

property [width] - Specific the button's width. If it is set to null or undefined, the button width is auto fit based on the caption and image size.

property [visibility] - Specific the button can be visible always, onSelected, onEditing, default value is always.

property {string | function} [command] - When click button, allow user to execute a spread command or user can execute a callback.

property [imageType] - Specific the button's type (the type of image to display in the button). Provide some predefined type for cellButton, custom allow to specific icon.

property [imageSrc] - When imageType is custom, can specific a image (base64) by imageSrc.

property [imageSize] - Specific the image's size, default value is 16px.

property [hoverBackColor] - Specific the hover backColor of cell button when the button is visible and enable.

property [buttonBackColor] - Specific the backColor of cell button when the button is enable.

example

buttonConfig1 = {
    caption: "left",
    enabled: true,
    buttonBackColor: "#174EA6",
    visibility:GC.Spread.Sheets.ButtonVisibility.always,
};
buttonConfig2 = {
    caption: "left",
    enabled: true,
    hoverBackColor: "#3390FF",
    visibility:GC.Spread.Sheets.ButtonVisibility.onSelected,
};
buttonConfig3 = {
    caption: "Cut",
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    useButtonStyle: true,
    imageSrc:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvb...", //This is not a complete base64 string
};
//create style
var style = new GC.Spread.Sheets.Style();
style.cellButtons=[
     buttonConfig1,
     buttonConfig2,
     buttonConfig3
];
sheet.setStyle(0, 0, style);

cellPadding

• cellPadding: undefined | string

Indicates the cell padding.

example

//This example sets the cell padding for the watermark.
var type = new GC.Spread.Sheets.Style();
type.watermark = "User name";
type.cellPadding = "20";
type.labelOptions = {alignment:GC.Spread.Sheets.LabelAlignment.topLeft, visibility: GC.Spread.Sheets.LabelVisibility.visible};
activeSheet.setStyle(0, 1, type);
activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);
activeSheet.getRange(-1, 1, -1, 1).width(150);
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
activeSheet.setCellType(2, 1, combo, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).watermark("ComboBox Cell Type").cellPadding('10 10 20 10');
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).labelOptions({alignment: GC.Spread.Sheets.LabelAlignment.bottomCenter, foreColor: 'yellowgreen', font: 'bold 15px Arial'});
activeSheet.getRange(2, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);

cellType

• cellType: undefined | Base

Indicates the cell type.

example

//This example creates a style and applies it to a cell.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
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);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

decoration

• decoration: IDecoration

Define a decorator for cell to better represent cell.

example

//This example sets the decoration property for Style.
var style = new GC.Spread.Sheets.Style();
style.decoration = {
    cornerFold: {
       size: 6,
       position: GC.Spread.Sheets.CornerPosition.leftTop,
       color: "red"
    },
    icons: [
         {
             src: './icon.png',
             width: 12,
             height: 12,
             position: GC.Spread.Sheets.IconPosition.left,
         }
    ]
}

diagonalDown

• diagonalDown: undefined | LineBorder

Indicates the diagonalDown border line.

example

activeSheet.getRange(-1, 3, -1, 1, GC.Spread.Sheets.SheetArea.viewport).diagonalDown(new GC.Spread.Sheets.LineBorder("blue", GC.Spread.Sheets.LineStyle.mediumDashed));

diagonalUp

• diagonalUp: undefined | LineBorder

Indicates the diagonalUp border line.

example

activeSheet.getRange(-1, 3, -1, 1, GC.Spread.Sheets.SheetArea.viewport).diagonalUp(new GC.Spread.Sheets.LineBorder("blue", GC.Spread.Sheets.LineStyle.mediumDashed));

• dropDowns: undefined | IDropdown[]

Indicates the dropdown type of cell.

example

leftButtonConfig1 = {
    caption: "left",
    enabled: true,
    isLeft: true,
    visibility:GC.Spread.Sheets.ButtonVisibility.always,
    command: "opendropdown"
}
//create style
var style = new GC.Spread.Sheets.Style();
style.cellButtons=[
     leftButtonConfig1
];
style.dropDowns= [{ type: "colorPicker" }];
sheet.setStyle(0, 0, style);

font

• font: undefined | string

Indicates the font.

example

//This example sets the font property.
var style = new GC.Spread.Sheets.Style();
style.font = "8pt Arial";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");

fontFamily

• fontFamily: undefined | string

Indicates the fontFamily.

example

//This example sets the fontFamily property.
var style = new GC.Spread.Sheets.Style();
style.fontFamily = "Arial";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");

fontSize

• fontSize: undefined | string

Indicates the fontSize.

example

//This example sets the fontSize property.
var style = new GC.Spread.Sheets.Style();
style.fontSize = "22px";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");

fontStyle

• fontStyle: undefined | string

Indicates the fontStyle.

example

//This example sets the fontStyle property.
var style = new GC.Spread.Sheets.Style();
style.fontStyle = "italic";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");

fontWeight

• fontWeight: undefined | string

Indicates the fontWeight.

example

//This example sets the fontWeight property.
var style = new GC.Spread.Sheets.Style();
style.fontWeight = "bold";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");

foreColor

• foreColor: undefined | string

Indicates the foreground color.

example

//This example sets the foreColor property.
activeSheet.setArray(0,0,[1,2,3,4,5,6,7,8,9,10]);
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.foreColor = "black";
var cell = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
cell.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.cellValueRule);
cell.operator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan);
cell.value1(5);
cell.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
cell.style(style);
activeSheet.conditionalFormats.addRule(cell);
var style1 = new GC.Spread.Sheets.Style();
style1.foreColor = "red";
var top = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
top.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.top10Rule);
top.type(GC.Spread.Sheets.ConditionalFormatting.Top10ConditionType.top);
top.rank(3);
top.style(style1);
top.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
top.stopIfTrue(true);
activeSheet.conditionalFormats.addRule(top);

formatter

• formatter: undefined | string | GeneralFormatter

Indicates the formatter.

example

//This example uses the formatter property.
var style = new GC.Spread.Sheets.Style();
style.formatter = "0.000%";
style.themeFont = "Body";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("11");

hAlign

• hAlign: undefined | HorizontalAlign

Indicates the horizontal alignment.

example

//This example sets the hAlign property.
var style = new GC.Spread.Sheets.Style();
style.font = "8pt Arial";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");

hidden

• hidden: undefined | boolean

Indicates whether a cell formula is visible or not when sheet is protected.

example

//This example hidden a single cell.
activeSheet.options.isProtected = true;
activeSheet.setValue(1, 1, "=SUM(1,2)");
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);
style.hidden = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

imeMode

• imeMode: undefined | ImeMode

Indicates the Input Method Editor (IME) mode.

deprecated This property currently only works in Internet Explorer.

example

//This example sets the IME mode.
var style = new GC.Spread.Sheets.Style();
style.imeMode = GC.Spread.Sheets.ImeMode.auto;
activeSheet.setStyle(0, 0, style);

isVerticalText

• isVerticalText: undefined | boolean

Indicates whether to set the text vertical.

example

//This example uses the rotate property.
var style = new GC.Spread.Sheets.Style();
style.isVerticalText = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

labelOptions

• labelOptions: undefined | ILabelOptions

Indicates the cell label options.

property [alignment] - The cell label position.

property [visibility] - The cell label visibility.

property [font] - The cell label font.

property [foreColor] - The cell label foreColor.

property [margin] - The cell label margin.

example

//This example sets label options for the watermark.
var type = new GC.Spread.Sheets.Style();
type.watermark = "User name";
type.cellPadding = "20";
type.labelOptions = {alignment:GC.Spread.Sheets.LabelAlignment.topLeft, visibility: GC.Spread.Sheets.LabelVisibility.visible};
activeSheet.setStyle(0, 1, type);
activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);
activeSheet.getRange(-1, 1, -1, 1).width(150);
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
activeSheet.setCellType(2, 1, combo, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).watermark("ComboBox Cell Type").cellPadding('10 10 20 10');
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).labelOptions({alignment: GC.Spread.Sheets.LabelAlignment.bottomCenter, foreColor: 'yellowgreen', font: 'bold 15px Arial'});
activeSheet.getRange(2, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);

locked

• locked: undefined | boolean

Indicates whether a cell is marked as locked from editing.

example

//This example unlocks a single cell.
activeSheet.options.isProtected = true;
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);
style.locked = false;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

mask

• mask: undefined | IMaskType

Indicates input mask.

example

// This example uses the mask property.
var style = new GC.Spread.Sheets.Style();
style.mask = {
    pattern: '000-00000',
    excludeLiteral: true,
    placeholder: '#'
};
activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);

name

• name: undefined | string

Indicates the name.

example

//This example sets the style name.
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.
var namedStyle1 = new GC.Spread.Sheets.Style();
namedStyle1.name = "style2";
namedStyle1.parentName = "style1";
namedStyle1.foreColor = "red";    // the namedStyle's foreColor is red.
activeSheet.addNamedStyle(namedStyle1);
activeSheet.setStyleName(2, 1, "style2");

parentName

• parentName: undefined | string

Indicates the name of the parent style.

example

//This example sets the parent name.
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.
var namedStyle1 = new GC.Spread.Sheets.Style();
namedStyle1.name = "style2";
namedStyle1.parentName = "style1";
namedStyle1.foreColor = "red";    // the namedStyle's foreColor is red.
activeSheet.addNamedStyle(namedStyle1);
activeSheet.setStyleName(2, 1, "style2");

showEllipsis

• showEllipsis: undefined | boolean

Controls whether the Text out of bounds shows ellipsis.

example

//This example sets the showEllipsis property.
var style = new GC.Spread.Sheets.Style();
style.showEllipsis = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("TestTestTestTest");

shrinkToFit

• shrinkToFit: undefined | boolean

Indicates whether to shrink to fit.

example

//This example sets the shrinkToFit property.
var style = new GC.Spread.Sheets.Style();
style.shrinkToFit = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("Shrink To Fit");

tabStop

• tabStop: undefined | boolean

Indicates whether the user can set focus to the cell using the Tab key.

example

//This example sets the tabStop property.
var style = new GC.Spread.Sheets.Style();
style.tabStop = false;
style.backColor = "lightgreen";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

textDecoration

• textDecoration: undefined | TextDecorationType

Indicates the decoration added to text.

example

//This example uses the textDecoration property.
activeSheet.getCell(0, 0).textDecoration(GC.Spread.Sheets.TextDecorationType.underline);
activeSheet.getRange(1, -1, 1, -1).textDecoration(GC.Spread.Sheets.TextDecorationType.overline | GC.Spread.Sheets.TextDecorationType.underline);
activeSheet.getRange(-1, 1, -1, 1).textDecoration(GC.Spread.Sheets.TextDecorationType.overline | GC.Spread.Sheets.TextDecorationType.lineThrough | GC.Spread.Sheets.TextDecorationType.underline);
var style = new GC.Spread.Sheets.Style();
style.textDecoration = GC.Spread.Sheets.TextDecorationType.overline | GC.Spread.Sheets.TextDecorationType.underline;
activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(0, 0).value("Test");
activeSheet.getCell(1, 0).value("Test");
activeSheet.getCell(0, 1).value("Test");

textDirection

• textDirection: undefined | TextDirectionType

Define a text direction for cell to better represent cell.

example

//This example sets the text direction property for Style.
var style = new GC.Spread.Sheets.Style();
style.textDirection = GC.Spread.Sheets.TextDirectionType.rightToLeft;

textIndent

• textIndent: undefined | number

Indicates the number of units of indentation for text in a cell, an integer value, where an increment of 1 represents 8 pixels.

example

//This example sets the textIndent property.
var style = new GC.Spread.Sheets.Style();
style.textIndent = 3;
// Enter multiple lines with Alt+Enter
style.wordWrap = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("Test");

textOrientation

• textOrientation: undefined | number

Indicates the text rotation angle of cell.

example

//This example sets the textOrientation property.
var style = new GC.Spread.Sheets.Style();
style.textOrientation = 66;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("TestTestTestTest");

themeFont

• themeFont: undefined | string

Indicates the font theme.

example

//This example uses the themeFont property.
var style = new GC.Spread.Sheets.Style();
style.formatter = "0.000%";
style.themeFont = "Body";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("11");

vAlign

• vAlign: undefined | VerticalAlign

Indicates the vertical alignment.

example

//This example sets the vAlign property.
var style = new GC.Spread.Sheets.Style();
style.font = "8pt Arial";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");

watermark

• watermark: undefined | string

Indicates the watermark content.

example

//The following examples add watermarks to cells, columns, and rows.
var type = new GC.Spread.Sheets.Style();
type.watermark = "User name";
sheet.setStyle(0, 1, type);
var type = new GC.Spread.Sheets.Style();
type.watermark = "Password";
sheet.setStyle(1, 1, type);

example

var type = new GC.Spread.Sheets.Style();
type.watermark = "The watermark.";
activeSheet.setStyle(-1, 1, type);
activeSheet.setStyle(1, -1, type);
activeSheet.setStyle(2, 2, type);

wordWrap

• wordWrap: undefined | boolean

Indicates whether to wrap text.

example

//This example sets the wordWrap property.
var style = new GC.Spread.Sheets.Style();
style.textIndent = 3;
// Enter multiple lines with Alt+Enter
style.wordWrap = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("Test");

Methods

clone

▸ clone(): Style

Clones the current style.

Returns

Style

The cloned style.