To create a check box cell, follow this example:
The CheckBox can support a three-state check box. You can use the isThreeState method to get and set whether the check box supports three states. For example:
The three states are true, false, or indeterminate. Every state has its own text; you can use the textTrue, textFalse, and textIndeterminate methods to get and set these states' text. For example:
You can use the caption method to get and set the caption of the check box cell. Use the textAlign method to get and set the text alignment relative to the check box. The setting is a CheckBoxTextAlign enumeration value.
top: Text is on top of the check box.
bottom: Text is below the check box.
left: Text is to the left of the check box.
right: Text is to the right of the check box.
inside: Text is to the inside of the check box. This enumeration value takes effect only when mode is set to toggle.
You can use the boxSize method to get and set checkbox size. You can set number or "auto" to cellType.
When the cell style "wordWrap” is set to true and the cell width is not enough for the text, the text will display wrapped.
You can use the mode method to get and set checkbox mode. You can set "checkbox" or "toggle" to cellType.
You can use the toggleOptions method to get and set the toggle options of a checkbox. Please refer to GC.Spread.Sheets.CellTypes.IToggleOptions for parameter types.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<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 spread = null;
export function AppFunc() {
const [checkboxCellTypeOption, setCheckboxCellTypeOption] = React.useState({
hasCaption: null,
disabled: false,
caption: '',
textTrue: 'textTrue',
textIndeterminate: 'textIndeterminate',
textFalse: 'textFalse',
textAlign: 'top',
isThreeState: true,
boxSize: 12,
mode: 'checkbox',
width: 40,
height: 20,
sliderMargin: 2,
sliderRadius: null,
trackRadius: null,
trackColorOn: '#8cbae8',
trackColorOff: '#9e9e9e',
sliderColorOn: '#1565c0',
sliderColorOff: '#ffffff',
animationDuration: 200,
autoSize: false,
});
const initCellStyle = (fontSize, foreColor) => {
const style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = `bold ${fontSize}pt Calibri`;
style.foreColor = foreColor;
return style;
}
const propertyChange = (e, settings) => {
const sheet = spread.getActiveSheet();
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const checkboxCellType = sheet.getCellType(sel.row, sel.col);
if (!(checkboxCellType instanceof spreadNS.CellTypes.CheckBox)) {
setCheckboxCellTypeOption({ ...checkboxCellTypeOption, disabled: true });
return;
}
const checkboxMode = checkboxCellType.mode();
if (!settings) {
if (checkboxMode === 'toggle') {
setCheckboxCellTypeOption({
mode: 'toggle',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textTrue: checkboxCellType.textTrue(),
textFalse: checkboxCellType.textFalse(),
textAlign: checkboxCellType.textAlign(),
...checkboxCellType.toggleOptions(),
});
} else {
setCheckboxCellTypeOption({
mode: 'checkbox',
disabled: false,
hasCaption: checkboxCellType.caption() ? true : false,
caption: checkboxCellType.caption(),
textTrue: checkboxCellType.textTrue(),
textIndeterminate: checkboxCellType.textIndeterminate(),
textFalse: checkboxCellType.textFalse(),
textAlign: checkboxCellType.textAlign(),
isThreeState: checkboxCellType.isThreeState(),
boxSize: checkboxCellType.boxSize(),
...checkboxCellType.toggleOptions(),
});
}
} else {
if (checkboxMode === 'checkbox') {
checkboxCellType.caption(settings.caption);
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textIndeterminate(settings.textIndeterminate);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.textAlign(Number(settings.textAlign));
checkboxCellType.isThreeState(settings.isThreeState);
var boxSizeValue = settings.boxSize;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.textAlign(Number(settings.textAlign));
checkboxCellType.toggleOptions({
width: settings.width - 0,
height: settings.height - 0,
sliderMargin: settings.sliderMargin - 0,
sliderRadius: settings.sliderRadius === '' ? null : (settings.sliderRadius - 0),
trackRadius: settings.trackRadius === '' ? null : (settings.trackRadius - 0),
sliderColorOn: settings.sliderColorOn,
sliderColorOff: settings.sliderColorOff,
trackColorOn: settings.trackColorOn,
trackColorOff: settings.trackColorOff,
animationDuration: settings.animationDuration - 0,
autoSize: settings.autoSize,
});
}
}
}
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);
}
const initSpread = (currSpread) => {
spread = currSpread;
initToggleSheet(spread);
initCheckboxSheet(spread);
}
const initToggleSheet = () => {
var sheet1 = spread.getSheet(0);
sheet1.name("Toggle");
sheet1.defaults.colWidth = 190;
sheet1.defaults.rowHeight = 60;
sheet1.suspendPaint();
sheet1.bind(spreadNS.Events.SelectionChanged, function() {
propertyChange(spread, false);
});
sheet1.setColumnWidth(0, 110);
sheet1.setColumnWidth(1, 190);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 110);
sheet1.setColumnWidth(4, 190);
sheet1.setColumnWidth(5, 130);
sheet1.setColumnWidth(6, 130);
sheet1.setColumnWidth(7, 130);
sheet1.setColumnWidth(8, 130);
sheet1.setColumnWidth(9, 130);
for (let i = 0; i < 7; i++) {
sheet1.setRowHeight(i, 60);
}
sheet1.addSpan(0, 0, 7, 1);
sheet1.setValue(0, 0, "Toggle Mode");
sheet1.setStyle(0, 0, initCellStyle(11, "Accent 2"));
sheet1.setStyle(0, 1, initCellStyle(11, "#000"));
sheet1.setStyle(1, 1, initCellStyle(11, "#000"));
sheet1.setStyle(2, 1, initCellStyle(11, "#000"));
sheet1.setStyle(3, 1, initCellStyle(11, "#000"));
sheet1.setStyle(4, 1, initCellStyle(11, "#000"));
sheet1.setStyle(5, 1, initCellStyle(11, "#000"));
sheet1.setStyle(6, 1, initCellStyle(11, "#000"));
sheet1.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 7; i++) {
for (let j = 1; j < 8; j++) {
sheet1.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
var toggleOptions = {
width: 30,
height: 15,
trackColorOn: '#4CAF50',
trackColorOff: '#bfbfbf',
sliderColorOn: '#ffffff',
sliderColorOff: '#ffffff',
animationDuration: 200,
};
sheet1.setValue(0, 1, "Custom Size");
var toggleCustomSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType1.mode('toggle');
toggleCustomSizeCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(0, 2, toggleCustomSizeCellType1);
var toggleCustomSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType2.mode('toggle');
toggleCustomSizeCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
});
sheet1.setCellType(0, 3, toggleCustomSizeCellType2);
var toggleCustomSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType3.mode('toggle');
toggleCustomSizeCellType3.toggleOptions({
...toggleOptions,
width: 60,
height: 30,
});
sheet1.setCellType(0, 4, toggleCustomSizeCellType3);
sheet1.setValue(1, 1, "Auto Size");
sheet1.comments.add(1, 1, 'After enabling the Auto Size option, the button size will be dynamically adjusted according to the text.');
var comment = sheet1.comments.get(1, 1);
comment.indicatorSize(8);
comment.indicatorColor('blue');
var toggleAutoSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType1.mode('toggle');
toggleAutoSizeCellType1.caption("Auto");
toggleAutoSizeCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType1.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 2, toggleAutoSizeCellType1);
sheet1.getStyle(1, 2).fontSize = '8pt';
var toggleAutoSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType2.mode('toggle');
toggleAutoSizeCellType2.caption("Auto");
toggleAutoSizeCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType2.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 3, toggleAutoSizeCellType2);
sheet1.getStyle(1, 3).fontSize = '12pt';
var toggleAutoSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType3.mode('toggle');
toggleAutoSizeCellType3.caption("Auto");
toggleAutoSizeCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType3.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 4, toggleAutoSizeCellType3);
sheet1.getStyle(1, 4).fontSize = '16pt';
sheet1.setValue(2, 1, "Custom Colors");
var toggleCustomColorsCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomColorsCellType1.mode('toggle');
toggleCustomColorsCellType1.textTrue("On");
toggleCustomColorsCellType1.textFalse("Off");
toggleCustomColorsCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleCustomColorsCellType1.toggleOptions({
trackColorOn: "Accent 1 60",
trackColorOff: "Background 1 -15",
sliderColorOn: "Accent 1",
sliderColorOff: "Background 1",
animationDuration: 500,
autoSize: true
});
sheet1.setCellType(2, 2, toggleCustomColorsCellType1);
sheet1.setValue(3, 1, "Text Align");
var toggleTextAlignCellType1 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType1.mode('toggle');
toggleTextAlignCellType1.caption("Top");
toggleTextAlignCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.top);
toggleTextAlignCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(3, 2, toggleTextAlignCellType1);
var toggleTextAlignCellType2 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType2.mode('toggle');
toggleTextAlignCellType2.caption("Bottom");
toggleTextAlignCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
toggleTextAlignCellType2.toggleOptions(toggleOptions);
sheet1.setCellType(3, 3, toggleTextAlignCellType2);
var toggleTextAlignCellType3 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType3.mode('toggle');
toggleTextAlignCellType3.caption("Left");
toggleTextAlignCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
toggleTextAlignCellType3.toggleOptions(toggleOptions);
sheet1.setCellType(3, 4, toggleTextAlignCellType3);
var toggleTextAlignCellType4 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType4.mode('toggle');
toggleTextAlignCellType4.caption("Right");
toggleTextAlignCellType4.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
toggleTextAlignCellType4.toggleOptions(toggleOptions);
sheet1.setCellType(3, 5, toggleTextAlignCellType4);
var toggleTextAlignCellType5 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType5.mode('toggle');
toggleTextAlignCellType5.caption("Inside");
toggleTextAlignCellType5.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleTextAlignCellType5.toggleOptions({
...toggleOptions,
width: 70,
height: 20,
});
sheet1.setCellType(3, 6, toggleTextAlignCellType5);
sheet1.setValue(4, 1, "Slider Margin");
var toggleSliderMarginCellType1 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType1.mode('toggle');
toggleSliderMarginCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 2,
});
sheet1.setCellType(4, 2, toggleSliderMarginCellType1);
var toggleSliderMarginCellType2 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType2.mode('toggle');
toggleSliderMarginCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
});
sheet1.setCellType(4, 3, toggleSliderMarginCellType2);
var toggleSliderMarginCellType3 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType3.mode('toggle');
toggleSliderMarginCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 6,
});
sheet1.setCellType(4, 4, toggleSliderMarginCellType3);
sheet1.setValue(5, 1, "Border Radius");
var toggleBorderRadiusCellType1 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType1.mode('toggle');
toggleBorderRadiusCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 0,
});
sheet1.setCellType(5, 2, toggleBorderRadiusCellType1);
var toggleBorderRadiusCellType2 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType2.mode('toggle');
toggleBorderRadiusCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 12,
});
sheet1.setCellType(5, 3, toggleBorderRadiusCellType2);
var toggleBorderRadiusCellType3 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType3.mode('toggle');
toggleBorderRadiusCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
trackRadius: 15,
sliderRadius: 0,
});
sheet1.setCellType(5, 4, toggleBorderRadiusCellType3);
var toggleBorderRadiusCellType4 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType4.mode('toggle');
toggleBorderRadiusCellType4.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 8,
sliderRadius: 6,
});
sheet1.setCellType(5, 5, toggleBorderRadiusCellType4);
var toggleBorderRadiusCellType5 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType5.mode('toggle');
toggleBorderRadiusCellType5.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: null,
sliderRadius: null,
});
sheet1.setCellType(5, 6, toggleBorderRadiusCellType5);
sheet1.setValue(6, 1, "Animation Duration");
var toggleAnimationDurationCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType1.mode('toggle');
toggleAnimationDurationCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 100,
});
sheet1.setCellType(6, 2, toggleAnimationDurationCellType1);
var toggleAnimationDurationCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType2.mode('toggle');
toggleAnimationDurationCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 300,
});
sheet1.setCellType(6, 3, toggleAnimationDurationCellType2);
var toggleAnimationDurationCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType3.mode('toggle');
toggleAnimationDurationCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 500,
});
sheet1.setCellType(6, 4, toggleAnimationDurationCellType3);
sheet1.resumePaint();
}
const initCheckboxSheet = () => {
var sheet2 = spread.getSheet(1);
sheet2.name("Checkbox");
sheet2.defaults.colWidth = 190;
sheet2.defaults.rowHeight = 60;
sheet2.suspendPaint();
sheet2.bind(spreadNS.Events.SelectionChanged, function() {
propertyChange(spread, false);
});
sheet2.setColumnWidth(0, 110);
sheet2.setColumnWidth(1, 190);
sheet2.setColumnWidth(2, 130);
for (let i = 0; i < 4; i++) {
sheet2.setRowHeight(i, 60);
}
sheet2.addSpan(0, 0, 4, 1);
sheet2.setValue(0, 0, "Checkbox Mode");
sheet2.setStyle(0, 0, initCellStyle(11, "Accent 1"));
sheet2.setStyle(0, 1, initCellStyle(11, "Accent 6"));
sheet2.setStyle(1, 1, initCellStyle(11, "#FF0000"));
sheet2.setStyle(2, 1, initCellStyle(11, "Accent 5"));
sheet2.setStyle(3, 1, initCellStyle(11, "Accent 4"));
sheet2.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 4; i++) {
for (let j = 1; j < 4; j++) {
sheet2.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
sheet2.setValue(0, 1, "caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.caption("Caption");
sheet2.setCellType(0, 2, captionCellType);
sheet2.setValue(1, 1, "threeState");
var threeStateCellType = new spreadNS.CellTypes.CheckBox();
threeStateCellType.isThreeState(false);
threeStateCellType.textTrue("Checked!");
threeStateCellType.textFalse("Check Me!");
sheet2.setCellType(1, 2, threeStateCellType);
sheet2.setValue(2, 1, "textAlign");
var textAlignCellType = new spreadNS.CellTypes.CheckBox();
textAlignCellType.isThreeState(false);
textAlignCellType.caption("textAlign");
textAlignCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 2, textAlignCellType);
sheet2.setValue(3, 1, "text wrap");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.caption("This is a long long text");
sheet2.setCellType(3, 2, textWrapCellType);
sheet2.getCell(3, 2).wordWrap(true);
sheet2.resumePaint();
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
<Worksheet />
<Worksheet />
</SpreadSheets>
</div>
<Panel propertyChange={propertyChange} setting={checkboxCellTypeOption} />
</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 check box cell in Spread and edit its options with these text boxes.</label>
<div class="checkbox-options" style={{display: setting.mode === 'checkbox' ? 'block' : 'none'}}>
<div class="option-row" style={{display: setting.hasCaption === null || setting.hasCaption ? 'block' : 'none'}}>
<label for="caption">caption:</label>
<input id="caption" type="text" value={setting.caption} onChange={(e) => { setSetting({ ...setting, caption: e.target.value }); }} />
</div>
<div class="option-row" style={{display: setting.hasCaption === null || !setting.hasCaption ? 'block' : 'none'}}>
<label for="textTrue">textTrue:</label>
<input id="textTrue" type="text" value={setting.textTrue} onChange={(e) => { setSetting({ ...setting, textTrue: e.target.value }); }} />
</div>
<div class="option-row" style={{display: setting.hasCaption === null || !setting.hasCaption ? 'block' : 'none'}}>
<label for="textIndeterminate">textIndeterminate(for 3-state option):</label>
<input id="textIndeterminate" type="text" value={setting.textIndeterminate} onChange={(e) => { setSetting({ ...setting, textIndeterminate: e.target.value }); }} />
</div>
<div class="option-row" style={{display: setting.hasCaption === null || !setting.hasCaption ? 'block' : 'none'}}>
<label for="textFalse">textFalse:</label>
<input id="textFalse" type="text" value={setting.textFalse} onChange={(e) => { setSetting({ ...setting, textFalse: e.target.value }); }} />
</div>
<div class="option-row" style={{display: setting.hasCaption === null || !setting.hasCaption ? 'block' : 'none'}}>
<label>boxSize</label>
<input id="boxSize" type="text" min="1" onChange={(e) => { setSetting({ ...setting, boxSize: e.target.value }) }}></input>
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="textAlign" value={setting.textAlign} onChange={(e) => { setSetting({ ...setting, textAlign: e.target.value }); }}>
<option value="0">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
</select>
</div>
<div class="option-row" style={{display: setting.hasCaption === null || !setting.hasCaption ? 'block' : 'none'}}>
<input id="isThreeState" type="checkbox" checked={setting.isThreeState} onChange={(e) => { setSetting({ ...setting, isThreeState: e.target.checked }); }} />
<label for="isThreeState">isThreeState:</label>
</div>
</div>
<div class="toggle-options" style={{display: setting.mode === 'toggle' ? 'block' : 'none'}}>
<div class="option-row">
<label>caption:</label>
<input type="text" id="toggleCheckBoxCellTextCaption" value={setting.caption} onChange={(e) => { setSetting({ ...setting, caption: e.target.value }); }} />
</div>
<div class="option-row">
<label>textTrue:</label>
<input type="text" id="toggleCheckBoxCellTextTrue" value={setting.textTrue} onChange={(e) => { setSetting({ ...setting, textTrue: e.target.value }); }} />
</div>
<div class="option-row">
<label>textFalse:</label>
<input type="text" id="toggleCheckBoxCellTextFalse" value={setting.textFalse} onChange={(e) => { setSetting({ ...setting, textFalse: e.target.value }); }} />
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="selToggleCheckBoxCellAlign" value={setting.textAlign} onChange={(e) => { setSetting({ ...setting, textAlign: e.target.value }); }}>
<option value="0" selected="selected">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
<option value="4">inside</option>
</select>
</div>
<div class="option-row">
<label class="toggle-checkbox-cell-auto-size">
<input type="checkbox" id="toggleCheckBoxCellAutoSize" checked={setting.autoSize} onChange={(e) => { setSetting({ ...setting, autoSize: e.target.checked }); }} />
autoSize
</label>
</div>
<div className={setting.autoSize ? 'option-row disabled' : 'option-row'}>
<label>width:</label>
<input type="text" id="toggleCheckBoxCellWidth" value={setting.width} onChange={(e) => { setSetting({ ...setting, width: e.target.value }); }} />
</div>
<div className={setting.autoSize ? 'option-row disabled' : 'option-row'}>
<label>height:</label>
<input type="text" id="toggleCheckBoxCellHeight" value={setting.height} onChange={(e) => { setSetting({ ...setting, height: e.target.value }); }} />
</div>
<div class="option-row">
<label>sliderMargin:</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" value={setting.sliderMargin} onChange={(e) => { setSetting({ ...setting, sliderMargin: e.target.value }); }} />
</div>
<div class="option-row">
<label>sliderRadius:</label>
<input type="text" id="toggleCheckBoxCellSliderRadius" value={setting.sliderRadius} onChange={(e) => { setSetting({ ...setting, sliderRadius: e.target.value }); }} />
</div>
<div class="option-row">
<label>trackRadius:</label>
<input type="text" id="toggleCheckBoxCellTrackRadius" value={setting.trackRadius} onChange={(e) => { setSetting({ ...setting, trackRadius: e.target.value }); }} />
</div>
<div class="option-row">
<label>sliderColorOn:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" value={setting.sliderColorOn} onChange={(e) => { setSetting({ ...setting, sliderColorOn: e.target.value }); }} />
</div>
<div class="option-row">
<label>sliderColorOff:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" value={setting.sliderColorOff} onChange={(e) => { setSetting({ ...setting, sliderColorOff: e.target.value }); }} />
</div>
<div class="option-row">
<label>trackColorOn:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" value={setting.trackColorOn} onChange={(e) => { setSetting({ ...setting, trackColorOn: e.target.value }); }} />
</div>
<div class="option-row">
<label>trackColorOff:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" value={setting.trackColorOff} onChange={(e) => { setSetting({ ...setting, trackColorOff: e.target.value }); }} />
</div>
<div class="option-row">
<label>animationDuration:</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" value={setting.animationDuration} onChange={(e) => { setSetting({ ...setting, animationDuration: e.target.value }); }} />
</div>
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update" disabled={setting.disabled} onClick={(e) => {props.propertyChange(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.spread = null;
this.state = {
hasCaption: null,
disabled: false,
caption: '',
textTrue: 'textTrue',
textIndeterminate: 'textIndeterminate',
textFalse: 'textFalse',
textAlign: 'top',
isThreeState: true,
boxSize: 12,
mode: 'checkbox',
width: 40,
height: 20,
sliderMargin: 2,
sliderRadius: null,
trackRadius: null,
trackColorOn: '#8cbae8',
trackColorOff: '#9e9e9e',
sliderColorOn: '#1565c0',
sliderColorOff: '#ffffff',
animationDuration: 200,
autoSize: false,
}
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet />
<Worksheet />
</SpreadSheets>
</div>
<Panel propertyChange={(e, settings) => {this.propertyChange(e, settings)}} setting={this.state} />
</div>);
}
initCellStyle(fontSize, foreColor) {
const style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = `bold ${fontSize}pt Calibri`;
style.foreColor = foreColor;
return style;
}
initSpread(spread) {
this.spread = spread;
this.initToggleSheet();
this.initCheckboxSheet();
}
propertyChange(e, settings) {
const sheet = this.spread.getActiveSheet();
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const checkboxCellType = sheet.getCellType(sel.row, sel.col);
if (!(checkboxCellType instanceof spreadNS.CellTypes.CheckBox)) {
this.setState({ disabled: true });
return;
}
const checkboxMode = checkboxCellType.mode();
if (!settings) {
if (checkboxMode === 'toggle') {
this.setState({
mode: 'toggle',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textTrue: checkboxCellType.textTrue(),
textFalse: checkboxCellType.textFalse(),
textAlign: checkboxCellType.textAlign(),
...checkboxCellType.toggleOptions(),
});
} else {
this.setState({
mode: 'checkbox',
disabled: false,
hasCaption: checkboxCellType.caption() ? true : false,
caption: checkboxCellType.caption(),
textTrue: checkboxCellType.textTrue(),
textIndeterminate: checkboxCellType.textIndeterminate(),
textFalse: checkboxCellType.textFalse(),
textAlign: checkboxCellType.textAlign(),
isThreeState: checkboxCellType.isThreeState(),
boxSize: checkboxCellType.boxSize(),
...checkboxCellType.toggleOptions(),
});
}
} else {
if (checkboxMode === 'checkbox') {
checkboxCellType.caption(settings.caption);
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textIndeterminate(settings.textIndeterminate);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.textAlign(Number(settings.textAlign));
checkboxCellType.isThreeState(settings.isThreeState);
var boxSizeValue = settings.boxSize;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.textAlign(Number(settings.textAlign));
checkboxCellType.toggleOptions({
width: settings.width - 0,
height: settings.height - 0,
sliderMargin: settings.sliderMargin - 0,
sliderRadius: settings.sliderRadius === '' ? null : (settings.sliderRadius - 0),
trackRadius: settings.trackRadius === '' ? null : (settings.trackRadius - 0),
sliderColorOn: settings.sliderColorOn,
sliderColorOff: settings.sliderColorOff,
trackColorOn: settings.trackColorOn,
trackColorOff: settings.trackColorOff,
animationDuration: settings.animationDuration - 0,
autoSize: settings.autoSize,
});
}
}
}
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);
}
initToggleSheet() {
var spread = this.spread;
var sheet1 = spread.getSheet(0);
sheet1.name("Toggle");
sheet1.defaults.colWidth = 190;
sheet1.defaults.rowHeight = 60;
sheet1.suspendPaint();
sheet1.bind(spreadNS.Events.SelectionChanged, () => {
this.propertyChange(spread, false);
});
sheet1.setColumnWidth(0, 110);
sheet1.setColumnWidth(1, 190);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 110);
sheet1.setColumnWidth(4, 190);
sheet1.setColumnWidth(5, 130);
sheet1.setColumnWidth(6, 130);
sheet1.setColumnWidth(7, 130);
sheet1.setColumnWidth(8, 130);
sheet1.setColumnWidth(9, 130);
for (let i = 0; i < 7; i++) {
sheet1.setRowHeight(i, 60);
}
sheet1.addSpan(0, 0, 7, 1);
sheet1.setValue(0, 0, "Toggle Mode");
sheet1.setStyle(0, 0, this.initCellStyle(11, "Accent 2"));
sheet1.setStyle(0, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(1, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(2, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(3, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(4, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(5, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(6, 1, this.initCellStyle(11, "#000"));
sheet1.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 7; i++) {
for (let j = 1; j < 8; j++) {
sheet1.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
var toggleOptions = {
width: 30,
height: 15,
trackColorOn: '#4CAF50',
trackColorOff: '#bfbfbf',
sliderColorOn: '#ffffff',
sliderColorOff: '#ffffff',
animationDuration: 200,
};
sheet1.setValue(0, 1, "Custom Size");
var toggleCustomSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType1.mode('toggle');
toggleCustomSizeCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(0, 2, toggleCustomSizeCellType1);
var toggleCustomSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType2.mode('toggle');
toggleCustomSizeCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
});
sheet1.setCellType(0, 3, toggleCustomSizeCellType2);
var toggleCustomSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType3.mode('toggle');
toggleCustomSizeCellType3.toggleOptions({
...toggleOptions,
width: 60,
height: 30,
});
sheet1.setCellType(0, 4, toggleCustomSizeCellType3);
sheet1.setValue(1, 1, "Auto Size");
sheet1.comments.add(1, 1, 'After enabling the Auto Size option, the button size will be dynamically adjusted according to the text.');
var comment = sheet1.comments.get(1, 1);
comment.indicatorSize(8);
comment.indicatorColor('blue');
var toggleAutoSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType1.mode('toggle');
toggleAutoSizeCellType1.caption("Auto");
toggleAutoSizeCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType1.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 2, toggleAutoSizeCellType1);
sheet1.getStyle(1, 2).fontSize = '8pt';
var toggleAutoSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType2.mode('toggle');
toggleAutoSizeCellType2.caption("Auto");
toggleAutoSizeCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType2.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 3, toggleAutoSizeCellType2);
sheet1.getStyle(1, 3).fontSize = '12pt';
var toggleAutoSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType3.mode('toggle');
toggleAutoSizeCellType3.caption("Auto");
toggleAutoSizeCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType3.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 4, toggleAutoSizeCellType3);
sheet1.getStyle(1, 4).fontSize = '16pt';
sheet1.setValue(2, 1, "Custom Colors");
var toggleCustomColorsCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomColorsCellType1.mode('toggle');
toggleCustomColorsCellType1.textTrue("On");
toggleCustomColorsCellType1.textFalse("Off");
toggleCustomColorsCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleCustomColorsCellType1.toggleOptions({
trackColorOn: "Accent 1 60",
trackColorOff: "Background 1 -15",
sliderColorOn: "Accent 1",
sliderColorOff: "Background 1",
animationDuration: 500,
autoSize: true
});
sheet1.setCellType(2, 2, toggleCustomColorsCellType1);
sheet1.setValue(3, 1, "Text Align");
var toggleTextAlignCellType1 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType1.mode('toggle');
toggleTextAlignCellType1.caption("Top");
toggleTextAlignCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.top);
toggleTextAlignCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(3, 2, toggleTextAlignCellType1);
var toggleTextAlignCellType2 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType2.mode('toggle');
toggleTextAlignCellType2.caption("Bottom");
toggleTextAlignCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
toggleTextAlignCellType2.toggleOptions(toggleOptions);
sheet1.setCellType(3, 3, toggleTextAlignCellType2);
var toggleTextAlignCellType3 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType3.mode('toggle');
toggleTextAlignCellType3.caption("Left");
toggleTextAlignCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
toggleTextAlignCellType3.toggleOptions(toggleOptions);
sheet1.setCellType(3, 4, toggleTextAlignCellType3);
var toggleTextAlignCellType4 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType4.mode('toggle');
toggleTextAlignCellType4.caption("Right");
toggleTextAlignCellType4.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
toggleTextAlignCellType4.toggleOptions(toggleOptions);
sheet1.setCellType(3, 5, toggleTextAlignCellType4);
var toggleTextAlignCellType5 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType5.mode('toggle');
toggleTextAlignCellType5.caption("Inside");
toggleTextAlignCellType5.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleTextAlignCellType5.toggleOptions({
...toggleOptions,
width: 70,
height: 20,
});
sheet1.setCellType(3, 6, toggleTextAlignCellType5);
sheet1.setValue(4, 1, "Slider Margin");
var toggleSliderMarginCellType1 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType1.mode('toggle');
toggleSliderMarginCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 2,
});
sheet1.setCellType(4, 2, toggleSliderMarginCellType1);
var toggleSliderMarginCellType2 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType2.mode('toggle');
toggleSliderMarginCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
});
sheet1.setCellType(4, 3, toggleSliderMarginCellType2);
var toggleSliderMarginCellType3 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType3.mode('toggle');
toggleSliderMarginCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 6,
});
sheet1.setCellType(4, 4, toggleSliderMarginCellType3);
sheet1.setValue(5, 1, "Border Radius");
var toggleBorderRadiusCellType1 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType1.mode('toggle');
toggleBorderRadiusCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 0,
});
sheet1.setCellType(5, 2, toggleBorderRadiusCellType1);
var toggleBorderRadiusCellType2 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType2.mode('toggle');
toggleBorderRadiusCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 12,
});
sheet1.setCellType(5, 3, toggleBorderRadiusCellType2);
var toggleBorderRadiusCellType3 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType3.mode('toggle');
toggleBorderRadiusCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
trackRadius: 15,
sliderRadius: 0,
});
sheet1.setCellType(5, 4, toggleBorderRadiusCellType3);
var toggleBorderRadiusCellType4 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType4.mode('toggle');
toggleBorderRadiusCellType4.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 8,
sliderRadius: 6,
});
sheet1.setCellType(5, 5, toggleBorderRadiusCellType4);
var toggleBorderRadiusCellType5 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType5.mode('toggle');
toggleBorderRadiusCellType5.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: null,
sliderRadius: null,
});
sheet1.setCellType(5, 6, toggleBorderRadiusCellType5);
sheet1.setValue(6, 1, "Animation Duration");
var toggleAnimationDurationCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType1.mode('toggle');
toggleAnimationDurationCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 100,
});
sheet1.setCellType(6, 2, toggleAnimationDurationCellType1);
var toggleAnimationDurationCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType2.mode('toggle');
toggleAnimationDurationCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 300,
});
sheet1.setCellType(6, 3, toggleAnimationDurationCellType2);
var toggleAnimationDurationCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType3.mode('toggle');
toggleAnimationDurationCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 500,
});
sheet1.setCellType(6, 4, toggleAnimationDurationCellType3);
sheet1.resumePaint();
}
initCheckboxSheet = () => {
var spread = this.spread;
var sheet2 = spread.getSheet(1);
sheet2.name("Checkbox");
sheet2.defaults.colWidth = 190;
sheet2.defaults.rowHeight = 60;
sheet2.suspendPaint();
sheet2.bind(spreadNS.Events.SelectionChanged, () => {
this.propertyChange(spread, false);
});
sheet2.setColumnWidth(0, 110);
sheet2.setColumnWidth(1, 190);
sheet2.setColumnWidth(2, 130);
for (let i = 0; i < 4; i++) {
sheet2.setRowHeight(i, 60);
}
sheet2.addSpan(0, 0, 4, 1);
sheet2.setValue(0, 0, "Checkbox Mode");
sheet2.setStyle(0, 0, this.initCellStyle(11, "Accent 1"));
sheet2.setStyle(0, 1, this.initCellStyle(11, "Accent 6"));
sheet2.setStyle(1, 1, this.initCellStyle(11, "#FF0000"));
sheet2.setStyle(2, 1, this.initCellStyle(11, "Accent 5"));
sheet2.setStyle(3, 1, this.initCellStyle(11, "Accent 4"));
sheet2.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 4; i++) {
for (let j = 1; j < 4; j++) {
sheet2.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
sheet2.setValue(0, 1, "caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.caption("Caption");
sheet2.setCellType(0, 2, captionCellType);
sheet2.setValue(1, 1, "threeState");
var threeStateCellType = new spreadNS.CellTypes.CheckBox();
threeStateCellType.isThreeState(false);
threeStateCellType.textTrue("Checked!");
threeStateCellType.textFalse("Check Me!");
sheet2.setCellType(1, 2, threeStateCellType);
sheet2.setValue(2, 1, "textAlign");
var textAlignCellType = new spreadNS.CellTypes.CheckBox();
textAlignCellType.isThreeState(false);
textAlignCellType.caption("textAlign");
textAlignCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 2, textAlignCellType);
sheet2.setValue(3, 1, "text wrap");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.caption("This is a long long text");
sheet2.setCellType(3, 2, textWrapCellType);
sheet2.getCell(3, 2).wordWrap(true);
sheet2.resumePaint();
}
}
class Panel extends Component {
constructor(props) {
super(props);
this.state = this.props.setting;
}
componentWillReceiveProps(nextProps) {
this.setState(nextProps.setting);
}
render() {
const { hasCaption } = this.state;
return (
<div class="options-container">
<label>Select the check box cell in Spread and edit its options with these text boxes.</label>
<div class="checkbox-options" style={{display: this.state.mode === 'checkbox' ? 'block' : 'none'}}>
<div class="option-row" style={{display: hasCaption === null || hasCaption ? 'block' : 'none'}}>
<label for="caption">caption:</label>
<input id="caption" type="text" value={this.state.caption} onChange={(e) => { this.setState({ caption: e.target.value }); }} />
</div>
<div class="option-row" style={{display: hasCaption === null || !hasCaption ? 'block' : 'none'}}>
<label for="textTrue">textTrue:</label>
<input id="textTrue" type="text" value={this.state.textTrue} onChange={(e) => { this.setState({ textTrue: e.target.value }); }} />
</div>
<div class="option-row" style={{display: hasCaption === null || !hasCaption ? 'block' : 'none'}}>
<label for="textIndeterminate">textIndeterminate(for 3-state option):</label>
<input id="textIndeterminate" type="text" value={this.state.textIndeterminate} onChange={(e) => { this.setState({ textIndeterminate: e.target.value }); }} />
</div>
<div class="option-row" style={{display: hasCaption === null || !hasCaption ? 'block' : 'none'}}>
<label for="textFalse">textFalse:</label>
<input id="textFalse" type="text" value={this.state.textFalse} onChange={(e) => { this.setState({ textFalse: e.target.value }); }} />
</div>
<div class="option-row" style={{display: hasCaption === null || !hasCaption ? 'block' : 'none'}}>
<label>boxSize</label>
<input id="boxSize" type="text" min="1" onChange={(e) => { this.setState({ boxSize: e.target.value }) }}></input>
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="textAlign" value={this.state.textAlign} onChange={(e) => { this.setState({ textAlign: e.target.value }); }}>
<option value="0">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
</select>
</div>
<div class="option-row" style={{display: hasCaption === null || !hasCaption ? 'block' : 'none'}}>
<input id="isThreeState" type="checkbox" checked={this.state.isThreeState} onChange={(e) => { this.setState({ isThreeState: e.target.checked }); }} />
<label for="isThreeState">isThreeState:</label>
</div>
</div>
<div class="toggle-options" style={{display: this.state.mode === 'toggle' ? 'block' : 'none'}}>
<div class="option-row">
<label>caption:</label>
<input type="text" id="toggleCheckBoxCellTextCaption" value={this.state.caption} onChange={(e) => { this.setState({ caption: e.target.value }); }} />
</div>
<div class="option-row">
<label>textTrue:</label>
<input type="text" id="toggleCheckBoxCellTextTrue" value={this.state.textTrue} onChange={(e) => { this.setState({ textTrue: e.target.value }); }} />
</div>
<div class="option-row">
<label>textFalse:</label>
<input type="text" id="toggleCheckBoxCellTextFalse" value={this.state.textFalse} onChange={(e) => { this.setState({ textFalse: e.target.value }); }} />
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="selToggleCheckBoxCellAlign" value={this.state.textAlign} onChange={(e) => { this.setState({ textAlign: e.target.value }); }}>
<option value="0" selected="selected">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
<option value="4">inside</option>
</select>
</div>
<div class="option-row">
<label class="toggle-checkbox-cell-auto-size">
<input type="checkbox" id="toggleCheckBoxCellAutoSize" checked={this.state.autoSize} onChange={(e) => { this.setState({ autoSize: e.target.checked }); }} />
autoSize
</label>
</div>
<div className={this.state.autoSize ? 'option-row disabled' : 'option-row'}>
<label>width:</label>
<input type="text" id="toggleCheckBoxCellWidth" value={this.state.width} onChange={(e) => { this.setState({ width: e.target.value }); }} />
</div>
<div className={this.state.autoSize ? 'option-row disabled' : 'option-row'}>
<label>height:</label>
<input type="text" id="toggleCheckBoxCellHeight" value={this.state.height} onChange={(e) => { this.setState({ height: e.target.value }); }} />
</div>
<div class="option-row">
<label>sliderMargin:</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" value={this.state.sliderMargin} onChange={(e) => { this.setState({ sliderMargin: e.target.value }); }} />
</div>
<div class="option-row">
<label>sliderRadius:</label>
<input type="text" id="toggleCheckBoxCellSliderRadius" value={this.state.sliderRadius} onChange={(e) => { this.setState({ sliderRadius: e.target.value }); }} />
</div>
<div class="option-row">
<label>trackRadius:</label>
<input type="text" id="toggleCheckBoxCellTrackRadius" value={this.state.trackRadius} onChange={(e) => { this.setState({ trackRadius: e.target.value }); }} />
</div>
<div class="option-row">
<label>sliderColorOn:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" value={this.state.sliderColorOn} onChange={(e) => { this.setState({ sliderColorOn: e.target.value }); }} />
</div>
<div class="option-row">
<label>sliderColorOff:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" value={this.state.sliderColorOff} onChange={(e) => { this.setState({ sliderColorOff: e.target.value }); }} />
</div>
<div class="option-row">
<label>trackColorOn:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" value={this.state.trackColorOn} onChange={(e) => { this.setState({ trackColorOn: e.target.value }); }} />
</div>
<div class="option-row">
<label>trackColorOff:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" value={this.state.trackColorOff} onChange={(e) => { this.setState({ trackColorOff: e.target.value }); }} />
</div>
<div class="option-row">
<label>animationDuration:</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" value={this.state.animationDuration} onChange={(e) => { this.setState({ animationDuration: e.target.value }); }} />
</div>
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update" disabled={this.state.disabled} onClick={(e) => {this.props.propertyChange(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;
}
.option-row {
font-size: 14px;
padding: 5px;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
.checkbox {
padding-right: 12px;
display: inline-block;
}
label {
padding-bottom: 4px;
display: block;
}
input, select {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
input[type=checkbox]+label {
display: inline-block;
width: auto;
}
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/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.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);
