[{"id":"53ae7f99-150b-4b50-9f72-02f7f2ea5efe","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e371599e-67ae-4635-802b-0ada531e5b5b","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f309ec90-559b-42bf-955b-492431019196","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"28d36d47-c582-4210-a848-5ba48491bb80","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9d13df60-758a-4cc3-9cda-8d6234e00821","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2e473c2c-8b35-40de-bdce-f21478f434bc","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e19a99e0-5b6f-4c8b-b872-47b3e78011bf","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2f718a98-6d54-4dc1-89c3-6b87cfabd16b","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"df066912-4ce1-4484-b00c-86b34a6e977b","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1fcab497-8c1f-413e-bce0-f3ae72229e85","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3d90b977-451c-42ce-a26a-1e32c1082471","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6433ad22-3173-436a-8ff9-355a17142bc5","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e82311a5-f99e-4075-8710-9a76a2da67a7","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7bebaae0-d5e2-4db3-ab34-644272d2aed6","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2c77a1e3-7af7-4dca-88aa-ee59b41d7896","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"5a3f52b5-5b23-473e-bdbc-906381b9a948","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"299d63a8-7f0b-46a4-a152-9a7ca85a2170","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"906b4555-b1b6-4ddb-a290-c13cb8a153a0","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"efa3eb50-4277-46ee-b451-c5096e889fff","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1d9b7a41-588f-47d1-bb81-f46146e062fb","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"c1687a0f-e3a0-4074-996c-94cbacf49f29","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"269fc082-c3b5-4208-a987-c1a3c1dee620","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"cb76b7de-9b29-4d6b-b644-de3c3c0a1262","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"4dc9d5da-9bf3-4baf-9fae-6b34511062a4","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e4e74cf8-8702-45a6-a536-86d03b66af49","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"abe88d62-9eb6-4113-89f3-abb0cff27c3a","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f3751417-d894-4cf1-8a8c-c2e7391dd4b1","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"49ae1d04-aba0-4311-8548-df297a5aedc0","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"861d71ff-44db-4563-a24c-e1a389708c19","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2f6715bc-8b05-4653-8ec5-0dd835dc6035","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d2f5c978-f4e4-4c18-ab43-e8fbbc6ad92b","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e183d612-0813-4e0f-b217-308d71c14637","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f8f319ea-ec97-4d69-a862-c6a17191f0f7","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d895fc4b-55bb-46ee-bd74-7a0abb51650c","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"680fba3c-ad50-41a6-bc56-acd4f229de8f","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1234e85c-d175-4f94-ac83-b53b5e3596d2","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"8fb554aa-3192-402b-9d6b-1ec2b4b99ea0","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"aff9d5e3-7e18-4287-892f-8d7844e9ddf2","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6a23926e-a2ac-4c07-ba79-2f7751f098ee","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"51c9c955-8c66-45d8-bb0c-718aee1073da","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6174a29f-1d15-4a80-a860-d28fdecca505","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"51709a04-b2cd-4465-b2a2-da7beb2e4f15","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"897b8725-abb5-428a-bd7a-a610fae8e28c","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"c00c0609-ac23-4859-8442-be43ed745ad3","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0996d76b-b253-49a7-9ea8-89d81ce0d42f","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3c007776-7473-4203-8cc1-9ed79bb512df","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"4bb1ced3-7a10-4719-854b-513729b31e53","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"53155f14-d53e-4d53-a087-0a32d9b088e8","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"279e57c0-0954-49d6-9076-2133a204e24f","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e9c38f09-cfd3-4a78-b2cf-412e3c1b5945","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"754efafe-744e-452e-9e46-833c9b36c763","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"be5fe8a1-1660-4dc4-b7fb-ceb038047086","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]}]
        
(Showing Draft Content)

Cell Buttons

Cell buttons are a set of predefined buttons that can be added to worksheet cells to configure additional functionalities. They allow you to configure specific behavior for operations like when a user clicks on a cell button, edits a cell, or hovers over a cell. The cellbuttons type belongs to the Style class, hence it allows you to create named styles that would apply selectively and easily on any cell.


For example, you can create a button with a color picker drop-down by defining a custom color-picker named style for the cell. This style can be reused and applied to any other cell.


