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 are executed when the user clicks on them. 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.getRange(2, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(5, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(8, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(11, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(14, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(0, 4, 15, 1) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { right: true }); sheet.getRange(0, 9, 15, 1) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { right: true }); for (var i = 0; i < 10; i++) { sheet.setColumnWidth(i,100); } for (var i = 0; i < 30; i++) { sheet.setRowHeight(i,25); i++; sheet.setRowHeight(i,25); i++; } sheet.getCell(0,0).value("Basic Button Styling (useButtonStyle)").font("bold 16px Calibri"); sheet.getCell(3,0).value("Button Colors (buttonBackColor)").font("bold 16px Calibri"); sheet.getCell(6, 0).value("Command Buttons (command)").font("bold 16px Calibri"); sheet.getCell(9, 0).value("Hoverable Buttons (hoverBackColor)").font("bold 16px Calibri"); sheet.getCell(12, 0).value("Button Position (position)").font("bold 16px Calibri"); sheet.getCell(0, 5).value("Button Size (width)").font("bold 16px Calibri"); sheet.getCell(3, 5).value("Image Captions (imageType & imageSrc & imagesize)").font("bold 16px Calibri"); sheet.getCell(6, 5).value("Button Visibility (visibility) - Select cell G8 to see the other button").font("bold 16px Calibri"); sheet.getCell(9, 5).value("Disabled Buttons (enabled)").font("bold 16px Calibri"); sheet.getCell(12, 5).value("Text Align (CaptionAlignment)").font("bold 16px Calibri"); sheet.addSpan(7,7,1,2); sheet.addSpan(7,2,1,2); sheet.addSpan(4,7,1,2); sheet.getCell(4, 7).value("Search").vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(7, 7).value("Select cell..").vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(7, 2).value("Click the button here ->").vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(7, 1).value("ZOOM!").vAlign(GC.Spread.Sheets.VerticalAlign.bottom); var style = new GC.Spread.Sheets.Style(); //basic styling style.cellButtons = [ { caption: "Default" } ]; sheet.setStyle(1, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Basic Style", useButtonStyle: true } ]; sheet.setStyle(1, 1, style); //button colors style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Red-Color", buttonBackColor: "#F44336" } ]; sheet.setStyle(4, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Green-Color", buttonBackColor: "#82BC00", } ]; sheet.setStyle(4, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Grey-Color", buttonBackColor: "#DDDDDD" } ]; sheet.setStyle(4, 2, style); //Command buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openColorPicker" } ]; sheet.setStyle(7, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption:"Zoom", buttonBackColor: "#DDDDDD", command: (sheet, row, col, option) => { if (sheet.zoom() === 1) { sheet.zoom(1.25); } else { sheet.zoom(1); } } } ]; sheet.setStyle(7, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption:"Alert", buttonBackColor: "#00C2D6", command: (sheet, row, col, option) => { alert("This is an alert."); } } ]; sheet.setStyle(7, 2, style); //hover buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Blue-Color", useButtonStyle: true, buttonBackColor: "#008CBA", hoverBackColor: "#FFFFFF" } ]; sheet.setStyle(10, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Grey-Color", buttonBackColor: "#DDDDDD", hoverBackColor: "#FFFFFF" } ]; sheet.setStyle(10, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Blue-Hover", useButtonStyle: true, hoverBackColor: "#008CBA" } ]; sheet.setStyle(10, 2, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Grey-Hover", hoverBackColor: "#DDDDDD", } ]; sheet.setStyle(10, 3, style); //Position buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Left", buttonBackColor: "#F7A711", position: GC.Spread.Sheets.ButtonPosition.left } ]; sheet.setStyle(13, 0, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Right", buttonBackColor: "#F7A711", position: GC.Spread.Sheets.ButtonPosition.right } ]; sheet.setStyle(13, 1, style); //button size style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption:"40px", width: 40, buttonBackColor: "#EEEEEE", useButtonStyle: true } ]; sheet.setStyle(1, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption:"50px", width: 50, buttonBackColor: "#EEEEEE", useButtonStyle: true } ]; sheet.setStyle(1, 6, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption:"85px", width: 85, buttonBackColor: "#008CBA", useButtonStyle: true } ]; sheet.setStyle(1, 7, style); //Image buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Arrow", buttonBackColor: "#DDDDDD", imageType: GC.Spread.Sheets.ButtonImageType.right } ]; sheet.setStyle(4, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Custom", buttonBackColor:"#F4F8EB", imageType: GC.Spread.Sheets.ButtonImageType.custom, imageSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC" } ]; sheet.setStyle(4, 6, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { buttonBackColor: "#82BC00", width:50, imageSize: { height: 30, width: 30 }, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setStyle(4, 7, style); //Visibility buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Always", buttonBackColor:"#ffdc9d" } ]; sheet.setStyle(7, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "On Select", buttonBackColor:"#ffdc9d", visibility: GC.Spread.Sheets.ButtonVisibility.onSelected } ]; sheet.setStyle(7, 7, style); //disabled buttons style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Enable", useButtonStyle: true, enabled: true } ]; sheet.setStyle(10, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Enable", enabled: true } ]; sheet.setStyle(10, 6, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Disable", useButtonStyle: true, enabled: false } ]; sheet.setStyle(10, 7, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Disable", enabled: false } ]; sheet.setStyle(10, 8, style); //Caption Aligment (captionaligment) style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, caption: "Left", captionAlign: GC.Spread.Sheets.CaptionAlignment.left, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setStyle(13, 5, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, caption: "Right", captionAlign: GC.Spread.Sheets.CaptionAlignment.right, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setStyle(13, 6, 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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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; }