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);
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
document.getElementById('statusBar')
);
statusBar.bind(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.setValue(12, 2, "Press the F2 key to start editing the empty cell with the black border, then press F2 to switch the editor status.");
sheet.addSpan(13, 2, 1, 5);
sheet.getRange(13, 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/@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/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 id="statusBar"></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: calc(100% - 25px);
overflow: hidden;
float: left;
}
#statusBar {
bottom: 0;
height: 25px;
width: 100%;
position: relative;
}
.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;
}
