Events

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

Description
app.js
index.html
styles.css
Copy to CodeMine

You can bind Workbook and Worksheet events using bind and unbind or unbindAll to unbind all the events. For example:

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    var sheet = spread.getSheet(0);
    var activeSheetChanged = GC.Spread.Sheets.Events.ActiveSheetChanged;
    spread.bind(activeSheetChanged, function(e,args) { // spread event
       //do some thing...
    });
    var selectionChanged = GC.Spread.Sheets.Events.SelectionChanged
    sheet.bind(selectionChanged, function(e,args) { // sheet event
       //do some thing...
    });

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:

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    spread.suspendEvent();
    //do some operation...
    spread.resumeEvent();
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 sheet = spread.getActiveSheet(); 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/@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/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; }