The RangeTemplate is a very powerful new feature allowing the user or developer to define a template of cell ranges as a single celltype and apply that template to a cell to load different data into the template. This could include multiple rows and/or columns, for example allowing you to display a card view in one cell.

``````To create RangeTemplate , follow this example: Here is the api define: The params row, col,rowCount,colCount is optional, they are use for create template range, if those params not set ,RangeTemplate will use the whole sheet ro create template range. Follow is the example: You can customize your bindingPath or formula in template WorkSheet. Then the RangeTemplate will use the cell value as the datasource to resovle the bindingPath or formula the designative range. The range of condition rule, datavalidation, sparkline data range & date range, sparklineEx, formulas refer to cell or range , those all should contian in the template range, otherwise it may makes wrong. Also the spans in template WorkSheet must be completely contained inside the template range. The rangeTemplate not support nest other rangeTemplate, it may loss data or cause endless loop.
import { Component, NgModule, enableProdMode } 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'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { renderSheet: GC.Spread.Sheets.Worksheet; templateSheet: GC.Spread.Sheets.Worksheet; spread: GC.Spread.Sheets.Workbook; hostStyle = { width: 'calc(100% - 280px)', height: '100%', overflow: 'hidden', float: 'left' }; updateRangeCelltype() { let celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(this.templateSheet); this.renderSheet.setCellType(-1, 0, celltype); } initSpread($event: any) { this.spread = $event.spread; let spread = this.spread; spread.setSheetCount(1); let renderSheet = spread.getActiveSheet(); let templateSheet = new GC.Spread.Sheets.Worksheet(); templateSheet.fromJSON(templatesheetjson); spread.addSheet(1, templateSheet); this.templateSheet = templateSheet; this.renderSheet = renderSheet; let imageCellType = new ImageCellType(); templateSheet.getCell(2, 2).cellType(imageCellType); renderSheet.suspendPaint(); let celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet); renderSheet.autoGenerateColumns = false; renderSheet.setDataSource(data); let cardInfo = { displayName: "Person Card", size: 440, value: function (item: any) { return item; }, cellType: celltype }; renderSheet.defaults.rowHeight = 207; renderSheet.bindColumn(0, cardInfo); renderSheet.bindColumn(1, { displayName: "Name", name: 'fullName', size: 150 }); renderSheet.bindColumn(2, { displayName: "Phone", name: 'phone', size: 150 }); renderSheet.bindColumn(3, { displayName: "Email", name: 'email', size: 360 }); renderSheet.bindColumn(4, { displayName: "Registered Date", name: 'registered.date', size: 240 }); renderSheet.resumePaint(); } } class ImageCellType extends GC.Spread.Sheets.CellTypes.Base { typeName: string; constructor() { super(); this.typeName = "ImageCellType"; } paint(ctx: any, value: string, x: number, y: number, w: number, h: number, style: any, context: any) { style.backgroundImage = value; style.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.center; GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, '', x, y, w, h, style, context]); } } @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> <script src="$DEMOROOT$/spread/source/data/rangecelltype-data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/rangecelltype-templatesheet.js" type="text/javascript"></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-spread-sheets> <div class="options-container"> <div class="option-row"> <p>In this example, you can change the template label text. Switch to the Template sheet, change the Email or Phone text, then press Update RangeTemplate to apply your changes to the template. You can switch back to Sheet1 to view your changes.</p> <input type="button" id="update" value="Update RangeTemplate" (click) = "updateRangeCelltype($event)"/> </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; overflow: auto; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; } .option-row { padding-bottom: 8px; } label { padding-bottom: 4px; display: block; } input { width: 100%; padding: 4px 8px; box-sizing: border-box; } 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/index.js', '@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' }, } }); })(this);