Events

SpreadJS provides events for floating objects on the sheet to let you react to events that have happened. Try interacting with the floating objects in the spreadsheet below and see the JavaScript events that are fired in the list to the right of the workbook.

There are two kinds of events for FloatingObject floating objects: FloatingObjectSelectionChanged (when the selection of the floating object has changed) and FloatingObjectChanged (when any floating object has changed). There are also two kinds of events for Picture floating objects: PictureSelectionChanged (when the selections of the floating object have changed) and PictureChanged (when any picture 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"); customFloatingObject.startRow(1); customFloatingObject.startColumn(1); customFloatingObject.endColumn(6); customFloatingObject.endRow(6); var div = document.createElement('div'); div.innerHTML = "<span>SpreadJS supports FloatingObject.</span><div style='border: 1px dotted red; width: 80%; margin:auto;'><ul><li>I am list one.</li><li>I am list two.</li><li>I am list three.</li></ul></div>"; div.style.background = 'gray'; customFloatingObject.content(div); sheet.floatingObjects.add(customFloatingObject); sheet.pictures.add("f2", "$DEMOROOT$/spread/source/images/splogo.png", 62, 140, 180, 200); 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 + "FloatingObjectSelectionChanged: " + args.floatingObject.name(); }); sheet.bind(spreadNS.Events.FloatingObjectChanged, function (e, args) { var text = floatingObjectEvent.value; if (text !== "") { text += '\n'; } floatingObjectEvent.value = text + "FloatingObjectChanged: " + args.floatingObject.name() + " " + args.propertyName; }); sheet.bind(spreadNS.Events.PictureSelectionChanged, function (e, args) { var text = floatingObjectEvent.value; if (text !== "") { text += '\n'; } floatingObjectEvent.value = text + "PictureSelectionChanged: " + args.picture.name(); }); sheet.bind(spreadNS.Events.PictureChanged, function (e, args) { var text = floatingObjectEvent.value; if (text !== "") { text += '\n'; } floatingObjectEvent.value = text + "PictureChanged: " + args.picture.name() + " " + args.propertyName; }); };
<!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" 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; }