The corresponding type should provide a typeName field in its toJSON, which tells the type's name related to the window. When deserialized, use getTypeFromString to get the type's name and create an instance, then invoke fromJSON.
The following rules can help you serialize and deserialize custom items correctly:
Set the full type string to the typeName field (include namespace if present).
If a custom type has a circular dependency or you want to reduce JSON size, or you have other advanced requirements, the custom type also needs to override the toJSON and fromJSON methods.
If a custom type is in a closure, in other words, you don't want to put the custom type on a window object, you need to override the getTypeFromString method for parsing the type string.
For 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;
spread2: GC.Spread.Sheets.Workbook;
hostStyle = {
width: '100%',
height: '260px',
overflow: 'hidden',
float: 'left'
};
constructor() {
}
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
let tagSheetIndex, rowFilterSheetIndex;
let digitMap = [{
label: "Zero",
value: 0
},
{
label: "One",
value: 1
},
{
label: "Two",
value: 2
},
{
label: "Three",
value: 3
},
{
label: "Four",
value: 4
},
{
label: "Five",
value: 5
},
{
label: "Six",
value: 6
},
{
label: "Seven",
value: 7
},
{
label: "Eight",
value: 8
},
{
label: "Nine",
value: 9
},
{
label: "Ten",
value: 10
}
];
// Define custom formatter (private in function)
class MyFormatter extends GC.Spread.Formatter.FormatterBase {
typeName: string;
constructor(format?: string, cultureName?: string) {
super(format, cultureName);
this.typeName = "MyFormatter";
}
parse(str: string) {
let labels = digitMap.map(function (item) {
return item.label;
}),
index = labels.indexOf(str);
if (index === -1) {
index = parseInt(str);
}
return (index < 0 || index > 10) ? NaN : index;
}
format(obj: any, conditionalForeColor: any) {
let numbers = digitMap.map(function (item) {
return item.value
}),
index = numbers.indexOf(obj);
return index === -1 ? "NaN" : digitMap[index].label;
}
}
// Define custom row filter (private in function)
class MyRowFilter extends GC.Spread.Sheets.Filter.RowFilterBase {
typeName: string;
constructor(range: GC.Spread.Sheets.Range) {
super(range);
this.typeName = "MyRowFilter";
}
onFilter(args: any) {
if (args.action === GC.Spread.Sheets.Filter.FilterActionType.filter) {
let sheet = args.sheet,
range = args.range,
filterdRows = args.filteredRows;
if (range.row < 0) {
range.row = 0;
range.rowCount = sheet.getRowCount();
}
if (range.col < 0) {
range.col = 0;
range.colCount = sheet.getColumnCount();
}
for (let i = 0, filterdRowCount = filterdRows.length; i < filterdRowCount; i++) {
let rowIndex = filterdRows[i];
sheet.getRange(rowIndex, range.col, 1, range.colCount).backColor("red");
}
}
}
}
let oldFun = GC.Spread.Sheets.getTypeFromString;
// Private types can not be accessed from window, so override getTypeFromString method.
GC.Spread.Sheets.getTypeFromString = function (typeString: string) {
switch (typeString) {
case "MyFormatter":
return MyFormatter;
case "MyRowFilter":
return MyRowFilter;
default:
return oldFun.apply(this, arguments);
}
};
spread.suspendPaint();
spread.options.allowSheetReorder = false;
spread.options.tabStripRatio = 0.9;
let sheet = spread.getSheet(0);
sheet.name("Cell type");
sheet.setCellType(0, 0, new MyCellType("green"));
sheet.setRowHeight(0, 60);
sheet = spread.getSheet(1);
sheet.name("Function");
sheet.addCustomFunction(new mynamespace.MyFunction());
sheet.setFormula(0, 0, "MyFunction()");
sheet.setColumnWidth(0, 150);
sheet = spread.getSheet(2);
sheet.name("Formatter");
sheet.setValue(0, 0, 1);
sheet.setFormatter(0, 0, new MyFormatter());
sheet.setFormula(0, 1, "A1");
sheet = spread.getSheet(3);
sheet.name("SparklineEx");
spread.addSparklineEx(new mynamespace.MySparklineEx());
sheet.setFormula(0, 0, "CIRCLE()");
sheet.setRowHeight(0, 60);
tagSheetIndex = 4;
sheet = spread.getSheet(tagSheetIndex);
sheet.name("Tag");
sheet.tag(new MyTag("Ivy", 24));
sheet.setTag(0, 0, new MyTag("Yang", 25));
sheet.options.allowCellOverflow = true;
sheet.setValue(0, 0, "Please check tag serialization result in console");
rowFilterSheetIndex = 5;
sheet = spread.getSheet(rowFilterSheetIndex);
sheet.name("Row Filter");
for (let r = 0; r < 3; r++) {
for (let c = 0; c < 3; c++) {
sheet.setValue(r, c, r + c);
}
}
let filter = new MyRowFilter(new GC.Spread.Sheets.Range(0, 0, 3, 3));
sheet.rowFilter(filter);
(<any>filter).filterButtonVisible(false);
let condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.numberCondition, {
compareType: GC.Spread.Sheets.ConditionalFormatting.GeneralComparisonOperators.greaterThan,
expected: 1
});
sheet.rowFilter().addFilterItem(0, condition);
spread.getSheet(rowFilterSheetIndex).rowFilter().filter();
spread.resumePaint();
}
initSpread2($event: any) {
this.spread2 = $event.spread;
}
serialization(e: any) {
//ToJson
let spread1 = this.spread;
let jsonStr = JSON.stringify(spread1.toJSON());
//FromJson
let spread2 = this.spread2;
spread2.fromJSON(JSON.parse(jsonStr));
// Tag verify
let tagSheetIndex = 4;
let sheet = spread1.getSheet(tagSheetIndex);
console.log("Source spread:");
console.log("Sheet tag: ", sheet.tag());
console.log("Cell Tag: ", sheet.getTag(0, 0));
let sheet2 = spread2.getSheet(tagSheetIndex);
console.log("Target spread:");
console.log("Sheet tag: ", sheet2.tag());
console.log("Cell Tag: ", sheet2.getTag(0, 0));
}
}
class MyCellType extends GC.Spread.Sheets.CellTypes.Base {
color: string;
typeName: string;
constructor(color: string) {
super();
this.color = color || "orange";
this.typeName = "MyCellType";
}
paint(ctx: any, value: any, x: number, y: number, width: number, height: number, style: GC.Spread.Sheets.Style, context: any) {
let MARGIN = 5,
plotLeft = x + MARGIN,
plotWidth = width - 2 * MARGIN,
plotTop = y + MARGIN,
plotHeight = height - 2 * MARGIN,
halfHeight = plotHeight / 2,
halfWidth = plotWidth / 2;
ctx.beginPath();
ctx.moveTo(plotLeft, plotTop + halfHeight);
ctx.lineTo(plotLeft + halfWidth, plotTop);
ctx.lineTo(plotLeft + plotWidth, plotTop + halfHeight);
ctx.lineTo(plotLeft + halfWidth, plotTop + plotHeight);
ctx.lineTo(plotLeft, plotTop + halfHeight);
ctx.strokeStyle = this.color;
ctx.stroke();
}
}
(<any>window).MyCellType = MyCellType;
// Define custom tag
class MyTag {
name: string;
age: number;
typeName: string;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
this.typeName = "MyTag";
}
toJSON() {
return {
typeName: this.typeName, //necessary
name: this.name,
age: this.age
};
}
fromJSON(settings: any) {
if (settings.name !== undefined) {
this.name = settings.name;
}
if (settings.age !== undefined) {
this.age = settings.age;
}
}
}
(<any>window).MyTag = MyTag;
let mynamespace: any = (<any>window).mynamespace = {};
(function () {
// Define custom function (with namespace)
function MyFunction() {
GC.Spread.CalcEngine.Functions.Function.apply(this, ["MyFunction", 0, 0]);
this.typeName = "mynamespace.MyFunction";
}
MyFunction.prototype = new GC.Spread.CalcEngine.Functions.Function();
MyFunction.prototype.evaluate = function (args: any) {
let now = new Date();
return now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + now.getDate();
};
mynamespace.MyFunction = MyFunction;
// Define custom sparklineEx (with namespace)
function MySparklineEx() {
GC.Spread.Sheets.Sparklines.SparklineEx.apply(this, arguments);
this.typeName = "mynamespace.MySparklineEx";
}
MySparklineEx.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
MySparklineEx.prototype.createFunction = function () {
let func = new GC.Spread.CalcEngine.Functions.Function("CIRCLE", 0, 0);
func.evaluate = function (args: any) {
return {};
};
return func;
};
MySparklineEx.prototype.paint = function (context: any, value: any, x: number, y: number, width: number, height: number) {
context.beginPath();
context.arc(x + width / 2, y + height / 2, (Math.min(width, height) - 6) / 2, 0, Math.PI * 2);
context.strokeStyle = "orange";
context.stroke();
};
mynamespace.MySparklineEx = MySparklineEx;
})();
@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">
<div class="sample-spreadsheets-container">
<label style="font:bold 10pt arial">Source:</label>
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<br />
<label style="font:bold 10pt arial">Target:</label>
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread2($event)">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
</div>
<div class="options-container">
<div class="option-row">
<label >Click button to serialize the custom item in the source workbook to the target workbook.</label>
</div>
<div class="option-row">
<input type="button" id="fromtoJsonBtn" value="Json Serialize" title="Serialize source spread to JSON and restore from JSON to target spread." (click)="serialization($event)"/>
</div>
</div>
</div>
input[type="checkbox"] {
margin-left: 20px;
}
.colorLabel {
background-color: #F4F8EB;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets-container {
width: calc(100% - 302px);
height: 600px;
overflow: hidden;
float: left;
}
.sample-spreadsheets {
width: 100%;
height: 260px;
}
.options-container {
float: right;
width: 302px;
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);
