Events

SpreadJS provides a variety of events to allow customizing spreadsheet behavior or implementing spreadsheet UI interactions.

You can bind Workbook and Worksheet events using bind and unbind or unbindAll to unbind all the events. For example: You can suspend Spread or a Sheet events using suspendEvent. Suspended events can be resumed using resumeEvent. This improved performance during long updates to Workbook content. For example:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss"), { sheetCount: 3 }); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; 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); spread.bind(spreadNS.Events.ActiveSheetChanged, function (e, args) { _getElementById("showSpreadEvents").value= 'SpreadEvent: ' + GC.Spread.Sheets.Events.ActiveSheetChanged + ' event called' + '\n' + 'oldSheetName: ' + args.oldSheet.name() + '\n' + 'newSheetName: ' + args.newSheet.name(); }); spread.bind(spreadNS.Events.CellClick, function (e, args) { var sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ? 'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort'; _getElementById("showSpreadEvents").value= 'SpreadEvent: ' + GC.Spread.Sheets.Events.CellClick + ' event called' + '\n' + 'sheetArea: ' + sheetArea + '\n' + 'row: ' + args.row + '\n' + 'col: ' + args.col; }); spread.bind(spreadNS.Events.SelectionChanging, function (e, args) { var selection = args.newSelections.pop(); var sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ? 'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort'; _getElementById("showSpreadEvents").value= 'SpreadEvent: ' + GC.Spread.Sheets.Events.SelectionChanging + ' event called' + '\n' + 'sheetArea: ' + sheetArea + '\n' + 'row: ' + selection.row + '\n' + 'column: ' + selection.col + '\n' + 'rowCount: ' + selection.rowCount + '\n' + 'colCount: ' + selection.colCount; }); spread.bind(spreadNS.Events.SelectionChanged, function (e, args) { var selection = args.newSelections.pop(); if(selection.rowCount > 1 && selection.colCount > 1){ var sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ? 'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort'; _getElementById("showSpreadEvents").value= 'SpreadEvent: ' + GC.Spread.Sheets.Events.SelectionChanged + ' event called' + '\n' + 'sheetArea: ' + sheetArea + '\n' + 'row: ' + selection.row + '\n' + 'column: ' + selection.col + '\n' + 'rowCount: ' + selection.rowCount + '\n' + 'colCount: ' + selection.colCount; }}); spread.bind(spreadNS.Events.EditStarting, function (e, args) { _getElementById("showSpreadEvents").value= 'SpreadEvent: ' + GC.Spread.Sheets.Events.EditStarting + ' event called' + '\n' + 'row: ' + args.row + '\n' + 'column: ' + args.col; }); spread.bind(spreadNS.Events.EditEnded, function (e, args) { _getElementById("showSpreadEvents").value= 'SpreadEvent: ' + GC.Spread.Sheets.Events.EditEnded + ' event called' + '\n' + 'row: ' + args.row + '\n' + 'column: ' + args.col + '\n' + 'text: ' + args.editingText; }); }; 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/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"> <div class="option-row"> <label>Click the sheet tab to change the active sheet. Click the cell or select range to edit.</label> </div> <div class="option-row"> <textarea id="showSpreadEvents" cols="40" rows="8" style="width: 90%"></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; }