To create a button cell, follow this example:
You can customize your Button using the many provided APIs. If you want to control the button's position in the cell, use the following methods.
marginTop: Gets or sets the button's top margin in pixels relative to the cell.
marginRight: Gets or sets the button's right margin in pixels relative to the cell.
marginBottom: Gets or sets the button's bottom margin in pixels relative to the cell.
marginLeft: Gets or sets the button's left margin in pixels relative to the cell.
You can use the text method to get and set the button's content. Use the buttonBackColor method to get and set the button's background color. 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 GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const spreadNS = GC.Spread.Sheets;
let sheet = null;
export function AppFunc() {
const [buttonCellTypeOption, setButtonCellTypeOption] = React.useState({
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
text: '',
buttonBackColor: '',
disabled: false
});
const initSpread = (spread) => {
sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(1, 120);
sheet.setRowHeight(1, 50);
var b0 = new spreadNS.CellTypes.Button();
b0.text("Margin");
b0.marginLeft(15);
b0.marginTop(7);
b0.marginRight(15);
b0.marginBottom(7);
sheet.setCellType(1, 2, b0, spreadNS.SheetArea.viewport);
sheet.setValue(1, 1, "ButtonCellType");
sheet.resumePaint();
sheet.bind(spreadNS.Events.SelectionChanged, () => {
updateProperty(null, false);
});
}
const updateProperty = (e, settings) => {
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const buttonCellType = sheet.getCellType(sel.row, sel.col);
if (!(buttonCellType instanceof spreadNS.CellTypes.Button)) {
setButtonCellTypeOption({...buttonCellTypeOption, disabled: true});
return;
}
if (!settings) {
setButtonCellTypeOption({
disabled: false,
marginLeft: buttonCellType.marginLeft(),
marginRight: buttonCellType.marginRight(),
marginTop: buttonCellType.marginTop(),
marginBottom: buttonCellType.marginBottom(),
text: buttonCellType.text(),
buttonBackColor: buttonCellType.buttonBackColor()
});
} else {
buttonCellType.marginLeft(settings.marginLeft);
buttonCellType.marginTop(settings.marginTop);
buttonCellType.marginRight(settings.marginRight);
buttonCellType.marginBottom(settings.marginBottom);
buttonCellType.text(settings.text);
buttonCellType.buttonBackColor(settings.buttonBackColor);
}
}
sheet.repaint();
}
const getActualRange = (range, maxRowCount, maxColCount) => {
const row = range.row < 0 ? 0 : range.row;
const col = range.col < 0 ? 0 : range.col;
const rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
const colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
<Worksheet />
</SpreadSheets>
</div>
<Panel updateProperty={updateProperty} setting={buttonCellTypeOption} />
</div>);
}
function Panel(props) {
const [setting, setSetting] = React.useState(props.setting);
React.useEffect(() => {
setSetting(props.setting);
}, [props.setting]);
return (
<div class="options-container">
<label>Select the button cell in Spread and edit its options with these text boxes.</label>
<div class="option-row">
<label for="txtButtonCellMarginLeft">margin-left:</label>
<input id="txtButtonCellMarginLeft" value={setting.marginLeft} onChange={(e) => { setSetting({ ...setting, marginLeft: Number(e.target.value) }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellMarginTop">margin-top:</label>
<input id="txtButtonCellMarginTop" value={setting.marginTop} onChange={(e) => { setSetting({ ...setting, marginTop: Number(e.target.value) }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellMarginRight">margin-right:</label>
<input id="txtButtonCellMarginRight" value={setting.marginRight} onChange={(e) => { setSetting({ ...setting, marginRight: Number(e.target.value) }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellMarginBottom">margin-bottom:</label>
<input id="txtButtonCellMarginBottom" value={setting.marginBottom} onChange={(e) => { setSetting({ ...setting, marginBottom: Number(e.target.value) }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellText">text:</label>
<input id="txtButtonCellText" value={setting.text} onChange={(e) => { setSetting({ ...setting, text: e.target.value }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellBackColor">backColor:</label>
<input id="txtButtonCellBackColor" value={setting.buttonBackColor} onChange={(e) => { setSetting({ ...setting, buttonBackColor: e.target.value }); }}/>
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update Properties" disabled={setting.disabled} onClick={(e) => {props.updateProperty(e, setting)} } />
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const spreadNS = GC.Spread.Sheets;
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.sheet = null;
this.state = {
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
text: '',
buttonBackColor: '',
disabled: false
}
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet />
</SpreadSheets>
</div>
<Panel updateProperty={(e, settings) => {this.updateProperty(e, settings)}} setting={this.state} />
</div>);
}
initSpread(spread) {
const sheet = spread.getSheet(0);
this.sheet = sheet;
sheet.suspendPaint();
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(1, 120);
sheet.setRowHeight(1, 50);
var b0 = new spreadNS.CellTypes.Button();
b0.text("Margin");
b0.marginLeft(15);
b0.marginTop(7);
b0.marginRight(15);
b0.marginBottom(7);
sheet.setCellType(1, 2, b0, spreadNS.SheetArea.viewport);
sheet.setValue(1, 1, "ButtonCellType");
sheet.resumePaint();
sheet.bind(spreadNS.Events.SelectionChanged, () => {
this.updateProperty(null, false);
});
}
updateProperty(e, settings) {
const sheet = this.sheet;
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const buttonCellType = sheet.getCellType(sel.row, sel.col);
if (!(buttonCellType instanceof spreadNS.CellTypes.Button)) {
this.disabled = true;
return;
}
if (!settings) {
this.setState({
disabled: false,
marginLeft: buttonCellType.marginLeft(),
marginRight: buttonCellType.marginRight(),
marginTop: buttonCellType.marginTop(),
marginBottom: buttonCellType.marginBottom(),
text: buttonCellType.text(),
buttonBackColor: buttonCellType.buttonBackColor()
})
} else {
buttonCellType.marginLeft(settings.marginLeft);
buttonCellType.marginTop(settings.marginTop);
buttonCellType.marginRight(settings.marginRight);
buttonCellType.marginBottom(settings.marginBottom);
buttonCellType.text(settings.text);
buttonCellType.buttonBackColor(settings.buttonBackColor);
}
}
sheet.repaint();
}
getActualRange(range, maxRowCount, maxColCount) {
const row = range.row < 0 ? 0 : range.row;
const col = range.col < 0 ? 0 : range.col;
const rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
const colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
}
class Panel extends Component {
constructor(props) {
super(props);
this.state = this.props.setting;
}
componentWillReceiveProps(nextProps) {
this.setState(nextProps.setting);
}
render() {
return (
<div class="options-container">
<label>Select the button cell in Spread and edit its options with these text boxes.</label>
<div class="option-row">
<label for="txtButtonCellMarginLeft">margin-left:</label>
<input id="txtButtonCellMarginLeft" value={this.state.marginLeft} onChange={(e) => { this.setState({ marginLeft: Number(e.target.value) }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellMarginTop">margin-top:</label>
<input id="txtButtonCellMarginTop" value={this.state.marginTop} onChange={(e) => { this.setState({ marginTop: Number(e.target.value) }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellMarginRight">margin-right:</label>
<input id="txtButtonCellMarginRight" value={this.state.marginRight} onChange={(e) => { this.setState({ marginRight: Number(e.target.value) }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellMarginBottom">margin-bottom:</label>
<input id="txtButtonCellMarginBottom" value={this.state.marginBottom} onChange={(e) => { this.setState({ marginBottom: Number(e.target.value) }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellText">text:</label>
<input id="txtButtonCellText" value={this.state.text} onChange={(e) => { this.setState({ text: e.target.value }); }}/>
</div>
<div class="option-row">
<label for="txtButtonCellBackColor">backColor:</label>
<input id="txtButtonCellBackColor" value={this.state.buttonBackColor} onChange={(e) => { this.setState({ buttonBackColor: e.target.value }); }}/>
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update Properties" disabled={this.state.disabled} onClick={(e) => {this.props.updateProperty(e, this.state)} } />
</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">
<!-- 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;
}
.sample-options{
z-index: 1000;
}
.option {
padding-bottom: 6px;
}
.checkbox {
padding-right: 12px;
display: inline-block;
}
label {
display: inline-block;
min-width: 100px;
}
input, select {
width: 100%;
padding: 4px 0;
margin-top: 4px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
padding: 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(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);
