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:

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.

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.