Cell Buttons

Cell buttons are a set of multiple predefined buttons that can be embedded in the cell and can run various commands.

SpreadJS now has button capabilities within cells. These predefined buttons will allow you to add more functionality to the workbooks. With the command option, developers can code specific behavior for those buttons that is executed when the user clicks on it. For example:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setColumnWidth(0, 180); sheet.setColumnWidth(1, 240); var style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Insert" }, { caption: "Delete" } ]; sheet.setText(0, 0, "caption"); sheet.setStyle(0, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "right", position: GC.Spread.Sheets.ButtonPosition.right }, { caption: "left", position: GC.Spread.Sheets.ButtonPosition.left } ]; sheet.setText(1, 0, "position"); sheet.setStyle(1, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Insert", useButtonStyle: true }, { caption: "Delete", useButtonStyle: true }, { caption: "Update", useButtonStyle: false } ]; sheet.setText(2, 0, "useButtonStyle"); sheet.setStyle(2, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "enable", useButtonStyle: true, enabled: true }, { caption: "enable", useButtonStyle: false, enabled: true }, { caption: "disable", useButtonStyle: true, enabled: false }, { caption: "disable", useButtonStyle: false, enabled: false } ]; sheet.setText(3, 0, "enabled"); sheet.setStyle(3, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { width: 12, useButtonStyle: true }, { width: 24, useButtonStyle: true }, { width: 36, useButtonStyle: true } ]; sheet.setText(4, 0, "width"); sheet.setStyle(4, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.right }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.custom, imageSrc: "data:image/bmp;base64,Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA==" } ]; sheet.setText(5, 0, "imageType & imageSrc"); sheet.setStyle(5, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, imageSize: { height: 12, width: 12 }, imageType: GC.Spread.Sheets.ButtonImageType.right }, { useButtonStyle: true, imageSize: { height: 18, width: 18 }, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.custom, imageSize: { height: 8, width: 8 }, imageSrc: "data:image/bmp;base64,Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA==" } ]; sheet.setText(6, 0, "image size"); sheet.setStyle(6, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, caption: "search", captionAlign: GC.Spread.Sheets.CaptionAlignment.right, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, caption: "search", captionAlign: GC.Spread.Sheets.CaptionAlignment.left, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setText(7, 0, "caption align"); sheet.setStyle(7, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "always", useButtonStyle: true }, { caption: "onselect", useButtonStyle: true, visibility: GC.Spread.Sheets.ButtonVisibility.onSelected }, { caption: "onedit", useButtonStyle: true, visibility: GC.Spread.Sheets.ButtonVisibility.onEditing } ]; sheet.setText(8, 0, "visibility"); sheet.setStyle(8, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openColorPicker" }, { imageType: GC.Spread.Sheets.ButtonImageType.search, command: (sheet, row, col, option) => { if (sheet.zoom() === 1) { sheet.zoom(1.5); } else { sheet.zoom(1); } } } ]; sheet.setText(9, 0, "command"); sheet.setStyle(9, 1, style); sheet.resumePaint(); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }