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 './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 { useState } from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
import { getData } from './data';
const Component = React.Component;
let myMessage = "";
const GCsheets = GC.Spread.Sheets;
export function AppFunc() {
const [message, setMessage] = useState(myMessage);
const data = getData();
const autoGenerateColumns = false;
let initSpread = function (spread) {
const sheet = spread.getSheet(0);
bindEvent(spread, setMessage);
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://developer.mescius.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);
sheet1.setDataSource(data);
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();
}
return (<div class="sample-tutorial" >
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet></Worksheet>
<Worksheet autoGenerateColumns={autoGenerateColumns}></Worksheet>
</SpreadSheets>
</div>
<Panel panelInfo={message} />
</div>);
}
const bindEvent = (spread, ...fns) => {
const [setMessage] = fns;
spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (event, args) {
const { sheet, row, col } = args;
const cellType = sheet.getCellType(row, col);
if (cellType instanceof GCsheets.CellTypes.Button) {
myMessage += "You click a button.\n"
}
if (cellType instanceof GCsheets.CellTypes.CheckBox) {
myMessage += "You click a check box.\n"
}
if (cellType instanceof GCsheets.CellTypes.HyperLink) {
myMessage += "You click a hyperlink.\n";
}
setMessage(myMessage);
});
spread.bind(GCsheets.Events.CellClick, (e, args) => {
const { sheet, row, col } = args;
var cellType = sheet.getCellType(row, col);
if (cellType instanceof GCsheets.CellTypes.ComboBox) {
myMessage += "You click a combo box.\n";
}
setMessage(myMessage);
});
}
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>
)
}
}
import * as React from 'react';
import { SpreadSheets, Worksheet} from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
import { getData } from './data';
const Component = React.Component;
export 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://developer.mescius.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>
)
}
}
<!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">
<!-- 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: {
'@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);
