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:
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import GC from '@mescius/spread-sheets';
import Panel from './panel';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
const { useState } = React;
const App = () => {
const [labelValue, setLabel] = useState('Editor Status: Ready!');
const [textareaValue, setTextarea] = useState('Cell is not being edited.');
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread, setLabel, setTextarea)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div id="statusBar"></div>
<Panel labelValue={labelValue} textareaValue={textareaValue}
></Panel>
</div>
)
}
function setStatus(sheet, setLabel, setTextarea) {
let statusNow = sheet.editorStatus();
if (statusNow === GC.Spread.Sheets.EditorStatus.ready) {
setTextarea("Cell is not being edited.");
setLabel("Editor Status: Ready!");
} else if (statusNow === GC.Spread.Sheets.EditorStatus.enter) {
setTextarea("Cell is being edited, you can leave the cell by pressing one of the arrow keys.");
setLabel("Editor Status: Enter!");
} else if (statusNow === GC.Spread.Sheets.EditorStatus.edit) {
setTextarea("Cell is being edited, you can not leave the cell by pressing one of the arrow keys.");
setLabel("Editor Status: Edit!");
}
}
function initSpread(spread, setLabel, setTextarea) {
let self = this;
//init Status Bar
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
document.getElementById('statusBar')
);
statusBar.bind(spread);
let sheet = spread.getSheet(0);
sheet.suspendPaint();
setStatus(sheet, setLabel, setTextarea);
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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheet.resumePaint();
sheet.bind(GC.Spread.Sheets.Events.ColumnChanging, function (sender, info) {
//insert column
if (info.propertyName === "addColumns") {
setTextarea("ColumnChanging: addColumns(" + "column: " + info.col + ")");
setLabel("ColumnChanging event called!");
}
//delete column
if (info.propertyName === "deleteColumns") {
setTextarea("ColumnChanging: deleteColumns(" + "column: " + info.col + ")");
setLabel("ColumnChanging event called!");
}
//unhide column
if (info.propertyName === "isVisible" && info.newValue === true) {
setTextarea("ColumnChanging: unhide column(" + "column: " + info.col + ")");
setLabel("ColumnChanging event called!");
}
//hide column
if (info.propertyName === "isVisible" && info.newValue === false) {
setTextarea("ColumnChanging: hide column(" + "column: " + info.col + ")");
setLabel("ColumnChanging event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.ColumnChanged, function (sender, info) {
//insert column
if (info.propertyName === "addColumns") {
setTextarea("ColumnChanged: insert column(" + "column: " + info.col + ")");
setLabel("ColumnChanged event called!");
}
//delete column
if (info.propertyName === "deleteColumns") {
setTextarea("ColumnChanged: deleteColumns(" + "column: " + info.col + ")");
setLabel("ColumnChanged event called!");
}
//unhide column
if (info.propertyName === "isVisible" && info.newValue === true) {
setTextarea("ColumnChanged: unhide column(" + "column: " + info.col + ")");
setLabel("ColumnChanged event called!");
}
//hide column
if (info.propertyName === "isVisible" && info.newValue === false) {
setTextarea("ColumnChanged: hide column(" + "column: " + info.col + ")");
setLabel("ColumnChanged event called!");
}
});
//RowChanging
sheet.bind(GC.Spread.Sheets.Events.RowChanging, function (sender, info) {
//insert row
if (info.propertyName === "addRows") {
setTextarea("RowChanging: insert row(" + "row: " + info.row + ")");
setLabel("RowChanging event called!");
}
//delete row
if (info.propertyName === "deleteRows") {
setTextarea("RowChanging: delete row(" + "row: " + info.row + ")");
setLabel("RowChanging event called!");
}
//unhide row
if (info.propertyName === "isVisible" && info.newValue === true) {
setTextarea("RowChanging: unhide row(" + "row: " + info.row + ")");
setLabel("RowChanging event called!");
}
//hide row
if (info.propertyName === "isVisible" && info.newValue === false) {
setTextarea("RowChanging: hide row(" + "row: " + info.row + ")");
setLabel("RowChanging event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (sender, info) {
//insert row
if (info.propertyName === "addRows") {
setTextarea("RowChanged: insert row(" + "row: " + info.row + ")");
setLabel("RowChanged event called!");
}
//delete row
if (info.propertyName === "deleteRows") {
setTextarea("RowChanged: delete row(" + "row: " + info.row + ")");
setLabel("RowChanged event called!");
}
//unhide row
if (info.propertyName === "isVisible" && info.newValue === true) {
setTextarea("RowChanged: unhide row(" + "row: " + info.row + ")");
setLabel("RowChanged event called!");
}
//hide row
if (info.propertyName === "isVisible" && info.newValue === false) {
setTextarea("RowChanged: hide row(" + "row: " + info.row + ")");
setLabel("RowChanged event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.EditorStatusChanged, function () {
setStatus(sheet, setLabel, setTextarea);
});
sheet.bind(GC.Spread.Sheets.Events.SelectionChanging, function (e, info) {
setTextarea("New Selection(" + "row: " + info.newSelections[0].row + ", " + "column: " + info.newSelections[0].col + ", " + "rowCount: " + info.newSelections[0].rowCount + ", " + "columnCount: " + info.newSelections[0].colCount + ")");
setLabel("SelectionChanging event called!");
});
}
createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import Panel from './panel';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
const { useState } = React;
export const AppFunc = () => {
const [labelValue, setLabel] = useState('Editor Status: Ready!');
const [textareaValue, setTextarea] = useState('Cell is not being edited.');
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread, setLabel, setTextarea)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel labelValue={labelValue} textareaValue={textareaValue}
></Panel>
</div>
)
}
function setStatus(sheet, setLabel, setTextarea) {
let statusNow = sheet.editorStatus();
if (statusNow === GC.Spread.Sheets.EditorStatus.ready) {
setTextarea("Cell is not being edited.");
setLabel("Editor Status: Ready!");
} else if (statusNow === GC.Spread.Sheets.EditorStatus.enter) {
setTextarea("Cell is being edited, you can leave the cell by pressing one of the arrow keys.");
setLabel("Editor Status: Enter!");
} else if (statusNow === GC.Spread.Sheets.EditorStatus.edit) {
setTextarea("Cell is being edited, you can not leave the cell by pressing one of the arrow keys.");
setLabel("Editor Status: Edit!");
}
}
function initSpread(spread, setLabel, setTextarea) {
let self = this;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
setStatus(sheet, setLabel, setTextarea);
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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.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 GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheet.resumePaint();
sheet.bind(GC.Spread.Sheets.Events.ColumnChanging, function (sender, info) {
//insert column
if (info.propertyName === "addColumns") {
setTextarea("ColumnChanging: addColumns(" + "column: " + info.col + ")");
setLabel("ColumnChanging event called!");
}
//delete column
if (info.propertyName === "deleteColumns") {
setTextarea("ColumnChanging: deleteColumns(" + "column: " + info.col + ")");
setLabel("ColumnChanging event called!");
}
//unhide column
if (info.propertyName === "isVisible" && info.newValue === true) {
setTextarea("ColumnChanging: unhide column(" + "column: " + info.col + ")");
setLabel("ColumnChanging event called!");
}
//hide column
if (info.propertyName === "isVisible" && info.newValue === false) {
setTextarea("ColumnChanging: hide column(" + "column: " + info.col + ")");
setLabel("ColumnChanging event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.ColumnChanged, function (sender, info) {
//insert column
if (info.propertyName === "addColumns") {
setTextarea("ColumnChanged: insert column(" + "column: " + info.col + ")");
setLabel("ColumnChanged event called!");
}
//delete column
if (info.propertyName === "deleteColumns") {
setTextarea("ColumnChanged: deleteColumns(" + "column: " + info.col + ")");
setLabel("ColumnChanged event called!");
}
//unhide column
if (info.propertyName === "isVisible" && info.newValue === true) {
setTextarea("ColumnChanged: unhide column(" + "column: " + info.col + ")");
setLabel("ColumnChanged event called!");
}
//hide column
if (info.propertyName === "isVisible" && info.newValue === false) {
setTextarea("ColumnChanged: hide column(" + "column: " + info.col + ")");
setLabel("ColumnChanged event called!");
}
});
//RowChanging
sheet.bind(GC.Spread.Sheets.Events.RowChanging, function (sender, info) {
//insert row
if (info.propertyName === "addRows") {
setTextarea("RowChanging: insert row(" + "row: " + info.row + ")");
setLabel("RowChanging event called!");
}
//delete row
if (info.propertyName === "deleteRows") {
setTextarea("RowChanging: delete row(" + "row: " + info.row + ")");
setLabel("RowChanging event called!");
}
//unhide row
if (info.propertyName === "isVisible" && info.newValue === true) {
setTextarea("RowChanging: unhide row(" + "row: " + info.row + ")");
setLabel("RowChanging event called!");
}
//hide row
if (info.propertyName === "isVisible" && info.newValue === false) {
setTextarea("RowChanging: hide row(" + "row: " + info.row + ")");
setLabel("RowChanging event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (sender, info) {
//insert row
if (info.propertyName === "addRows") {
setTextarea("RowChanged: insert row(" + "row: " + info.row + ")");
setLabel("RowChanged event called!");
}
//delete row
if (info.propertyName === "deleteRows") {
setTextarea("RowChanged: delete row(" + "row: " + info.row + ")");
setLabel("RowChanged event called!");
}
//unhide row
if (info.propertyName === "isVisible" && info.newValue === true) {
setTextarea("RowChanged: unhide row(" + "row: " + info.row + ")");
setLabel("RowChanged event called!");
}
//hide row
if (info.propertyName === "isVisible" && info.newValue === false) {
setTextarea("RowChanged: hide row(" + "row: " + info.row + ")");
setLabel("RowChanged event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.EditorStatusChanged, function () {
setStatus(sheet, setLabel, setTextarea);
});
sheet.bind(GC.Spread.Sheets.Events.SelectionChanging, function (e, info) {
setTextarea("New Selection(" + "row: " + info.newSelections[0].row + ", " + "column: " + info.newSelections[0].col + ", " + "rowCount: " + info.newSelections[0].rowCount + ", " + "columnCount: " + info.newSelections[0].colCount + ")");
setLabel("SelectionChanging event called!");
});
}
import * as React from 'react';
export default function Panel(props) {
const { labelValue, textareaValue } = props;
return (
<div class="options-container">
<div class="option-row">
<label class='labelStyle' id="status">{labelValue}</label>
</div>
<div class="option-row">
<textarea value={textareaValue} id="showSheetEvents" cols="40" rows="5" style={{ width: '80%'}}></textarea>
</div>
</div>
);
}
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app" style="height: 100%;"></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;
}
.labelStyle {
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
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