The following GIFs display the usage of some cell buttons commands and properties to achieve the desired customizations.

  • Cell button with 'Insert' caption


    // Configure Workbook and Worksheet
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    
    // Add a basic button with caption
    var basicButttonStyle = new GC.Spread.Sheets.Style();
    basicButttonStyle.cellButtons = 
    [
        {
            caption: "Insert"
        }
    ];
    activeSheet.setText(2, 3, "Basic button with caption");
    activeSheet.setStyle(2, 4, basicButttonStyle);
  • Cell button with 'enabled' property set to true and false


    // Configure Workbook and Worksheet
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    
    // Add button with different configuration settings such as position, style, enabled/disabled
    var customButtonStyle = new GC.Spread.Sheets.Style();
    customButtonStyle.cellButtons = 
    [
        {
            caption: "enable",
            useButtonStyle: true,
            // enabled: true,
            hoverBackColor: "#3390FF",          
            position: GC.Spread.Sheets.ButtonPosition.left
        },
        {
            caption: "disabled",
            useButtonStyle: false,
            enabled: false,
            position: GC.Spread.Sheets.ButtonPosition.right
        }
    ];
    activeSheet.setText(4, 3, "enabled/disabled buttons");
    activeSheet.setStyle(4, 4, customButtonStyle);
  • Cell button set to be visible on selecting cell.


    // Configure Workbook and Worksheet
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    
    // Add button visibility property
    var onScreenstyle = new GC.Spread.Sheets.Style();
    onScreenstyle.cellButtons = [
         {
            caption: "On Select",
            buttonBackColor:"#ffdc9d",
            visibility: GC.Spread.Sheets.ButtonVisibility.onSelected
       }
    ];
    activeSheet.setStyle(10, 10, onScreenstyle);
    activeSheet.getCell(10,10).value("Select cell..").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
  • Cell Buttons with built-in and custom images


    // Configure Workbook and Worksheet
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    
    // Add button with built-in and custom image
    var ImageStyle = new GC.Spread.Sheets.Style();
    ImageStyle.cellButtons =
    [
        {
            useButtonStyle: true,
            imageSize: {
                    height: 8,
                    width: 8
            },
            imageType: GC.Spread.Sheets.ButtonImageType.ellipsis
        },
        {
            useButtonStyle: true,
            imageType: GC.Spread.Sheets.ButtonImageType.custom,
            imageSrc:"data:image/bmp;base64, Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA=="
        }
    ];
    activeSheet.setText(6, 3, "Image Buttons");
    activeSheet.setStyle(6, 4, ImageStyle);
  • Cell Button with command function set to perform zoom-in and zoom-out operation in a worksheet


    // Configure Workbook and Worksheet
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    
    // Add button with command function
    var buttonCommandfunction = new GC.Spread.Sheets.Style();
    buttonCommandfunction.cellButtons =
    [
        {
            imageType: GC.Spread.Sheets.ButtonImageType.search,
            command: (sheet, row, col, option) =>
            {
                if (sheet.zoom() === 1) {
                    sheet.zoom(1.5);
                } else {
                    sheet.zoom(1);
                }
            }
        }
    ];
    activeSheet.setText(10, 3, "Button with command function");
    activeSheet.setStyle(10, 4, buttonCommandfunction);
  • Cell Button with command function set to trigger an alert message


    // Configure Workbook and Worksheet
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    
    // Add button with Alert command action
    var visibleStyle = new GC.Spread.Sheets.Style();
    visibleStyle.cellButtons = 
    [
        {
            caption:"Alert",
            buttonBackColor: "#00C2D6",
            command: (sheet, row, col, option) => {
                alert("This is an alert.");
            }
        }
    ];
    activeSheet.setStyle(7, 10, visibleStyle);
  • Cell button set to dropdown ButtonImageType enum value and opencolorpicker command


    // Configure Workbook and Worksheet
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var activeSheet = spread.getActiveSheet();
    
    // Add Dropdown button with command action
    var dropdownStylecommand = new GC.Spread.Sheets.Style();
    dropdownStylecommand.cellButtons =
    [
        {
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            useButtonStyle: true,
            command: "openColorPicker"
        }
    ];
    activeSheet.setText(8, 3, "Dropdown button with command");
    activeSheet.setStyle(8, 4, dropdownStylecommand);        

Configure Cell Buttons

You can configure cell buttons by using different properties as described in the table below:

Property

Description

ButtonPosition

This property is of type ButtonPosition enumeration that specifies the position of the cell button. You can set the position of the cell button to left or right and create a custom style for displaying these buttons.

CaptionAlignment

This property is of type CaptionAlignment enumeration that specifies the position of the caption in the cell button. You can configure the position of the caption to left or right.

ButtonImageType

This property is of type ButtonImageType enumeration that specifies the image type of the cell button. You can configure the button image type as per the specific preferences such as dropdown, search, undo, and redo. Refer to ButtonImageType Enumeration for the complete list.

ButtonVisibility

This property is of type ButtonVisibility enumeration that specifies the visibility of the cell button. You can choose whether to show or hide the cell buttons on different cell states using the following values:

caption

This property specifies the text of the button that will be displayed in the caption.

position

This property specifies the position of the button in the cell.

enabled

This property specifies whether the cell button will respond to the user's actions. The default value is set to true.

useButtonStyle

This property specifies whether the cell button is a button style. The default value is false.

width

This property specifies the width of the button. If you set this property to "null" or "undefined" then the button fit will automatically adjust itself based on the caption and the size of the image.

visibility

This property specifies the visibility of the button. Three options are available ("always", "onselect" and "edit").

imageType

This property specifies the type of image that you want to display in the button. The default value for this property is "custom".

command

This property allows you to execute a spread command or a callback when the cell button is clicked.

imageSrc

This property allows you to upload an image by providing the source of the image when the imageType is set to custom.

captionAlign

This property specifies the position of the image and the caption. The available options are "left" and "right".

imageSize

This property specifies the image size. The default value is 16px.

hoverBackColor

This property specifies the hover back color of the cell button when the button is visible and enabled.

Define Button Commands

After creating the cell button, you can specify different command actions to associate different functionalities to the buttons as per the options mentioned in the following table.

Command Option

Description

openColorPicker

This option can be used when you want to open a color picker on a button click event.

openDateTimePicker

This option can be used when you want to open a date time picker on a button click event.

openTimePicker

This option can be used when you want to open a time picker on a button click event.

openMonthPicker

This option can be used when you want to open a month picker on button click event.

openSlider

This option can be used when you want to open a slider control on button click event.

openWorkflowList

This option can be used when you want to open a workflow list on a button click event.

openCalculator

This option can be used when you want to open a calculator on a button click event.

openList

This option can be used when you want to open a list on a button click event.

Note: You can use and customize the above commands in the dropdown setting of a cell button as well, refer to Cell Dropdowns for more details.