Events

Worksheets in SpreadJS have their own events that can be bound to specific actions when those events occur. In the workbook below, follow the instructions in the cells to see message that we have created for specific user interaction events in the spreadsheet.

You can bind sheet events using the bind and unbind methods for the sheet. You can also use the unbindAll method to unbind all the events. As with jQuery's bind and unbind, you can handle the sheet's bind and unbind, as shown in the following code: When you want to perform tasks that might trigger several events, and you don't want the sheet to trigger these events, use the suspendEvent method to keep the events from occurring. After the tasks are complete, you can use the resumeEvent method to resume triggering events, as shown in the following example:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); setStatus(sheet); sheet.setValue(2, 2, "Click me and input a char with your keyboard!"); sheet.addSpan(2, 2, 1, 5); sheet.getRange(2, 2, 1, 5).setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true }); sheet.setValue(4, 2, "Double-click the empty cell with the black border!"); sheet.addSpan(4, 2, 1, 5); sheet.addSpan(5, 2, 1, 5); sheet.getRange(5, 2, 1, 5).setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true }); sheet.setValue(7, 2, "Double-click me!"); sheet.addSpan(7, 2, 1, 5); sheet.getRange(7, 2, 1, 5).setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true }); sheet.setValue(9, 2, "Double-click the empty cell with the black border and click it again!"); sheet.addSpan(9, 2, 1, 7); sheet.addSpan(10, 2, 1, 5); sheet.getRange(10, 2, 1, 5).setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true }); sheet.resumePaint(); sheet.bind(GC.Spread.Sheets.Events.ColumnChanging, function (sender, info) { //insert column if (info.propertyName === "addColumns") { _getElementById("status").innerHTML = "ColumnChanging event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanging: addColumns(" + "column: " + info.col + ")"; } //delete column if (info.propertyName === "deleteColumns") { _getElementById("status").innerHTML = "ColumnChanging event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanging: deleteColumns(" + "column: " + info.col + ")"; } //unhide column if (info.propertyName === "isVisible" && info.newValue === true) { _getElementById("status").innerHTML = "ColumnChanging event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanging: unhide column(" + "column: " + info.col + ")"; } //hide column if (info.propertyName === "isVisible" && info.newValue === false) { _getElementById("status").innerHTML = "ColumnChanging event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanging: hide column(" + "column: " + info.col + ")"; } }); sheet.bind(GC.Spread.Sheets.Events.ColumnChanged, function (sender, info) { //insert column if (info.propertyName === "addColumns") { _getElementById("status").innerHTML = "ColumnChanged event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanged: insert column(" + "column: " + info.col + ")"; } //delete column if (info.propertyName === "deleteColumns") { _getElementById("status").innerHTML = "ColumnChanged event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanged: deleteColumns(" + "column: " + info.col + ")"; } //unhide column if (info.propertyName === "isVisible" && info.newValue === true) { _getElementById("status").innerHTML = "ColumnChanged event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanged: unhide column(" + "column: " + info.col + ")"; } //hide column if (info.propertyName === "isVisible" && info.newValue === false) { _getElementById("status").innerHTML = "ColumnChanged event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanged: hide column(" + "column: " + info.col + ")"; } }); //RowChanging sheet.bind(GC.Spread.Sheets.Events.RowChanging, function (sender, info) { //insert row if (info.propertyName === "addRows") { _getElementById("status").innerHTML = "RowChanging event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanging: insert row(" + "row: " + info.row + ")"; } //delete row if (info.propertyName === "deleteRows") { _getElementById("status").innerHTML = "RowChanging event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanging: delete row(" + "row: " + info.row + ")"; } //unhide row if (info.propertyName === "isVisible" && info.newValue === true) { _getElementById("status").innerHTML = "RowChanging event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanging: unhide row(" + "row: " + info.row + ")"; } //hide row if (info.propertyName === "isVisible" && info.newValue === false) { _getElementById("status").innerHTML = "RowChanging event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanging: hide row(" + "row: " + info.row + ")"; } }); sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (sender, info) { //insert row if (info.propertyName === "addRows") { _getElementById("status").innerHTML = "RowChanged event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanged: insert row(" + "row: " + info.row + ")"; } //delete row if (info.propertyName === "deleteRows") { _getElementById("status").innerHTML = "RowChanged event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanged: delete row(" + "row: " + info.row + ")"; } //unhide row if (info.propertyName === "isVisible" && info.newValue === true) { _getElementById("status").innerHTML = "RowChanged event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanged: unhide row(" + "row: " + info.row + ")"; } //hide row if (info.propertyName === "isVisible" && info.newValue === false) { _getElementById("status").innerHTML = "RowChanged event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanged: hide row(" + "row: " + info.row + ")"; } }); sheet.bind(spreadNS.Events.EditorStatusChanged, function () { setStatus(sheet); }); sheet.bind(spreadNS.Events.SelectionChanging, function (e, info) { _getElementById("status").innerHTML = "SelectionChanging event called!"; _getElementById("showSheetEvents").innerHTML = "New Selection(" + "row: " + info.newSelections[0].row + ", " + "column: " + info.newSelections[0].col + ", " + "rowCount: " + info.newSelections[0].rowCount + ", " + "columnCount: " + info.newSelections[0].colCount + ")"; }) }; function setStatus(sheet) { var statusNow = sheet.editorStatus(); if (statusNow === spreadNS.EditorStatus.ready) { _getElementById("status").innerHTML = "Editor Status: Ready!"; _getElementById("showSheetEvents").innerHTML = "Cell is not being edited."; } else if (statusNow === spreadNS.EditorStatus.enter) { _getElementById("status").innerHTML = "Editor Status: Enter!"; _getElementById("showSheetEvents").innerHTML = "Cell is being edited, you can leave the cell by pressing one of the arrow keys."; } else if (statusNow === spreadNS.EditorStatus.edit) { _getElementById("status").innerHTML = "Editor Status: Edit!"; _getElementById("showSheetEvents").innerHTML = "Cell is being edited, you can not leave the cell by pressing one of the arrow keys."; } } function _getElementById(id) { return document.getElementById(id); }
<!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"> <div class="option-row"> <label style="color:rgb(226,107,29);display:inline-block;font-family:Arial, Helvetica, sans-serif;font-size: 18px;font-weight: normal;height:30px;line-height: 30px " id="status">Settings</label> </div> <div class="option-row"> <textarea id="showSheetEvents" cols="40" rows="5" style="width: 80%"></textarea> </div> </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; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }