After the user changes the sheet, the Spread component needs to deal with these changes and paint a new sheet.
You can use the repaint method to repaint the sheet.
Most of the time, after you change the sheet, the component will auto refresh to respond to the changes. If you make a lot of changes at one time, but don't want the sheet to repaint many times, then you can use the suspendPaint method to stop the automatic repaint until the changes are complete. Then call the resumePaint method to redraw the sheet, as shown in the following example:
import { Component, NgModule, enableProdMode } 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: '100%',
overflow: 'hidden',
float: 'left'
};
setValue() {
var sheet = this.spread.getActiveSheet();
var cellRange = sheet.getSelections()[0];
var salesData = [
["Salesperson", "Region", "Sales Amount", "Commission %", "Commission Amount"],
["Joe", "North", 260, '10%', 26],
["Robert", "South", 660, '15%', 99],
["Michelle", "East", 940, '15%', 141],
["Erich", "West", 410, '12%', 49.2],
["Dafna", "North", 800, '15%', 120],
["Rob", "South", 900, '15%', 135]
];
if (cellRange) {
for (var row = cellRange.row, rowCount = cellRange.row + cellRange.rowCount; row < rowCount; row++) {
for (var col = cellRange.col, colCount = cellRange.col + cellRange.colCount; col < colCount; col++) {
sheet.setArray(row, col, salesData);
sheet.getCell(row, col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
sheet.getCell(row, ++col).foreColor("lightGreen");
}
}
}
}
suspendPaint() {
this.spread.suspendPaint();
}
resumePaint() {
this.spread.resumePaint();
}
initSpread($event: any) {
this.spread = $event.spread;
}
}
@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 class="options-container">
<div class="option-row">
<input type="button" id="suspendPaint" value="Suspend Paint" (click)="suspendPaint($event)" />
<label>1. Suspend the paint of Workbook</label>
</div>
<div class="option-row">
<input type="button" id="setValue" value="Set Value Array" (click)="setValue($event)" />
<label>2. Set a range set of values on the sheet</label>
</div>
<div class="option-row">
<input type="button" id="resumePaint" value="Resume Paint" (click)="resumePaint($event)" />
<label>3. Resume the paint of Workbook</label>
</div>
</div>
</div>
.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;
}
.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);
