For example, you can get an instance of a cell by specifying its row index and column index.
You also can get a series of cells in a range of the sheet area. There are two way to get range:
If you want to get a cell's position, width, or height, use the getCellRect method. This method returns the rectangle of the cell.
The spread provides a referenceStyle property. It sets the ReferenceStyle enumeration, which provides two settings:
a1
r1c1
The property sets the style of cell formulas and its default value is ReferenceStyle.a1. The appearance is the same as Excel. Use the following code to change the setting:
The sheet has an allowCellOverflow property; its default value is false. When this property's value has been set to true, the cell's data will overflow into adjacent empty cells. Use the following code to change the property's value:
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 {
referenceStyle = 'a1';
spread: GC.Spread.Sheets.Workbook;
allowCellOverFlow = true
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
referenceStyleChange(e: any) {
let sheet = this.spread.getSheet(0);
let referenceStyleValue = e.target.value;
let referenceStyle = GC.Spread.Sheets.ReferenceStyle[referenceStyleValue];
this.spread.options.referenceStyle = referenceStyle;
this.spread.getActiveSheet().recalcAll();
sheet.getCell(6, 0).value(referenceStyleValue.toLocaleLowerCase() === 'a1' ? 'A1' : 'R1C1');
}
allowCellOverFlowChange(e: any) {
let sheet = this.spread.getActiveSheet();
if (sheet) {
sheet.options.allowCellOverflow = e.target.checked;
}
}
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setValue(0, 0, 12);
sheet.setValue(1, 0, 13);
sheet.setValue(2, 0, 14);
sheet.setValue(3, 0, 15);
sheet.setValue(5, 0, 'ReferenceStyle');
sheet.setValue(6, 0, 'A1');
sheet.setValue(5, 1, 'Formula:');
sheet.setFormula(6, 1, '=FORMULATEXT(C7)');
sheet.setValue(5, 2, 'Result:');
sheet.setFormula(6, 2, 'SUM(A4:A8)');
sheet.setValue(9, 0, 'textAlignment');
sheet.setValue(10, 0, 'right');
sheet.setValue(11, 0, 'center');
sheet.setValue(12, 0, 'left');
sheet.setValue(13, 0, 'centerContinues');
sheet.getCell(10, 2).value('The cell overflow to right cell').hAlign(3);
sheet.getCell(11, 2).value('The cell overflow to left and right cell').hAlign(1);
sheet.getCell(12, 2).value('The cell overflow to left cell').hAlign(2);
sheet.getCell(13, 2).value('The cell overflow to left and right cell').hAlign(4);
sheet.resumePaint();
}
}
@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-column width=120></gc-column>
<gc-column width=200></gc-column>
<gc-column width=120></gc-column>
<gc-column width=120></gc-column>
<gc-column width=120></gc-column>
<gc-column width=120></gc-column>
<gc-column width=120></gc-column>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="position">
<P>The reference style is defined as 'A1' and 'R1C1', the rows and the columns on the worksheet are numbered.</P>
<P>If you change the reference style, the formula's reference will change too.</P>
<label for="referenceStyle">ReferenceStyle:</label>
<select id="referenceStyle" style="margin: 0 20px 0 6px" value = "{{referenceStyle}}" (change) = "referenceStyleChange($event)">
<option value="a1">A1</option>
<option value="r1c1">R1C1</option>
</select>
</div>
<div style="padding-top: 16px">
<input type="checkbox" id="chkAllowCellOverFlow" checked="{{allowCellOverFlow}}" (change) = "allowCellOverFlowChange($event)"/>
<label for="chkAllowCellOverFlow">AllowCellOverFlow</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 {
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;
}
(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);
