Events

SpreadJS provides events for floating objects on the worksheet. Try interacting with floating objects in the spreadsheet below and see the JavaScript events appearing in the right panel.

SpreadJS holds two kinds of events for FloatingObject property:FloatingObjectSelectionChanged when the selection of the floating object has changed.FloatingObjectChanged when any floating object has changed.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.suspendPaint(); var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64); customFloatingObject.startRow(1); customFloatingObject.startColumn(1); customFloatingObject.endColumn(3); customFloatingObject.endRow(4); var btn = document.createElement('button'); btn.style.width = "125px"; btn.style.height = "60px"; btn.style.background = "#82bc00"; btn.style.color = "white"; btn.style.textAlign = "center"; btn.style.border = "none"; btn.innerText = "Button"; customFloatingObject.content(btn); sheet.floatingObjects.add(customFloatingObject); sheet.resumePaint(); var floatingObjectEvent = document.getElementById('floatingObjectEvent'); sheet.bind(spreadNS.Events.FloatingObjectSelectionChanged, function (e, args) { var text = floatingObjectEvent.value; if (text !== "") { text += '\n'; } floatingObjectEvent.value = text + "\n" + "Event:FloatingObjectSelectionChanged" + "\n" + "FloatingObject " + args.floatingObject.name() + "\n"; }); sheet.bind(spreadNS.Events.FloatingObjectChanged, function (e, args) { var text = floatingObjectEvent.value; if (text !== "") { text += '\n'; } floatingObjectEvent.value = text + "Event:FloatingObjectChanged" + "\n" + "FloatingObject " + args.floatingObject.name() + " " + args.propertyName + "\n"; }); };
<!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" class="sample-spreadsheets"></div> <div class="options-container"> <textarea id="floatingObjectEvent" style="width: 95%; height: 90px"></textarea> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }