Skip to main content Skip to footer

SpreadJS Cell Binding Template

You can use the SpreadJS designer to create a binding relation to the data with a template. This saves time by reducing the amount of coding. The Template option in the designer is used to design the cell binding template. The Template option is located under the Data tab. Use the template to create field nodes that match the actual data fields. You can also set cell types for the data (Home tab and CellType option). Use the AutoGenerateLabel option to automatically create the binding path label. Select the green plus symbol to add a field node. Then type the field name (for example, name). You can specify a field option such as CheckBox using the drop-down arrow. Field List for adding nodes Field List for adding nodes The following image illustrates the Template option in the SpreadJS designer. SpreadJSbindingtemplate SpreadJS Designer Drag the nodes to the cell area to generate the layout. You can also use the CellType option to change the cell settings (such as removing a caption from the check box cell). SpreadJSbindingtemplate2 SpreadJS Designer with Layout SpreadJSbindingtemplate1 SpreadJS Completed Layout Save to a SpreadJS designer file (ssjson) if you wish to redesign the template later. Save to a js file to use in an HTML page. The JSON object is saved as a variable field. The field name is the same as the file name. Use the Export option under the File tab to save to a SSJSON or Javascript file. SpreadJSbindingtemplate4 Save Options Add code to the page that references the js file. Add code similar to the following: JavaScript

<!DOCTYPE html>  
<title>SpreadJS Binding</title>  
<link type="text/css" href="./css/gcspread.sheets.8.40.20151.0.css" rel="stylesheet" />   
<script src="" type="text/javascript"></script>  
<script type="text/javascript" src="./scripts/gcspread.sheets.all.8.40.20151.0.min.js"></script>  

<script type="text/javascript" src="binding.js"></script>  

<script type="text/javascript">    

        $(document).ready(function () {         
var spread = new GcSpread.Sheets.Spread($("#ss")[0],{sheetCount:3});  
var data = { name: "bob", age: 20, gender: "Male", email: "", married: true }; // customer's data source.  
spread.fromJSON(binding); //Use fromJSON method to load the template, here template variable field is defined in binding.js.  
var sheet = spread.getActiveSheet();  
sheet.setDataSource(new GcSpread.Sheets.CellBindingSource(data)); //setDataSource with CellBindingSource.  
<div id="ss" style="width: 600px; height: 250px; border: 1px solid gray">  

The completed sample appears as follows: SpreadJSbindingcomplete Completed Sample in Browser


comments powered by Disqus