RangeTemplate

The RangeTemplate is a very powerful 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.

Description
app.js
index.html
styles.css
Copy to CodeMine

To create a RangeTemplate , follow this example:

    var cellType = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet, 0, 0, 12, 11);
    sheet.setCellType(3, 2, cellType, GC.Spread.Sheets.SheetArea.viewport);

The following is the API definition:

/**
 * @description RangeTemplate provide a template from a range of referenced worksheet,it can apply to a cell.It will render the cell same as the tempalte and fill data different.If the param row,col, rowCount, colCount not set , it will use the whole sheet as the range scope.
 * @extends GC.Spread.Sheets.CellTypes.Base
 * @param {GC.Spread.Sheets.Worksheet} sheet  the referenced worksheet, the sheet could be an individual sheet outside the workbook.
 * @param {number} [row] the template scope start row.
 * @param {number} [col] the template scope start col.
 * @param {number} [rowCount] the template scope row count.
 * @param {number} [colCount] the template scope col count.
 */

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:

    var templateSheet = new GC.Spread.Sheets.Worksheet();
    templateSheet.setRowCount(12);
    templateSheet.setColumnCount(11);
    var cellType = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);
    sheet.setCellType(3, 2, cellType, GC.Spread.Sheets.SheetArea.viewport);

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.

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.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function bindEvent(renderSheet, templateSheet) { document.getElementById("update").onclick = function () { var celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet); renderSheet.setCellType(-1, 0, celltype); }; } function initSpread(spread) { var renderSheet = spread.getActiveSheet(); var templateSheet = new GC.Spread.Sheets.Worksheet(); templateSheet.fromJSON(templatesheetjson); spread.addSheet(1,templateSheet); templateSheet.setFormatter(2,2,"=IMAGE(@)"); bindEvent(renderSheet, templateSheet); renderSheet.suspendPaint(); var celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet); renderSheet.autoGenerateColumns = false; renderSheet.setDataSource(data); var 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(); }
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></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> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <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"/> </div> </div> </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; }