Globalization

SpreadJS provides CultureInfo to support globalization.

You can modify the culture string and create a custom culture using the CultureInfo class. Add the custom culture by using the addCultureInfo method along with a culture name. Use the culture by setting the Culture method with the corresponding name.
import { Component, NgModule, enableProdMode, AfterViewInit } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular'; import GC from '@grapecity/spread-sheets'; import './styles.css'; import cultureInfos from "sjs-globalization"; cultureInfos.forEach(function (cultureInfo: any) { GC.Spread.Common.CultureManager.addCultureInfo(cultureInfo.name(), cultureInfo); }) @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit{ spread: GC.Spread.Sheets.Workbook; hostStyle = { width: 'calc(100% - 280px)', height: '100%', overflow: 'hidden', float: 'left' }; constructor() { } ngAfterViewInit(){ let culturesEle = document.getElementById("cultures"); ['en-us', 'zh-cn', 'ja-jp', 'ko-kr'].concat(cultureInfos).forEach(function (cultureInfo) { if(typeof cultureInfo === 'string'){ cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo(cultureInfo); } var optionEle = document.createElement("option"); optionEle.innerText = cultureInfo.name()+ ": "+ cultureInfo.displayName; optionEle.setAttribute("value", cultureInfo.name()); culturesEle.appendChild(optionEle); }); (<HTMLSelectElement>culturesEle).value = 'en-US'; this.selectCulture(); } initSpread($event: any) { this.spread = $event.spread; let spread = this.spread; spread.suspendPaint(); this.initData(spread); spread.resumePaint(); } initData(spread: GC.Spread.Sheets.Workbook) { let symbolFormat = '¥#,##0.00'; let fullDateTimePattern = 'dddd, MMMM dd, yyyy h:mm:ss tt'; let shortDateTimePattern = 'dddd tt'; let sheet = spread.getActiveSheet(); sheet.options.allowCellOverflow = true; let table = sheet.tables.add("Table1", 2, 2, 8, 4, GC.Spread.Sheets.Tables.TableThemes.medium9); table.highlightFirstColumn(true); sheet.setColumnWidth(0, 20); sheet.setColumnWidth(1, 20); sheet.setColumnWidth(2, 80); sheet.setColumnWidth(3, 180); sheet.setColumnWidth(4, 180); sheet.setColumnWidth(5, 200); //header sheet.setValue(2, 2, "Names"); sheet.setValue(2, 3, "Sale"); sheet.setValue(2, 4, "Buy"); sheet.setValue(2, 5, "Total"); sheet.setValue(3, 2, "Cindy"); sheet.setValue(4, 2, "Wills"); sheet.setValue(5, 2, "Sara"); sheet.setValue(6, 2, "Faith"); sheet.setValue(7, 2, "Halley"); sheet.setValue(8, 2, "Ken"); sheet.setValue(9, 2, "Newell"); sheet.setValue(3, 3, 1089468.3); sheet.setValue(4, 3, 1078758.3); sheet.setValue(5, 3, 1094684.6); sheet.setValue(6, 3, 1034683.2); sheet.setValue(7, 3, 1013685.1); sheet.setValue(8, 3, 1013468.8); sheet.setValue(9, 3, 1034686.2); sheet.getCell(3, 3).formatter(symbolFormat); sheet.getCell(4, 3).formatter(symbolFormat); sheet.getCell(5, 3).formatter(symbolFormat); sheet.getCell(6, 3).formatter(symbolFormat); sheet.getCell(7, 3).formatter(symbolFormat); sheet.getCell(8, 3).formatter(symbolFormat); sheet.getCell(9, 3).formatter(symbolFormat); sheet.setValue(3, 4, 1094682.6); sheet.setValue(4, 4, 1094683.9); sheet.setValue(5, 4, 1016856.9); sheet.setValue(6, 4, 1046858.4); sheet.setValue(7, 4, 1034685.9); sheet.setValue(8, 4, 1074851.5); sheet.setValue(9, 4, 1034682.9); sheet.getCell(3, 4).formatter(symbolFormat); sheet.getCell(4, 4).formatter(symbolFormat); sheet.getCell(5, 4).formatter(symbolFormat); sheet.getCell(6, 4).formatter(symbolFormat); sheet.getCell(7, 4).formatter(symbolFormat); sheet.getCell(8, 4).formatter(symbolFormat); sheet.getCell(9, 4).formatter(symbolFormat); sheet.getCell(3, 5).formula("=D4+E4-100.1"); sheet.getCell(4, 5).formula("=D5+E5-100.1"); sheet.getCell(5, 5).formula("=D6+E6-100.1"); sheet.getCell(6, 5).formula("=D7+E7-100.1"); sheet.getCell(7, 5).formula("=D8+E8-100.1"); sheet.getCell(8, 5).formula("=D9+E9-100.1"); sheet.getCell(9, 5).formula("=D10+E10-100.1"); sheet.getCell(3, 5).formatter(symbolFormat); sheet.getCell(4, 5).formatter(symbolFormat); sheet.getCell(5, 5).formatter(symbolFormat); sheet.getCell(6, 5).formatter(symbolFormat); sheet.getCell(7, 5).formatter(symbolFormat); sheet.getCell(8, 5).formatter(symbolFormat); sheet.getCell(9, 5).formatter(symbolFormat); let table2 = sheet.tables.add("Table2", 12, 2, 5, 4, GC.Spread.Sheets.Tables.TableThemes.medium9); table2.highlightFirstColumn(true); sheet.setValue(12, 2, "Name"); sheet.setValue(12, 3, "Birthday"); sheet.setValue(12, 5, "Date"); sheet.setValue(13, 2, "Cindy"); sheet.setValue(14, 2, "Sara"); sheet.setValue(15, 2, "Faith"); sheet.setValue(16, 2, "Nami"); sheet.addSpan(12, 3, 1, 2); sheet.addSpan(13, 3, 1, 2); sheet.addSpan(14, 3, 1, 2); sheet.addSpan(15, 3, 1, 2); sheet.addSpan(16, 3, 1, 2); let mydate = new Date(); mydate.setFullYear(1984, 1, 21); let date; date = new Date("1984/01/21 15:32:26"); sheet.setValue(13, 3, date); sheet.setValue(13, 5, date); date = new Date("1991/08/17 21:36:52"); sheet.setValue(14, 3, date); sheet.setValue(14, 5, date); date = new Date("2008/08/08 08:08:08"); sheet.setValue(15, 3, date); sheet.setValue(15, 5, date); date = new Date("2014/01/01 0:00:00"); sheet.setValue(16, 3, date); sheet.setValue(16, 5, date); sheet.getCell(13, 3).formatter(fullDateTimePattern); sheet.getCell(14, 3).formatter(fullDateTimePattern); sheet.getCell(15, 3).formatter(fullDateTimePattern); sheet.getCell(16, 3).formatter(fullDateTimePattern); sheet.getCell(13, 5).formatter(shortDateTimePattern); sheet.getCell(14, 5).formatter(shortDateTimePattern); sheet.getCell(15, 5).formatter(shortDateTimePattern); sheet.getCell(16, 5).formatter(shortDateTimePattern); } selectCulture() { let spread = this.spread; let sheet = spread.getActiveSheet(); spread.suspendPaint(); let cultureName = document.getElementById('cultures').value; GC.Spread.Common.CultureManager.culture(cultureName); let culture = GC.Spread.Common.CultureManager.getCultureInfo(cultureName); let symbolFormat; if (culture.predefinedFormats.Currency) { symbolFormat = culture.predefinedFormats.Currency[0]; } else { symbolFormat = culture.NumberFormat.currencySymbol; symbolFormat = '"' + symbolFormat + '"' + '#,##0.00'; } for (let row = 3; row <= 9; row++) { for (let col = 3; col <= 5; col++) { sheet.getCell(row, col).formatter(symbolFormat); } } 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/@grapecity/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/dist/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.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"> <label for="cultures">Culture: </label> </div> <div class="option-row"> <select id="cultures" style="width: 100%" (change)="selectCulture($event)"> </select> </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; margin-top: 10px; } label { display: block; 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/dist/zone.min.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': 'npm:plugin-typescript/lib/plugin.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', '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-angular': 'npm:@grapecity/spread-sheets-angular/bundles/grapecity-spread-sheets-angular.umd.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'sjs-globalization': '$DEMOROOT$/spread/source/js/external/sjs-globalization/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' }, } }); })(this);