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 { Component, NgModule, enableProdMode, ChangeDetectorRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
labelValue = 'Editor Status: Ready!';
textareaValue = 'Cell is not being edited.';
hostStyle = {
width: 'calc(100% - 280px)',
height: 'calc(100% - 25px)',
overflow: 'hidden',
float: 'left'
};
constructor(private cdr: ChangeDetectorRef) {}
setStatus(sheet: any) {
let statusNow = sheet.editorStatus();
if (statusNow === GC.Spread.Sheets.EditorStatus.ready) {
this.textareaValue = ("Cell is not being edited.");
this.labelValue = ("Editor Status: Ready!");
} else if (statusNow === GC.Spread.Sheets.EditorStatus.enter) {
this.textareaValue = ("Cell is being edited, you can leave the cell by pressing one of the arrow keys.");
this.labelValue = ("Editor Status: Enter!");
} else if (statusNow === GC.Spread.Sheets.EditorStatus.edit) {
this.textareaValue = ("Cell is being edited, you can not leave the cell by pressing one of the arrow keys.");
this.labelValue = ("Editor Status: Edit!");
}
this.cdr.detectChanges();
}
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
//init Status Bar
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
document.getElementById('statusBar')
);
statusBar.bind(spread);
let self = this;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
this.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 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: any, info: any) {
//insert column
if (info.propertyName === "addColumns") {
self.textareaValue = ("ColumnChanging: addColumns(" + "column: " + info.col + ")");
self.labelValue = ("ColumnChanging event called!");
}
//delete column
if (info.propertyName === "deleteColumns") {
self.textareaValue = ("ColumnChanging: deleteColumns(" + "column: " + info.col + ")");
self.labelValue = ("ColumnChanging event called!");
}
//unhide column
if (info.propertyName === "isVisible" && info.newValue === true) {
self.textareaValue = ("ColumnChanging: unhide column(" + "column: " + info.col + ")");
self.labelValue = ("ColumnChanging event called!");
}
//hide column
if (info.propertyName === "isVisible" && info.newValue === false) {
self.textareaValue = ("ColumnChanging: hide column(" + "column: " + info.col + ")");
self.labelValue = ("ColumnChanging event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.ColumnChanged, function (sender: any, info: any) {
//insert column
if (info.propertyName === "addColumns") {
self.textareaValue = ("ColumnChanged: insert column(" + "column: " + info.col + ")");
self.labelValue = ("ColumnChanged event called!");
}
//delete column
if (info.propertyName === "deleteColumns") {
self.textareaValue = ("ColumnChanged: deleteColumns(" + "column: " + info.col + ")");
self.labelValue = ("ColumnChanged event called!");
}
//unhide column
if (info.propertyName === "isVisible" && info.newValue === true) {
self.textareaValue = ("ColumnChanged: unhide column(" + "column: " + info.col + ")");
self.labelValue = ("ColumnChanged event called!");
}
//hide column
if (info.propertyName === "isVisible" && info.newValue === false) {
self.textareaValue = ("ColumnChanged: hide column(" + "column: " + info.col + ")");
self.labelValue = ("ColumnChanged event called!");
}
});
//RowChanging
sheet.bind(GC.Spread.Sheets.Events.RowChanging, function (sender: any, info: any) {
//insert row
if (info.propertyName === "addRows") {
self.textareaValue = ("RowChanging: insert row(" + "row: " + info.row + ")");
self.labelValue = ("RowChanging event called!");
}
//delete row
if (info.propertyName === "deleteRows") {
self.textareaValue = ("RowChanging: delete row(" + "row: " + info.row + ")");
self.labelValue = ("RowChanging event called!");
}
//unhide row
if (info.propertyName === "isVisible" && info.newValue === true) {
self.textareaValue = ("RowChanging: unhide row(" + "row: " + info.row + ")");
self.labelValue = ("RowChanging event called!");
}
//hide row
if (info.propertyName === "isVisible" && info.newValue === false) {
self.textareaValue = ("RowChanging: hide row(" + "row: " + info.row + ")");
self.labelValue = ("RowChanging event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (sender: any, info: any) {
//insert row
if (info.propertyName === "addRows") {
self.textareaValue = ("RowChanged: insert row(" + "row: " + info.row + ")");
self.labelValue = ("RowChanged event called!");
}
//delete row
if (info.propertyName === "deleteRows") {
self.textareaValue = ("RowChanged: delete row(" + "row: " + info.row + ")");
self.labelValue = ("RowChanged event called!");
}
//unhide row
if (info.propertyName === "isVisible" && info.newValue === true) {
self.textareaValue = ("RowChanged: unhide row(" + "row: " + info.row + ")");
self.labelValue = ("RowChanged event called!");
}
//hide row
if (info.propertyName === "isVisible" && info.newValue === false) {
self.textareaValue = ("RowChanged: hide row(" + "row: " + info.row + ")");
self.labelValue = ("RowChanged event called!");
}
});
sheet.bind(GC.Spread.Sheets.Events.EditorStatusChanged, function () {
self.setStatus(sheet);
});
sheet.bind(GC.Spread.Sheets.Events.SelectionChanging, function (e: any, info: any) {
self.textareaValue = ("New Selection(" + "row: " + info.newSelections[0].row + ", " + "column: " + info.newSelections[0].col + ", " + "rowCount: " + info.newSelections[0].rowCount + ", " + "columnCount: " + info.newSelections[0].colCount + ")");
self.labelValue = ("SelectionChanging event called!");
});
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div id="statusBar"></div>
<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>
</div>
.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: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.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',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
