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

Cell Colors

You can set background and foreground colors for cells, columns, rows, headers, and the widget.




Set the backColor or foreColor methods for cells, columns, headers, or rows. You can set the backColor method or use themes for the widget. You can use the options.grayAreaBackColor property for the gray area.


For more information about themes, refer to Configure Themes. You can also use styles to set cell colors. For more information, refer to Styles.


The following code sample sets the foreColor and backColor for cell B2.

//Set the backcolor and forecolor of cells.
var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
cell.backColor("Blue");
cell.foreColor("Red");
cell.value("Color");

You can set the forecolor and backcolor for the header as shown in the code sample below.

//Set the backcolor and forecolor for the entire column header.
var row = activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);
row.backColor("Red");
row.foreColor("White");

//Set the backcolor for the second row header.
activeSheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("Yellow");

The color of the active cell can also be changed by binding an event.

window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var sheet = spread.getActiveSheet();
   sheet.getCell(0, 0).backColor("pink");
   sheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (event, infos) {
   
   // Reset the backcolor of cell before moving
   infos.sheet.getCell(infos.row, infos.col).backColor(undefined);
   });
  
   sheet.bind(GC.Spread.Sheets.Events.EnterCell, function (event, infos) {
           
      //Set the backcolor of destination cells (currently active cells)
      infos.sheet.getCell(infos.row, infos.col).backColor("pink");
   });
}