Cell Decoration

You can apply decoration in SpreadJS to a cell or a cell range using the decoration objects. The objects can contain settings such as corner folds or icons.

Set CornerFold

SpreadJS supports setting the corner fold style on the corners of a cell. The CornerFold feature is useful while highlighting the cell status, that is, for instance, when you want to showcase an invalid status for a cell.

The IDecoration interface provides the cornerFold option, which lets you set the cornerfold size, position, and color. The cornerFold option is inherited from the ICornerFold interface, which provides parameters like size, position, and color.

The snapshot below depicts an orange corner fold styling on cells B6 and B8 in the top-left position.

The default values for the cornerFold option are given below:

The following code implementation shows how to set the corner fold styling by using the ICornerFold interface and the setStyle method.

var style = new GC.Spread.Sheets.Style();
style.decoration = {
    cornerFold: {
        size: 10,
        position: GC.Spread.Sheets.CornerPosition.leftTop,
        color: "orange"
    }
}
sheet.setStyle(5, 1, style);

Set Icons

SpreadJS supports icon decoration for the cells that can be embedded within or outside the cells in a spreadsheet using the icons property from the GC.Spread.Sheets.Style class. A cell type containing text or a value can be decorated with icons, but cell types such as checkbox and combobox do not support the icons property. 

SpreadJS provides various options for icon decoration such as src, width, height and position. To specify the position of the icons, you can use the IconPosition enum values as listed below:

The following code sample styles the cells with icons:

//left side in the cell
style = new GC.Spread.Sheets.Style();
style.decoration = {
    icons: [
         {
           src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
            position: GC.Spread.Sheets.IconPosition.left
          }
       ]
   };
 setIcon(1, 1, style); 

 Note:

• leftOfText and rightOfText position values only apply to the text cells.

• Icons outside the current view only affect an adjacent column.

• When the decoration supports multiple icons, the icons are painted side by side regardless of their positioning.

• Cell alignment affects icon alignment vertically.

• Cells with style decoration icons cannot overflow.

Using Designer 

To add icons to the cells using the SpreadJS Designer, follow these steps:

1. Select the cell.

2. Right-click on the cell and choose the Format Cells... option from the context menu. This invokes a Format Cells dialog box on the spreadsheet. Navigate to the Decoration tab and set its properties.

Add/Update Icon Option 

1. Click on the Add button to add a new icon option or select the src, position, width, or height to update the icons.

   
   

2. Click on Select Icon option to browse the location of the icon.

   
   

3. You can specify the position using Position Combo box (optional).

   
   

4. You can also resize the icon’s width and height using the Width and Height spin button

   
   

Delete Icon Option 

1. Select the option you want to delete.

   
   

2. Click on the Delete button to remove the selected option.