SpreadJS supports cell level padding and cell labels.
You can add padding for the cell by setting the style cellPadding property. Cell padding has the same policy as CSS Padding. For example:
The value of the label is taken from the watermark, for this reason, you need to set a watermark value when setting a cell label. For example:
You can set the label style by setting the style labelOptions property. The labelOptions is an object and it has five properties:
alignment: The label position. There are six positions: topLeft, topCenter, topRight, bottomLeft, bottomCenter, and bottomRight. The default value is topLeft.
visibility: The label display mode, there are three display modes:
visible - Always show watermark in padding area, don't show watermark in cell area regardless of whether the cell has a value.
hidden - Don't show watermark in padding area, but show watermark in cell area with value condition.
auto - Show watermark in padding area when the cell has a value, show watermark in cell area when the cell does not have a value. This is the default display value.
font: The label font. If there is no labelFont value, the style's font value is used. If there is no font value, the sheet default font value is used.
foreColor: The label forecolor. If there is no labelForeColor value, the style's foreColor value is used. If there is no foreColor value, the forecolor is 'grey'.
margin: The label margin. The label margin has the same policy as the CSS margin. CSS has properties to specify the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
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;
hostStyle = {
width: '100%',
height: '100%',
overflow: 'hidden',
float: 'left'
};
initLayout(sheet: GC.Spread.Sheets.Worksheet) {
var rowCount = sheet.getRowCount();
var colCount = sheet.getColumnCount();
var i;
for (i = 0; i < rowCount; i++) {
sheet.setRowHeight(i, 40);
}
sheet.setColumnWidth(0, 120);
sheet.setColumnWidth(1, 80);
i = 0;
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i++, 3, 1, colCount - 3);
sheet.addSpan(i++, 6, 1, 7);
sheet.addSpan(i, 0, 1, 6);
sheet.addSpan(i, 6, 1, 3);
sheet.addSpan(i++, 9, 1, 4);
sheet.addSpan(i, 0, 1, 6);
sheet.addSpan(i++, 6, 1, 7);
sheet.addSpan(i++, 0, 1, colCount);
sheet.addSpan(i, 0, 1, 6);
sheet.addSpan(i++, 6, 1, 7);
sheet.addSpan(i, 0, 1, colCount - 4);
sheet.addSpan(i++, colCount - 4, 1, 4);
sheet.addSpan(i, 0, 1, 3);
sheet.addSpan(i, 3, 1, 3);
sheet.addSpan(i, 6, 1, 3);
sheet.addSpan(i++, 9, 1, 4);
for (; i < rowCount; i++) {
sheet.addSpan(i, 0, 1, colCount);
}
}
setBorder(sheet: GC.Spread.Sheets.Worksheet) {
sheet.getRange(2, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), {
top: true
});
sheet.getRange(4, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), {
top: true
});
sheet.getRange(4, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(5, 0, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(6, 6, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet
.getRange(9, -1, 0, -1)
.setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.medium), {
bottom: true
});
sheet.getRange(9, 0, 1, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(10, 0, 2, 9).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(11, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
sheet.getRange(11, 3, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
right: true
});
}
getCheckBoxCellType(text: string) {
var c = new GC.Spread.Sheets.CellTypes.CheckBox();
c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
c.caption(text);
return c;
}
getComboBoxCellType() {
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo.items([
{
text: 'China',
value: '1'
},
{
text: 'United States',
value: '2'
},
{
text: 'Japan',
value: '2'
},
{
text: 'Germany',
value: '2'
},
{
text: 'France',
value: '2'
},
{
text: 'England',
value: '2'
}
]);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
return combo;
}
getHyperLinkCellType(text: string, tooltip: any) {
var h = new GC.Spread.Sheets.CellTypes.HyperLink();
h.text(text);
h.linkToolTip(tooltip);
return h;
}
addCellType(spread: GC.Spread.Sheets.Workbook) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.getCell(0, 0).value('Example Form').font('bold 30px Arial');
sheet
.getCell(1, 0)
.value('Please open an account at')
.font('bold 18px Arial')
.vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(2, 0).watermark('BRANCH NAME').locked(false).cellPadding('20 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(3, 0).value('Personal Details').font('bold 18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet
.getCell(4, 0)
.watermark('MARITIAL STATUS')
.locked(false)
.cellType(this.getCheckBoxCellType('Married'))
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(4, 1).locked(false).cellType(this.getCheckBoxCellType('Single')).cellPadding('15 0 0 0');
sheet.getCell(4, 3).watermark('FULL NAME').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet
.getCell(5, 0)
.watermark('EDUCATION')
.locked(false)
.cellType(this.getCheckBoxCellType('Under graduate'))
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(5, 1).locked(false).cellType(this.getCheckBoxCellType('Graduate')).cellPadding('15 0 0 0');
sheet.getCell(5, 2).locked(false).cellType(this.getCheckBoxCellType('Others')).cellPadding('15 0 0 0');
sheet
.getCell(5, 6)
.watermark('NATIONALITY')
.locked(false)
.cellType(this.getComboBoxCellType())
.cellPadding('15 0 0 10')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(6, 0).watermark('E-MAIL').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(6, 6).watermark('MOBILE NO.').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet
.getCell(6, 9)
.watermark('EXISTING BANK ACCOUNT NO. (IF ANY)')
.locked(false)
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet
.getCell(7, 0)
.watermark('IN CASE OF A MINOR PLEASE PROVIDE DETAILS (NAME OF PARENT AND NATURAL GUARDIAN)')
.locked(false)
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 6 0 1'
});
sheet.getCell(7, 6).watermark('NAME OF FATHER/SPOUSE').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(8, 0).value('Residential address').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(9, 0).watermark('FLAT NO. AND BLDG. NAME').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(9, 6).watermark('ROAD NO./NAME').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(10, 0).watermark('AREA AND LANDMARK').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(10, 9).watermark('CITY').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(11, 0).watermark('TELEPHONE RESIDENCE').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.getCell(11, 3).watermark('OFFICE').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(11, 6).watermark('FAX').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(11, 9).watermark('PIN CODE').locked(false).cellPadding('15 0 0 0').labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 1'
});
sheet.getCell(12, 0).value('Referenced web site').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet
.getCell(13, 0)
.watermark('HELP MESSAGE')
.locked(false)
.cellType(this.getHyperLinkCellType('Any question, please click here.', 'help'))
.cellPadding('15 0 0 0')
.labelOptions({
foreColor: '#333333',
visibility: 0,
font: '10px Arial',
margin: '2 0 0 0'
});
sheet.resumePaint();
}
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
var sheet = spread.getActiveSheet();
spread.suspendPaint();
sheet.options.gridline = {
showVerticalGridline: false,
showHorizontalGridline: true,
color: 'black'
};
sheet.setRowCount(14);
sheet.setColumnCount(13);
this.initLayout(sheet);
this.setBorder(sheet);
this.addCellType(spread);
spread.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)"
[showHorizontalScrollbar] = false [showVerticalScrollbar] = false [tabStripVisible] = false
[grayAreaBackColor] = "'white'"
>
<gc-worksheet [isProtected] = true [rowHeaderVisible] = false
[colHeaderVisible] = false>
</gc-worksheet>
</gc-spread-sheets>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
height: 100%;
}
(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);
