To create a RangeTemplate , follow this example:
The following is the API definition:
The parameters row, col, rowCount, and colCount are optional. If those parameters not set, the whole sheet row will be used to create the RangeTemplate. Here is an example of creating a RangeTemplate with a defined row and column count:
You can customize your bindingPath or formula in the template WorkSheet. The RangeTemplate will then use the cell value as the datasource to resolve the bindingPath or formula in the designated range.
Conditional rules, data validation, sparkline data & date ranges, sparklineEx, and formulas can refer to a cell or cell range and they must be contained within the RangeTemplate. In addition, the spans in template WorkSheet must be completely contained inside the RangeTemplate.
The RangeTemplate does not support nesting other RangeTemplates, as it may lose data or cause an endless loop.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
// import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
// ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
export function AppFunc() {
let spread = null;
let renderSheet = null;
let templateSheet = null;
const updateRangeCellType = () => {
let celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);
renderSheet.setCellType(-1, 0, celltype);
}
const initSpread = (currSpread) => {
spread = currSpread;
spread.setSheetCount(1);
let renderSheet = spread.getActiveSheet();
let templateSheet = new GC.Spread.Sheets.Worksheet();
templateSheet.fromJSON(templatesheetjson);
spread.addSheet(1,templateSheet);
templateSheet = templateSheet;
renderSheet = renderSheet;
renderSheet.suspendPaint();
let celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);
renderSheet.autoGenerateColumns = false;
data = updateData(renderSheet, data);
renderSheet.setDataSource(data);
let cardInfo = {
displayName: "Person Card",
size: 440,
value: function (item) {
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();
}
const updateData = (sheet, data) => {
data.forEach(obj => {
var url = obj.image;
obj.image = GC.Spread.Sheets.CalcEngine.evaluateFormula(sheet, '=IMAGE(\"' + url + '\")');
});
return data;
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
</SpreadSheets>
</div>
<Panel updateRangeCellType={updateRangeCellType}/>
</div>
);
}
function Panel(props) {
return(
<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" onClick = {props.updateRangeCellType}/>
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.updateRangeCelltype = this.updateRangeCelltype.bind(this);
this.renderSheet = null;
this.templateSheet = null;
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}>
</SpreadSheets>
</div>
<Panel updateRangeCelltype={(e)=>{this.updateRangeCelltype(e)}}/>
</div>
)
}
updateRangeCelltype() {
let celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(this.templateSheet);
this.renderSheet.setCellType(0, 0, celltype);
}
initSpread(spread) {
this.spread = 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;
renderSheet.suspendPaint();
let celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);
renderSheet.autoGenerateColumns = false;
data = this.updateData(renderSheet, data);
renderSheet.setDataSource(data);
let cardInfo = {
displayName: "Person Card",
size: 440,
value: function (item) {
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();
}
updateData(sheet, data) {
data.forEach(obj => {
var url = obj.image;
obj.image = GC.Spread.Sheets.CalcEngine.evaluateFormula(sheet, '=IMAGE(\"' + url + '\")');
});
return data;
}
}
class Panel extends Component{
constructor(props){
super(props);
}
render(){
return(
<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" onClick = {() => {this.props.updateRangeCelltype()}}/>
</div>
</div>
)
}
}
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<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/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
.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: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
