Overview

SpreadJS provides cell types. It can support two-way binding (data changes in the view model are reflected in the view). Each cell type provides two modes: display mode and edit mode. These cell types allow you to customize the way that specific cells behave, and gives you control over the different types of input that you might want for your application.

To set the cell type, first create a cellType object, then use the setCellType method to set the cellType for the sheet, cell, column, or row. For example: Sometimes you can use the cellType with data binding by binding a cellType to a column. For example: After you set the cell type you can use the getCellType method to get the cell type. If you want to remove the cell type, set the value to null or undefined. SpreadJS provides an event (ButtonClicked) on the spreadsheet. The event occurs when you click a button, check box, or hyperlink in a cell. For example:
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { SpreadSheets, Worksheet} from '@grapecity/spread-sheets-react'; import GC from '@grapecity/spread-sheets'; import './styles.css'; import { getData } from './data'; const Component = React.Component; function _getElementById(id) { return document.getElementById(id); } class App extends Component { constructor(props) { super(props); this.spread = null; this.state = { message: '' }; this.data = getData(); this.autoGenerateColumns = false; } render() { return (<div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> <Worksheet></Worksheet> <Worksheet dataSource={this.data} autoGenerateColumns={this.autoGenerateColumns}></Worksheet> </SpreadSheets> </div> <Panel panelinfo={this.state.message} /> </div>); } initSpread(spread) { const GCsheets = GC.Spread.Sheets; const sheet = spread.getSheet(0); spread.bind(GCsheets.Events.ButtonClicked, (e, args) => { const { sheet, row, col } = args; const cellType = sheet.getCellType(row, col); if (cellType instanceof GCsheets.CellTypes.Button) { this.setState((state) => ({ message: state.message + "You click a button.\n" })); } if (cellType instanceof GCsheets.CellTypes.CheckBox) { this.setState((state) => ({ message: state.message + "You click a check box.\n" })); } if (cellType instanceof GCsheets.CellTypes.HyperLink) { this.setState((state) => ({ message: state.message + "You click a hyperlink.\n" })); } }); spread.bind(GCsheets.Events.CellClick, (e, args) => { const { sheet, row, col } = args; var cellType = sheet.getCellType(row, col); if (cellType instanceof GCsheets.CellTypes.ComboBox) { this.setState((state) => ({ message: state.message + "You click a combo box.\n" })); } }); sheet.suspendPaint(); sheet.name('Basic Usage'); sheet.setColumnWidth(2, 140); sheet.setColumnWidth(1, 120); sheet.setRowHeight(1, 50); const b0 = new GCsheets.CellTypes.Button(); b0.text("Margin"); b0.marginLeft(15); b0.marginTop(7); b0.marginRight(15); b0.marginBottom(7); sheet.setCellType(1, 2, b0, GCsheets.SheetArea.viewport); sheet.setValue(1, 1, "ButtonCellType"); const c = new GCsheets.CellTypes.CheckBox(); c.isThreeState(false); c.textTrue("Checked!"); c.textFalse("Check Me!"); sheet.setCellType(2, 2, c, GCsheets.SheetArea.viewport); sheet.setValue(2, 1, "CheckBoxCellType"); const combo = new GCsheets.CellTypes.ComboBox(); combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]); combo.editorValueType(GCsheets.CellTypes.EditorValueType.text); sheet.getCell(3, 2, GCsheets.SheetArea.viewport).cellType(combo).value("Grape"); sheet.setValue(3, 1, "ComboBoxCellType"); const h = new GCsheets.CellTypes.HyperLink(); h.text("SpreadJS Overview"); sheet.setCellType(4, 2, h, GCsheets.SheetArea.viewport); sheet.getCell(4, 2, GCsheets.SheetArea.viewport).value("http://www.grapecity.com/en/spreadjs/").hAlign(GCsheets.HorizontalAlign.center); sheet.setValue(4, 1, "HyperLinkCellType"); sheet.resumePaint(); const sheet1 = spread.getSheet(1); sheet1.name('DataBind'); sheet1.suspendPaint(); const _lines = ["Computers", "Washers", "Stoves"]; const _colors = ["Red", "Green", "Blue", "White"]; const _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"]; const lineCellType = new GCsheets.CellTypes.ComboBox(); lineCellType.items(_lines); const colorCellType = new GCsheets.CellTypes.ComboBox(); colorCellType.items(_colors); const checkBoxCellType = new GCsheets.CellTypes.CheckBox(); const ratingCellType = new GCsheets.CellTypes.ComboBox(); ratingCellType.items(_ratings); const colInfos = [ { name: "name", size: 100 }, { name: "line", cellType: lineCellType, size: 80 }, { name: "color", cellType: colorCellType }, { name: "discontinued", cellType: checkBoxCellType, size: 80 }, { name: "rating", cellType: ratingCellType } ]; sheet1.bindColumns(colInfos); sheet1.resumePaint(); } } class Panel extends Component { constructor(props) { super(props); } render() { return ( <div class="options-container"> This text box will display information about the different cell types that are interacted with. <textarea style={{ width: "100%", height: "90px" }} value={this.props.panelinfo}></textarea> </div> ) } } ReactDOM.render(<App />, _getElementById('app'));
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- 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"></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; } textarea { width: 100%; height: 80px; padding: 6px 12px; box-sizing: border-box; } .sample-options { z-index: 1000; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; }
export function getData() { return [ { name: "Stoves S0", line: "Washers", color: "Green", discontinued: true, rating: "Average" }, { name: "Computers C1", line: "Washers", color: "Green", discontinued: true, rating: "Average" }, { name: "Washers W3", line: "Washers", color: "Green", discontinued: true, rating: "Average" } ] }
(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: { '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-react': 'npm:@grapecity/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);