Events

SpreadJS provides events for comments on the sheet to let you react to events that have happened.

The CommentChanged event occurs when the comment has changed (such as some properties have 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); var sd = dataSource; var sheet = spread.getActiveSheet(); if (sd.length > 0) { sheet.setDataSource(sd); } sheet.setColumnWidth(0, 160); sheet.setColumnWidth(1, 70); sheet.setColumnWidth(2, 90); sheet.setColumnWidth(3, 110); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(6, 110); sheet.comments.add(1, 1, "new comment!"); var commentEvent = document.getElementById("commentEvent"); sheet.bind(spreadNS.Events.CommentChanged, function(e, args) { var text = commentEvent.value; if (text !== "") { text += '\n'; } commentEvent.value = text + "CommentChanged: " + " " + args.propertyName; }); // get comment and change some properties to fire event var comment = sheet.comments.get(1, 1); comment.text("Edit the comment, do resize, drag or other actions to fire the CommentChanged event."); comment.backColor("skyblue"); comment.displayMode(spreadNS.Comments.DisplayMode.alwaysShown); };
<!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/data/data.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="commentEvent" style="width: 100%; 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; overflow: auto; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; } textarea { width: 100%; height: 80px; padding: 6px 12px; box-sizing: border-box; } .sample-options { z-index: 1000; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }