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", "toggle", or "modern" to cellType.
checkbox: The classic checkbox style (default).
toggle: A toggle switch style.
modern: A modern checkbox style. In modern mode, the cell's foreColor affects the checkbox appearance.
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.
You can use the hitTestMode method to get and set the click response area in checkbox and modern mode. The setting is a string value: 'cell' or 'checkbox'.
cell: The entire cell responds to clicks (default).
checkbox: Only the checkbox area responds to clicks.
You can use the textEditable method to get and set whether the text is editable in checkbox and modern mode. When set to false, the checkbox behaves similar to toggle mode and cannot enter text editing mode.
Excel Import and Export
The CheckBox cell type supports both importing from and exporting to Excel files. This functionality works seamlessly in checkbox mode, toggle mode, and modern mode, allowing you to preserve your checkbox when working with Excel files.
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 '@mescius/spread-sheets-io';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const spreadNS = GC.Spread.Sheets;
let spread = null;
export function AppFunc() {
const [panelDescription, setPanelDescription] = React.useState('Select the check box cell in Spread and edit its options with these text boxes.');
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,
hitTestMode: 'cell',
textEditable: true,
foreColor: '',
});
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;
}
// Check if this is Toggle sheet
if (sheet.name() === "Toggle") {
const checkboxMode = checkboxCellType.mode();
if (checkboxMode === 'toggle') {
if (!settings) {
setCheckboxCellTypeOption({
mode: 'toggle',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textTrue: checkboxCellType.textTrue(),
textFalse: checkboxCellType.textFalse(),
textAlign: checkboxCellType.textAlign(),
...checkboxCellType.toggleOptions(),
});
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.textAlign(Number(settings.textAlign));
checkboxCellType.toggleOptions({
width: settings.autoSize ? null : (settings.width - 0),
height: settings.autoSize ? null : (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,
});
}
} else {
if (!settings) {
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(),
});
} else {
if (checkboxCellType.caption()) {
checkboxCellType.caption(settings.caption);
} else {
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textIndeterminate(settings.textIndeterminate);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.isThreeState(settings.isThreeState);
var boxSizeValue = settings.boxSize;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
}
checkboxCellType.textAlign(Number(settings.textAlign));
}
}
sheet.repaint();
return;
}
// Check if this is Checkbox sheet - handle by row
if (sheet.name() === "Checkbox" || sheet.name() === "Modern") {
switch (sel.row) {
case 0: // Caption
if (!settings) {
setCheckboxCellTypeOption({
mode: 'checkbox',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textAlign: checkboxCellType.textAlign(),
});
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textAlign(Number(settings.textAlign));
}
break;
case 1: // Three State
if (!settings) {
setCheckboxCellTypeOption({
mode: 'checkbox',
disabled: false,
hasCaption: false,
textTrue: checkboxCellType.textTrue(),
textIndeterminate: checkboxCellType.textIndeterminate(),
textFalse: checkboxCellType.textFalse(),
isThreeState: checkboxCellType.isThreeState(),
boxSize: checkboxCellType.boxSize(),
textAlign: checkboxCellType.textAlign(),
});
} else {
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textIndeterminate(settings.textIndeterminate);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.isThreeState(settings.isThreeState);
var boxSizeValue = settings.boxSize;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
checkboxCellType.textAlign(Number(settings.textAlign));
}
break;
case 2: // Text Align
if (!settings) {
setCheckboxCellTypeOption({
mode: 'checkbox',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textAlign: checkboxCellType.textAlign(),
});
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textAlign(Number(settings.textAlign));
}
break;
case 3: // Text Wrap
if (!settings) {
setCheckboxCellTypeOption({
mode: 'checkbox',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textAlign: checkboxCellType.textAlign(),
});
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textAlign(Number(settings.textAlign));
}
break;
case 4: // Hit Test Mode
if (!settings) {
setCheckboxCellTypeOption({
mode: 'hitTestMode',
disabled: false,
hitTestMode: checkboxCellType.hitTestMode(),
});
} else {
checkboxCellType.hitTestMode(settings.hitTestMode);
}
break;
case 5: // Text Editable
if (!settings) {
setCheckboxCellTypeOption({
mode: 'textEditable',
disabled: false,
textEditable: checkboxCellType.textEditable(),
});
} else {
checkboxCellType.textEditable(settings.textEditable);
}
break;
case 6: // Box Size
if (!settings) {
setCheckboxCellTypeOption({
mode: 'boxSize',
disabled: false,
boxSize: checkboxCellType.boxSize(),
caption: checkboxCellType.caption(),
});
} else {
var boxSizeValue = settings.boxSize;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
checkboxCellType.caption(settings.caption);
}
break;
}
sheet.repaint();
return;
}
}
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);
initModernSheet(spread);
initCheckboxUsageSheet(spread);
spread.bind(spreadNS.Events.ActiveSheetChanged, function() {
const sheet = spread.getActiveSheet();
const sheetName = sheet.name();
if (sheetName === "Checkbox Usage") {
setPanelDescription("Export the current workbook to an Excel file.");
setCheckboxCellTypeOption({
...checkboxCellTypeOption,
mode: null,
disabled: true
});
} else {
setPanelDescription("Select the check box cell in Spread and edit its options with these text boxes.");
propertyChange(null, false);
}
});
}
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, 145);
sheet2.setColumnWidth(3, 170);
for (let i = 4; i < 7; i++) {
sheet2.setColumnWidth(i, 130);
}
for (let i = 0; i < 7; i++) {
sheet2.setRowHeight(i, 60);
}
sheet2.addSpan(0, 0, 7, 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.setStyle(4, 1, initCellStyle(11, "Accent 2"));
sheet2.setStyle(5, 1, initCellStyle(11, "Accent 3"));
sheet2.setStyle(6, 1, initCellStyle(11, "#000"));
sheet2.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++) {
sheet2.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
// Row 0: Caption
sheet2.setValue(0, 1, "Caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.caption("Caption");
sheet2.setCellType(0, 2, captionCellType);
// Row 1: Three State
sheet2.setValue(1, 1, "Three State");
// Two-state checked
var twoStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateCheckedCellType.isThreeState(false);
twoStateCheckedCellType.textTrue("Checked");
twoStateCheckedCellType.textFalse("Unchecked");
sheet2.setCellType(1, 2, twoStateCheckedCellType);
sheet2.setValue(1, 2, true);
// Two-state unchecked
var twoStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateUncheckedCellType.isThreeState(false);
twoStateUncheckedCellType.textTrue("Checked");
twoStateUncheckedCellType.textFalse("Unchecked");
sheet2.setCellType(1, 3, twoStateUncheckedCellType);
sheet2.setValue(1, 3, false);
// Three-state checked
var threeStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateCheckedCellType.isThreeState(true);
threeStateCheckedCellType.textTrue("Checked");
threeStateCheckedCellType.textFalse("Unchecked");
threeStateCheckedCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 4, threeStateCheckedCellType);
sheet2.setValue(1, 4, true);
// Three-state unchecked
var threeStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateUncheckedCellType.isThreeState(true);
threeStateUncheckedCellType.textTrue("Checked");
threeStateUncheckedCellType.textFalse("Unchecked");
threeStateUncheckedCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 5, threeStateUncheckedCellType);
sheet2.setValue(1, 5, false);
// Three-state indeterminate
var threeStateIndeterminateCellType = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminateCellType.isThreeState(true);
threeStateIndeterminateCellType.textTrue("Checked");
threeStateIndeterminateCellType.textFalse("Unchecked");
threeStateIndeterminateCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 6, threeStateIndeterminateCellType);
sheet2.setValue(1, 6, null);
// Row 2: Text Align
sheet2.setValue(2, 1, "Text Align");
var textAlignTopCellType = new spreadNS.CellTypes.CheckBox();
textAlignTopCellType.caption("Top");
textAlignTopCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet2.setCellType(2, 2, textAlignTopCellType);
var textAlignBottomCellType = new spreadNS.CellTypes.CheckBox();
textAlignBottomCellType.caption("Bottom");
textAlignBottomCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 3, textAlignBottomCellType);
var textAlignLeftCellType = new spreadNS.CellTypes.CheckBox();
textAlignLeftCellType.caption("Left");
textAlignLeftCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet2.setCellType(2, 4, textAlignLeftCellType);
var textAlignRightCellType = new spreadNS.CellTypes.CheckBox();
textAlignRightCellType.caption("Right");
textAlignRightCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet2.setCellType(2, 5, textAlignRightCellType);
// Row 3: Text Wrap
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);
// Row 4: Hit Test Mode
sheet2.setValue(4, 1, "Hit Test Mode");
var hitTestCellCellType = new spreadNS.CellTypes.CheckBox();
hitTestCellCellType.hitTestMode("cell");
hitTestCellCellType.caption("Click cell");
sheet2.setCellType(4, 2, hitTestCellCellType);
var hitTestCheckboxCellType = new spreadNS.CellTypes.CheckBox();
hitTestCheckboxCellType.hitTestMode("checkbox");
hitTestCheckboxCellType.caption("Only click checkbox");
sheet2.setCellType(4, 3, hitTestCheckboxCellType);
// Row 5: Text Editable
sheet2.setValue(5, 1, "Text Editable");
var textEditableTrueCellType = new spreadNS.CellTypes.CheckBox();
textEditableTrueCellType.textEditable(true);
textEditableTrueCellType.caption("Can enter edit mode");
sheet2.setCellType(5, 2, textEditableTrueCellType);
var textEditableFalseCellType = new spreadNS.CellTypes.CheckBox();
textEditableFalseCellType.textEditable(false);
textEditableFalseCellType.caption("Cannot enter edit mode");
sheet2.setCellType(5, 3, textEditableFalseCellType);
// Row 6: Box Size
sheet2.setValue(6, 1, "Box Size");
var boxSize10CellType = new spreadNS.CellTypes.CheckBox();
boxSize10CellType.textTrue("Size 10");
boxSize10CellType.textFalse("Size 10");
boxSize10CellType.boxSize(10);
sheet2.setCellType(6, 2, boxSize10CellType);
var boxSize16CellType = new spreadNS.CellTypes.CheckBox();
boxSize16CellType.textTrue("Size 16");
boxSize16CellType.textFalse("Size 16");
boxSize16CellType.boxSize(16);
sheet2.setCellType(6, 3, boxSize16CellType);
var boxSize20CellType = new spreadNS.CellTypes.CheckBox();
boxSize20CellType.textTrue("Size 20");
boxSize20CellType.textFalse("Size 20");
boxSize20CellType.boxSize(20);
sheet2.setCellType(6, 4, boxSize20CellType);
var boxSize24CellType = new spreadNS.CellTypes.CheckBox();
boxSize24CellType.textTrue("Size 24");
boxSize24CellType.textFalse("Size 24");
boxSize24CellType.boxSize(24);
sheet2.setCellType(6, 5, boxSize24CellType);
var boxSizeAutoCellType = new spreadNS.CellTypes.CheckBox();
boxSizeAutoCellType.textTrue("Auto Size");
boxSizeAutoCellType.textFalse("Auto Size");
boxSizeAutoCellType.boxSize("auto");
sheet2.setCellType(6, 6, boxSizeAutoCellType);
sheet2.resumePaint();
}
const initModernSheet = () => {
var sheet3 = spread.getSheet(2);
sheet3.name("Modern");
sheet3.defaults.colWidth = 190;
sheet3.defaults.rowHeight = 60;
sheet3.suspendPaint();
sheet3.bind(spreadNS.Events.SelectionChanged, function() {
propertyChange(spread, false);
});
sheet3.setColumnWidth(0, 110);
sheet3.setColumnWidth(1, 190);
sheet3.setColumnWidth(2, 145);
sheet3.setColumnWidth(3, 170);
for (let i = 4; i < 8; i++) {
sheet3.setColumnWidth(i, 130);
}
for (let i = 0; i < 8; i++) {
sheet3.setRowHeight(i, 60);
}
sheet3.addSpan(0, 0, 8, 1);
sheet3.setValue(0, 0, "Modern Mode");
sheet3.setStyle(0, 0, initCellStyle(11, "Accent 1"));
sheet3.setStyle(0, 1, initCellStyle(11, "Accent 6"));
sheet3.setStyle(1, 1, initCellStyle(11, "#FF0000"));
sheet3.setStyle(2, 1, initCellStyle(11, "Accent 5"));
sheet3.setStyle(3, 1, initCellStyle(11, "Accent 4"));
sheet3.setStyle(4, 1, initCellStyle(11, "Accent 2"));
sheet3.setStyle(5, 1, initCellStyle(11, "Accent 3"));
sheet3.setStyle(6, 1, initCellStyle(11, "#000"));
sheet3.setStyle(7, 1, initCellStyle(11, "#000"));
sheet3.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 8; i++) {
for (let j = 1; j < 8; j++) {
sheet3.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
// Row 0: Caption
sheet3.setValue(0, 1, "Caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.mode("modern");
captionCellType.caption("Caption");
sheet3.setCellType(0, 2, captionCellType);
// Row 1: Three State
sheet3.setValue(1, 1, "Three State");
// Two-state checked
var twoStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateCheckedCellType.mode("modern");
twoStateCheckedCellType.isThreeState(false);
twoStateCheckedCellType.textTrue("Checked");
twoStateCheckedCellType.textFalse("Unchecked");
sheet3.setCellType(1, 2, twoStateCheckedCellType);
sheet3.setValue(1, 2, true);
// Two-state unchecked
var twoStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateUncheckedCellType.mode("modern");
twoStateUncheckedCellType.isThreeState(false);
twoStateUncheckedCellType.textTrue("Checked");
twoStateUncheckedCellType.textFalse("Unchecked");
sheet3.setCellType(1, 3, twoStateUncheckedCellType);
sheet3.setValue(1, 3, false);
// Three-state checked
var threeStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateCheckedCellType.mode("modern");
threeStateCheckedCellType.isThreeState(true);
threeStateCheckedCellType.textTrue("Checked");
threeStateCheckedCellType.textFalse("Unchecked");
threeStateCheckedCellType.textIndeterminate("Indeterminate");
sheet3.setCellType(1, 4, threeStateCheckedCellType);
sheet3.setValue(1, 4, true);
// Three-state unchecked
var threeStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateUncheckedCellType.mode("modern");
threeStateUncheckedCellType.isThreeState(true);
threeStateUncheckedCellType.textTrue("Checked");
threeStateUncheckedCellType.textFalse("Unchecked");
threeStateUncheckedCellType.textIndeterminate("Indeterminate");
sheet3.setCellType(1, 5, threeStateUncheckedCellType);
sheet3.setValue(1, 5, false);
// Three-state indeterminate
var threeStateIndeterminateCellType = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminateCellType.mode("modern");
threeStateIndeterminateCellType.isThreeState(true);
threeStateIndeterminateCellType.textTrue("Checked");
threeStateIndeterminateCellType.textFalse("Unchecked");
threeStateIndeterminateCellType.textIndeterminate("Indeterminate");
sheet3.setCellType(1, 6, threeStateIndeterminateCellType);
sheet3.setValue(1, 6, null);
// Row 2: Text Align
sheet3.setValue(2, 1, "Text Align");
var textAlignTopCellType = new spreadNS.CellTypes.CheckBox();
textAlignTopCellType.mode("modern");
textAlignTopCellType.caption("Top");
textAlignTopCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet3.setCellType(2, 2, textAlignTopCellType);
var textAlignBottomCellType = new spreadNS.CellTypes.CheckBox();
textAlignBottomCellType.mode("modern");
textAlignBottomCellType.caption("Bottom");
textAlignBottomCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet3.setCellType(2, 3, textAlignBottomCellType);
var textAlignLeftCellType = new spreadNS.CellTypes.CheckBox();
textAlignLeftCellType.mode("modern");
textAlignLeftCellType.caption("Left");
textAlignLeftCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet3.setCellType(2, 4, textAlignLeftCellType);
var textAlignRightCellType = new spreadNS.CellTypes.CheckBox();
textAlignRightCellType.mode("modern");
textAlignRightCellType.caption("Right");
textAlignRightCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet3.setCellType(2, 5, textAlignRightCellType);
// Row 3: Text Wrap
sheet3.setValue(3, 1, "Text Wrap");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.mode("modern");
textWrapCellType.caption("This is a long long text");
sheet3.setCellType(3, 2, textWrapCellType);
sheet3.getCell(3, 2).wordWrap(true);
// Row 4: Hit Test Mode
sheet3.setValue(4, 1, "Hit Test Mode");
var hitTestCellCellType = new spreadNS.CellTypes.CheckBox();
hitTestCellCellType.mode("modern");
hitTestCellCellType.hitTestMode("cell");
hitTestCellCellType.caption("Click cell");
sheet3.setCellType(4, 2, hitTestCellCellType);
var hitTestCheckboxCellType = new spreadNS.CellTypes.CheckBox();
hitTestCheckboxCellType.mode("modern");
hitTestCheckboxCellType.hitTestMode("checkbox");
hitTestCheckboxCellType.caption("Only click checkbox");
sheet3.setCellType(4, 3, hitTestCheckboxCellType);
// Row 5: Text Editable
sheet3.setValue(5, 1, "Text Editable");
var textEditableTrueCellType = new spreadNS.CellTypes.CheckBox();
textEditableTrueCellType.mode("modern");
textEditableTrueCellType.textEditable(true);
textEditableTrueCellType.caption("Can enter edit mode");
sheet3.setCellType(5, 2, textEditableTrueCellType);
var textEditableFalseCellType = new spreadNS.CellTypes.CheckBox();
textEditableFalseCellType.mode("modern");
textEditableFalseCellType.textEditable(false);
textEditableFalseCellType.caption("Cannot enter edit mode");
sheet3.setCellType(5, 3, textEditableFalseCellType);
// Row 6: Box Size
sheet3.setValue(6, 1, "Box Size");
var boxSize10CellType = new spreadNS.CellTypes.CheckBox();
boxSize10CellType.mode("modern");
boxSize10CellType.textTrue("Size 10");
boxSize10CellType.textFalse("Size 10");
boxSize10CellType.boxSize(10);
sheet3.setCellType(6, 2, boxSize10CellType);
var boxSize16CellType = new spreadNS.CellTypes.CheckBox();
boxSize16CellType.mode("modern");
boxSize16CellType.textTrue("Size 16");
boxSize16CellType.textFalse("Size 16");
boxSize16CellType.boxSize(16);
sheet3.setCellType(6, 3, boxSize16CellType);
var boxSize20CellType = new spreadNS.CellTypes.CheckBox();
boxSize20CellType.mode("modern");
boxSize20CellType.textTrue("Size 20");
boxSize20CellType.textFalse("Size 20");
boxSize20CellType.boxSize(20);
sheet3.setCellType(6, 4, boxSize20CellType);
var boxSize24CellType = new spreadNS.CellTypes.CheckBox();
boxSize24CellType.mode("modern");
boxSize24CellType.textTrue("Size 24");
boxSize24CellType.textFalse("Size 24");
boxSize24CellType.boxSize(24);
sheet3.setCellType(6, 5, boxSize24CellType);
var boxSizeAutoCellType = new spreadNS.CellTypes.CheckBox();
boxSizeAutoCellType.mode("modern");
boxSizeAutoCellType.textTrue("Auto Size");
boxSizeAutoCellType.textFalse("Auto Size");
boxSizeAutoCellType.boxSize("auto");
sheet3.setCellType(6, 6, boxSizeAutoCellType);
// Row 7: Color
sheet3.setValue(7, 1, "Color");
var colorDefaultCellType = new spreadNS.CellTypes.CheckBox();
colorDefaultCellType.mode("modern");
colorDefaultCellType.textTrue("Default");
colorDefaultCellType.textFalse("Default");
sheet3.setCellType(7, 2, colorDefaultCellType);
var colorRedCellType = new spreadNS.CellTypes.CheckBox();
colorRedCellType.mode("modern");
colorRedCellType.textTrue("Red");
colorRedCellType.textFalse("Red");
sheet3.setCellType(7, 3, colorRedCellType);
sheet3.getCell(7, 3).foreColor("red");
var colorBlueCellType = new spreadNS.CellTypes.CheckBox();
colorBlueCellType.mode("modern");
colorBlueCellType.textTrue("Blue");
colorBlueCellType.textFalse("Blue");
sheet3.setCellType(7, 4, colorBlueCellType);
sheet3.getCell(7, 4).foreColor("blue");
var colorGreenCellType = new spreadNS.CellTypes.CheckBox();
colorGreenCellType.mode("modern");
colorGreenCellType.textTrue("Green");
colorGreenCellType.textFalse("Green");
sheet3.setCellType(7, 5, colorGreenCellType);
sheet3.getCell(7, 5).foreColor("green");
sheet3.resumePaint();
}
const initCheckboxUsageSheet = (spread) => {
const sheet = spread.getSheet(3);
sheet.name("Checkbox Usage");
sheet.suspendPaint();
// Define tasks data
const tasks = [
{ task: "Homepage", plan: true, design: true, dev: true, test: true, deploy: true },
{ task: "Product Page", plan: true, design: true, dev: true, test: false, deploy: false },
{ task: "Checkout", plan: true, design: true, dev: false, test: false, deploy: false },
{ task: "User Profile", plan: true, design: false, dev: false, test: false, deploy: false },
{ task: "Admin Panel", plan: false, design: false, dev: false, test: false, deploy: false },
{ task: "API Gateway", plan: true, design: true, dev: true, test: true, deploy: false }
];
// Set column widths
sheet.setColumnWidth(0, 200); // Task
sheet.setColumnWidth(1, 80); // Plan
sheet.setColumnWidth(2, 80); // Design
sheet.setColumnWidth(3, 80); // Dev
sheet.setColumnWidth(4, 80); // Test
sheet.setColumnWidth(5, 80); // Deploy
sheet.setColumnWidth(6, 120); // Progress
sheet.setColumnWidth(7, 100); // Status
// Set row heights
sheet.setRowHeight(0, 40);
sheet.setRowHeight(1, 30);
for (let i = 2; i < 8; i++) {
sheet.setRowHeight(i, 35);
}
// Header row (row 0) - "Task Progress Tracker"
sheet.addSpan(0, 0, 1, 8);
sheet.setValue(0, 0, "Task Progress Tracker");
const headerStyle = new spreadNS.Style();
headerStyle.backColor = "#2E5090";
headerStyle.foreColor = "#FFFFFF";
headerStyle.hAlign = spreadNS.HorizontalAlign.center;
headerStyle.vAlign = spreadNS.VerticalAlign.center;
headerStyle.font = "bold 14pt Calibri";
sheet.setStyle(0, 0, headerStyle);
// Column header row (row 1)
const columnHeaders = ["Task", "Plan", "Design", "Dev", "Test", "Deploy", "Progress", "Status"];
const columnHeaderStyle = new spreadNS.Style();
columnHeaderStyle.backColor = "#4472C4";
columnHeaderStyle.foreColor = "#FFFFFF";
columnHeaderStyle.hAlign = spreadNS.HorizontalAlign.center;
columnHeaderStyle.vAlign = spreadNS.VerticalAlign.center;
columnHeaderStyle.font = "bold 11pt Calibri";
for (let col = 0; col < columnHeaders.length; col++) {
sheet.setValue(1, col, columnHeaders[col]);
sheet.setStyle(1, col, columnHeaderStyle);
}
// Create checkbox cell type
const checkboxCellType = new spreadNS.CellTypes.CheckBox();
checkboxCellType.mode("modern");
checkboxCellType.textTrue("");
checkboxCellType.textFalse("");
checkboxCellType.textEditable(false);
// Center align style for all cells
const centerStyle = new spreadNS.Style();
centerStyle.hAlign = spreadNS.HorizontalAlign.center;
centerStyle.vAlign = spreadNS.VerticalAlign.center;
// Populate data rows
for (let i = 0; i < tasks.length; i++) {
const rowIndex = i + 2; // Data starts at row 2
const task = tasks[i];
// Column 0: Task name (set value and alignment)
sheet.setValue(rowIndex, 0, task.task);
sheet.getCell(rowIndex, 0).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 0).vAlign(spreadNS.VerticalAlign.center);
// Columns 1-5: Checkboxes (Plan, Design, Dev, Test, Deploy)
const checkboxColumns = [
{ col: 1, value: task.plan },
{ col: 2, value: task.design },
{ col: 3, value: task.dev },
{ col: 4, value: task.test },
{ col: 5, value: task.deploy }
];
for (let j = 0; j < checkboxColumns.length; j++) {
sheet.setCellType(rowIndex, checkboxColumns[j].col, checkboxCellType);
sheet.setValue(rowIndex, checkboxColumns[j].col, checkboxColumns[j].value);
// Use getCell() to avoid overwriting CellType
sheet.getCell(rowIndex, checkboxColumns[j].col).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, checkboxColumns[j].col).vAlign(spreadNS.VerticalAlign.center);
}
// Column 6: Progress (use formula to calculate automatically)
const progressFormula = `=COUNTIF(B${rowIndex + 1}:F${rowIndex + 1},TRUE)/5`;
sheet.setFormula(rowIndex, 6, progressFormula);
sheet.getCell(rowIndex, 6).formatter("0%");
sheet.getCell(rowIndex, 6).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 6).vAlign(spreadNS.VerticalAlign.center);
// Add data bar for Progress column
const progressRule = new spreadNS.ConditionalFormatting.DataBarRule();
progressRule.ranges([new spreadNS.Range(rowIndex, 6, 1, 1)]);
progressRule.minType(spreadNS.ConditionalFormatting.ScaleValueType.number);
progressRule.minValue(0);
progressRule.maxType(spreadNS.ConditionalFormatting.ScaleValueType.number);
progressRule.maxValue(1);
progressRule.color("#D9D9D9");
progressRule.showBorder(false);
progressRule.showBarOnly(false);
progressRule.gradient(false);
sheet.conditionalFormats.addRule(progressRule);
// Column 7: Status (use formula to calculate automatically based on Progress)
const statusFormula = '=IF(G' + (rowIndex + 1) + '=1,"Complete",' +
'IF(G' + (rowIndex + 1) + '>=0.8,"Near Done",' +
'IF(G' + (rowIndex + 1) + '>=0.6,"Active",' +
'IF(G' + (rowIndex + 1) + '>=0.4,"In Progress",' +
'IF(G' + (rowIndex + 1) + '>=0.2,"Started","Pending")))))';
sheet.setFormula(rowIndex, 7, statusFormula);
sheet.getCell(rowIndex, 7).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 7).vAlign(spreadNS.VerticalAlign.center);
}
// Set up conditional formatting for background colors based on Progress column
for (let i = 0; i < tasks.length; i++) {
const rowIndex = i + 2;
const progressCell = `$G${rowIndex + 1}`;
const ranges = [new spreadNS.Range(rowIndex, 0, 1, 8)];
const ruleDefault = new spreadNS.ConditionalFormatting.NormalConditionRule();
ruleDefault.ranges(ranges);
ruleDefault.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
ruleDefault.formula(progressCell + "<0.2");
ruleDefault.style(new spreadNS.Style());
ruleDefault.style().backColor = "#F0F0F0";
ruleDefault.style().foreColor = "#757575";
sheet.conditionalFormats.addRule(ruleDefault);
const rule20 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule20.ranges(ranges);
rule20.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule20.formula(progressCell + ">=0.2");
rule20.style(new spreadNS.Style());
rule20.style().backColor = "#FFCDD2";
rule20.style().foreColor = "#D32F2F";
sheet.conditionalFormats.addRule(rule20);
const rule40 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule40.ranges(ranges);
rule40.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule40.formula(progressCell + ">=0.4");
rule40.style(new spreadNS.Style());
rule40.style().backColor = "#FFE0B2";
rule40.style().foreColor = "#E65100";
sheet.conditionalFormats.addRule(rule40);
const rule60 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule60.ranges(ranges);
rule60.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule60.formula(progressCell + ">=0.6");
rule60.style(new spreadNS.Style());
rule60.style().backColor = "#FFF9C4";
rule60.style().foreColor = "#F57F17";
sheet.conditionalFormats.addRule(rule60);
const rule80 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule80.ranges(ranges);
rule80.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule80.formula(progressCell + ">=0.8");
rule80.style(new spreadNS.Style());
rule80.style().backColor = "#C8E6C9";
rule80.style().foreColor = "#2E7D32";
sheet.conditionalFormats.addRule(rule80);
}
sheet.resumePaint();
}
const exportToExcel = () => {
const fileName = "CheckboxDemo.xlsx";
spread.export((blob) => {
saveAs(blob, fileName);
}, (error) => {
console.error("Export error:", error);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
<Worksheet />
<Worksheet />
<Worksheet />
<Worksheet />
</SpreadSheets>
</div>
<Panel propertyChange={propertyChange} setting={checkboxCellTypeOption} exportToExcel={exportToExcel} panelDescription={panelDescription} />
</div>);
}
function Panel(props) {
const [setting, setSetting] = React.useState(props.setting);
React.useEffect(() => {
setSetting(props.setting);
}, [props.setting]);
return (
<div class="options-container">
<label>{props.panelDescription}</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" value={setting.boxSize} 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="hittest-mode-options" style={{display: setting.mode === 'hitTestMode' ? 'block' : 'none'}}>
<div class="option-row">
<label>hitTestMode:</label>
<select id="hitTestMode" value={setting.hitTestMode} onChange={(e) => { setSetting({ ...setting, hitTestMode: e.target.value }); }}>
<option value="cell">cell</option>
<option value="checkbox">checkbox</option>
</select>
</div>
</div>
<div class="text-editable-options" style={{display: setting.mode === 'textEditable' ? 'block' : 'none'}}>
<div class="option-row">
<input id="textEditable" type="checkbox" checked={setting.textEditable} onChange={(e) => { setSetting({ ...setting, textEditable: e.target.checked }); }} />
<label for="textEditable">textEditable:</label>
</div>
</div>
<div class="box-size-options" style={{display: setting.mode === 'boxSize' ? 'block' : 'none'}}>
<div class="option-row">
<label for="txtBoxSize">boxSize:</label>
<input id="txtBoxSize" type="text" value={setting.boxSize} onChange={(e) => { setSetting({ ...setting, boxSize: e.target.value }); }} />
</div>
<div class="option-row">
<label for="txtBoxSizeCaption">caption:</label>
<input id="txtBoxSizeCaption" type="text" value={setting.caption} onChange={(e) => { setSetting({ ...setting, caption: e.target.value }); }} />
</div>
</div>
<div class="color-options" style={{display: setting.mode === 'color' ? 'block' : 'none'}}>
<div class="option-row">
<label for="txtColorCaption">caption:</label>
<input id="txtColorCaption" type="text" value={setting.caption} onChange={(e) => { setSetting({ ...setting, caption: e.target.value }); }} />
</div>
<div class="option-row">
<label for="txtForeColor">foreColor:</label>
<input id="txtForeColor" type="text" value={setting.foreColor} onChange={(e) => { setSetting({ ...setting, foreColor: e.target.value }); }} />
</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>
{setting.mode !== null && (
<div class="option-row">
<input type="button" id="setProperty" value="Update" disabled={setting.disabled} onClick={(e) => {props.propertyChange(e, setting)} } />
</div>
)}
<div class="option-row">
<input type="button" id="exportExcel" value="Export to Excel" onClick={props.exportToExcel} />
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-io';
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,
hitTestMode: 'cell',
textEditable: true,
foreColor: '',
panelDescription: 'Select the check box cell in Spread and edit its options with these text boxes.'
}
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet />
<Worksheet />
<Worksheet />
<Worksheet />
</SpreadSheets>
</div>
<Panel propertyChange={(e, settings) => {this.propertyChange(e, settings)}} setting={this.state} exportToExcel={() => this.exportToExcel()} />
</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();
this.initModernSheet();
this.initCheckboxUsageSheet();
spread.bind(spreadNS.Events.ActiveSheetChanged, () => {
const sheet = this.spread.getActiveSheet();
const sheetName = sheet.name();
if (sheetName === "Checkbox Usage") {
this.setState({
panelDescription: "Export the current workbook to an Excel file.",
mode: null,
disabled: true
});
} else {
this.setState({
panelDescription: "Select the check box cell in Spread and edit its options with these text boxes."
});
this.propertyChange(null, false);
}
});
}
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;
}
// Check if this is Toggle sheet
if (sheet.name() === "Toggle") {
const checkboxMode = checkboxCellType.mode();
if (checkboxMode === 'toggle') {
if (!settings) {
this.setState({
mode: 'toggle',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textTrue: checkboxCellType.textTrue(),
textFalse: checkboxCellType.textFalse(),
textAlign: checkboxCellType.textAlign(),
...checkboxCellType.toggleOptions(),
});
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.textAlign(Number(settings.textAlign));
checkboxCellType.toggleOptions({
width: settings.autoSize ? null : (settings.width - 0),
height: settings.autoSize ? null : (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,
});
}
} else {
if (!settings) {
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(),
});
} else {
if (checkboxCellType.caption()) {
checkboxCellType.caption(settings.caption);
} else {
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textIndeterminate(settings.textIndeterminate);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.isThreeState(settings.isThreeState);
var boxSizeValue = settings.boxSize;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
}
checkboxCellType.textAlign(Number(settings.textAlign));
}
}
sheet.repaint();
return;
}
// Check if this is Checkbox sheet - handle by row
if (sheet.name() === "Checkbox" || sheet.name() === "Modern") {
switch (sel.row) {
case 0: // Caption
if (!settings) {
this.setState({
mode: 'checkbox',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textAlign: checkboxCellType.textAlign(),
});
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textAlign(Number(settings.textAlign));
}
break;
case 1: // Three State
if (!settings) {
this.setState({
mode: 'checkbox',
disabled: false,
hasCaption: false,
textTrue: checkboxCellType.textTrue(),
textIndeterminate: checkboxCellType.textIndeterminate(),
textFalse: checkboxCellType.textFalse(),
isThreeState: checkboxCellType.isThreeState(),
boxSize: checkboxCellType.boxSize(),
textAlign: checkboxCellType.textAlign(),
});
} else {
checkboxCellType.textTrue(settings.textTrue);
checkboxCellType.textIndeterminate(settings.textIndeterminate);
checkboxCellType.textFalse(settings.textFalse);
checkboxCellType.isThreeState(settings.isThreeState);
var boxSizeValue = settings.boxSize;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
checkboxCellType.textAlign(Number(settings.textAlign));
}
break;
case 2: // Text Align
if (!settings) {
this.setState({
mode: 'checkbox',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textAlign: checkboxCellType.textAlign(),
});
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textAlign(Number(settings.textAlign));
}
break;
case 3: // Text Wrap
if (!settings) {
this.setState({
mode: 'checkbox',
disabled: false,
hasCaption: true,
caption: checkboxCellType.caption(),
textAlign: checkboxCellType.textAlign(),
});
} else {
checkboxCellType.caption(settings.caption);
checkboxCellType.textAlign(Number(settings.textAlign));
}
break;
case 4: // Hit Test Mode
if (!settings) {
this.setState({
mode: 'hitTestMode',
disabled: false,
hitTestMode: checkboxCellType.hitTestMode(),
});
} else {
checkboxCellType.hitTestMode(settings.hitTestMode);
}
break;
case 5: // Text Editable
if (!settings) {
this.setState({
mode: 'textEditable',
disabled: false,
textEditable: checkboxCellType.textEditable(),
});
} else {
checkboxCellType.textEditable(settings.textEditable);
}
break;
case 6: // Box Size
if (!settings) {
this.setState({
mode: 'boxSize',
disabled: false,
boxSize: checkboxCellType.boxSize(),
caption: checkboxCellType.caption(),
});
} else {
var boxSizeValue = settings.boxSize;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
checkboxCellType.caption(settings.caption);
}
break;
}
sheet.repaint();
return;
}
}
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, 145);
sheet2.setColumnWidth(3, 170);
for (let i = 4; i < 7; i++) {
sheet2.setColumnWidth(i, 130);
}
for (let i = 0; i < 7; i++) {
sheet2.setRowHeight(i, 60);
}
sheet2.addSpan(0, 0, 7, 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.setStyle(4, 1, this.initCellStyle(11, "Accent 2"));
sheet2.setStyle(5, 1, this.initCellStyle(11, "Accent 3"));
sheet2.setStyle(6, 1, this.initCellStyle(11, "#000"));
sheet2.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++) {
sheet2.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
// Row 0: Caption
sheet2.setValue(0, 1, "Caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.caption("Caption");
sheet2.setCellType(0, 2, captionCellType);
// Row 1: Three State
sheet2.setValue(1, 1, "Three State");
// Two-state checked
var twoStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateCheckedCellType.isThreeState(false);
twoStateCheckedCellType.textTrue("Checked");
twoStateCheckedCellType.textFalse("Unchecked");
sheet2.setCellType(1, 2, twoStateCheckedCellType);
sheet2.setValue(1, 2, true);
// Two-state unchecked
var twoStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateUncheckedCellType.isThreeState(false);
twoStateUncheckedCellType.textTrue("Checked");
twoStateUncheckedCellType.textFalse("Unchecked");
sheet2.setCellType(1, 3, twoStateUncheckedCellType);
sheet2.setValue(1, 3, false);
// Three-state checked
var threeStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateCheckedCellType.isThreeState(true);
threeStateCheckedCellType.textTrue("Checked");
threeStateCheckedCellType.textFalse("Unchecked");
threeStateCheckedCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 4, threeStateCheckedCellType);
sheet2.setValue(1, 4, true);
// Three-state unchecked
var threeStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateUncheckedCellType.isThreeState(true);
threeStateUncheckedCellType.textTrue("Checked");
threeStateUncheckedCellType.textFalse("Unchecked");
threeStateUncheckedCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 5, threeStateUncheckedCellType);
sheet2.setValue(1, 5, false);
// Three-state indeterminate
var threeStateIndeterminateCellType = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminateCellType.isThreeState(true);
threeStateIndeterminateCellType.textTrue("Checked");
threeStateIndeterminateCellType.textFalse("Unchecked");
threeStateIndeterminateCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 6, threeStateIndeterminateCellType);
sheet2.setValue(1, 6, null);
// Row 2: Text Align
sheet2.setValue(2, 1, "Text Align");
var textAlignTopCellType = new spreadNS.CellTypes.CheckBox();
textAlignTopCellType.caption("Top");
textAlignTopCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet2.setCellType(2, 2, textAlignTopCellType);
var textAlignBottomCellType = new spreadNS.CellTypes.CheckBox();
textAlignBottomCellType.caption("Bottom");
textAlignBottomCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 3, textAlignBottomCellType);
var textAlignLeftCellType = new spreadNS.CellTypes.CheckBox();
textAlignLeftCellType.caption("Left");
textAlignLeftCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet2.setCellType(2, 4, textAlignLeftCellType);
var textAlignRightCellType = new spreadNS.CellTypes.CheckBox();
textAlignRightCellType.caption("Right");
textAlignRightCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet2.setCellType(2, 5, textAlignRightCellType);
// Row 3: Text Wrap
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);
// Row 4: Hit Test Mode
sheet2.setValue(4, 1, "Hit Test Mode");
var hitTestCellCellType = new spreadNS.CellTypes.CheckBox();
hitTestCellCellType.hitTestMode("cell");
hitTestCellCellType.caption("Click cell");
sheet2.setCellType(4, 2, hitTestCellCellType);
var hitTestCheckboxCellType = new spreadNS.CellTypes.CheckBox();
hitTestCheckboxCellType.hitTestMode("checkbox");
hitTestCheckboxCellType.caption("Only click checkbox");
sheet2.setCellType(4, 3, hitTestCheckboxCellType);
// Row 5: Text Editable
sheet2.setValue(5, 1, "Text Editable");
var textEditableTrueCellType = new spreadNS.CellTypes.CheckBox();
textEditableTrueCellType.textEditable(true);
textEditableTrueCellType.caption("Can enter edit mode");
sheet2.setCellType(5, 2, textEditableTrueCellType);
var textEditableFalseCellType = new spreadNS.CellTypes.CheckBox();
textEditableFalseCellType.textEditable(false);
textEditableFalseCellType.caption("Cannot enter edit mode");
sheet2.setCellType(5, 3, textEditableFalseCellType);
// Row 6: Box Size
sheet2.setValue(6, 1, "Box Size");
var boxSize10CellType = new spreadNS.CellTypes.CheckBox();
boxSize10CellType.textTrue("Size 10");
boxSize10CellType.textFalse("Size 10");
boxSize10CellType.boxSize(10);
sheet2.setCellType(6, 2, boxSize10CellType);
var boxSize16CellType = new spreadNS.CellTypes.CheckBox();
boxSize16CellType.textTrue("Size 16");
boxSize16CellType.textFalse("Size 16");
boxSize16CellType.boxSize(16);
sheet2.setCellType(6, 3, boxSize16CellType);
var boxSize20CellType = new spreadNS.CellTypes.CheckBox();
boxSize20CellType.textTrue("Size 20");
boxSize20CellType.textFalse("Size 20");
boxSize20CellType.boxSize(20);
sheet2.setCellType(6, 4, boxSize20CellType);
var boxSize24CellType = new spreadNS.CellTypes.CheckBox();
boxSize24CellType.textTrue("Size 24");
boxSize24CellType.textFalse("Size 24");
boxSize24CellType.boxSize(24);
sheet2.setCellType(6, 5, boxSize24CellType);
var boxSizeAutoCellType = new spreadNS.CellTypes.CheckBox();
boxSizeAutoCellType.textTrue("Auto Size");
boxSizeAutoCellType.textFalse("Auto Size");
boxSizeAutoCellType.boxSize("auto");
sheet2.setCellType(6, 6, boxSizeAutoCellType);
sheet2.resumePaint();
}
initModernSheet = () => {
var spread = this.spread;
var sheet = spread.getSheet(2);
sheet.name("Modern");
sheet.defaults.colWidth = 190;
sheet.defaults.rowHeight = 60;
sheet.suspendPaint();
sheet.bind(spreadNS.Events.SelectionChanged, () => {
this.propertyChange(spread, false);
});
sheet.setColumnWidth(0, 110);
sheet.setColumnWidth(1, 190);
sheet.setColumnWidth(2, 145);
sheet.setColumnWidth(3, 170);
for (let i = 4; i < 7; i++) {
sheet.setColumnWidth(i, 130);
}
for (let i = 0; i < 8; i++) {
sheet.setRowHeight(i, 60);
}
sheet.addSpan(0, 0, 8, 1);
sheet.setValue(0, 0, "Modern Mode");
sheet.setStyle(0, 0, this.initCellStyle(11, "Accent 1"));
sheet.setStyle(0, 1, this.initCellStyle(11, "Accent 6"));
sheet.setStyle(1, 1, this.initCellStyle(11, "#FF0000"));
sheet.setStyle(2, 1, this.initCellStyle(11, "Accent 5"));
sheet.setStyle(3, 1, this.initCellStyle(11, "Accent 4"));
sheet.setStyle(4, 1, this.initCellStyle(11, "Accent 2"));
sheet.setStyle(5, 1, this.initCellStyle(11, "Accent 3"));
sheet.setStyle(6, 1, this.initCellStyle(11, "Accent 1"));
sheet.setStyle(7, 1, this.initCellStyle(11, "Accent 2"));
sheet.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 8; i++) {
for (let j = 1; j < 7; j++) {
sheet.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
// Row 0: Caption
sheet.setValue(0, 1, "Caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.mode("modern");
captionCellType.caption("Caption");
sheet.setCellType(0, 2, captionCellType);
// Row 1: Three State
sheet.setValue(1, 1, "Three State");
// Two-state checked
var twoStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateCheckedCellType.mode("modern");
twoStateCheckedCellType.isThreeState(false);
twoStateCheckedCellType.textTrue("Checked");
twoStateCheckedCellType.textFalse("Unchecked");
sheet.setCellType(1, 2, twoStateCheckedCellType);
sheet.setValue(1, 2, true);
// Two-state unchecked
var twoStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateUncheckedCellType.mode("modern");
twoStateUncheckedCellType.isThreeState(false);
twoStateUncheckedCellType.textTrue("Checked");
twoStateUncheckedCellType.textFalse("Unchecked");
sheet.setCellType(1, 3, twoStateUncheckedCellType);
sheet.setValue(1, 3, false);
// Three-state checked
var threeStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateCheckedCellType.mode("modern");
threeStateCheckedCellType.isThreeState(true);
threeStateCheckedCellType.textTrue("Checked");
threeStateCheckedCellType.textFalse("Unchecked");
threeStateCheckedCellType.textIndeterminate("Indeterminate");
sheet.setCellType(1, 4, threeStateCheckedCellType);
sheet.setValue(1, 4, true);
// Three-state unchecked
var threeStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateUncheckedCellType.mode("modern");
threeStateUncheckedCellType.isThreeState(true);
threeStateUncheckedCellType.textTrue("Checked");
threeStateUncheckedCellType.textFalse("Unchecked");
threeStateUncheckedCellType.textIndeterminate("Indeterminate");
sheet.setCellType(1, 5, threeStateUncheckedCellType);
sheet.setValue(1, 5, false);
// Three-state indeterminate
var threeStateIndeterminateCellType = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminateCellType.mode("modern");
threeStateIndeterminateCellType.isThreeState(true);
threeStateIndeterminateCellType.textTrue("Checked");
threeStateIndeterminateCellType.textFalse("Unchecked");
threeStateIndeterminateCellType.textIndeterminate("Indeterminate");
sheet.setCellType(1, 6, threeStateIndeterminateCellType);
sheet.setValue(1, 6, null);
// Row 2: Text Align
sheet.setValue(2, 1, "Text Align");
var textAlignTopCellType = new spreadNS.CellTypes.CheckBox();
textAlignTopCellType.mode("modern");
textAlignTopCellType.caption("Top");
textAlignTopCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet.setCellType(2, 2, textAlignTopCellType);
var textAlignBottomCellType = new spreadNS.CellTypes.CheckBox();
textAlignBottomCellType.mode("modern");
textAlignBottomCellType.caption("Bottom");
textAlignBottomCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet.setCellType(2, 3, textAlignBottomCellType);
var textAlignLeftCellType = new spreadNS.CellTypes.CheckBox();
textAlignLeftCellType.mode("modern");
textAlignLeftCellType.caption("Left");
textAlignLeftCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet.setCellType(2, 4, textAlignLeftCellType);
var textAlignRightCellType = new spreadNS.CellTypes.CheckBox();
textAlignRightCellType.mode("modern");
textAlignRightCellType.caption("Right");
textAlignRightCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet.setCellType(2, 5, textAlignRightCellType);
// Row 3: Text Wrap
sheet.setValue(3, 1, "Text Wrap");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.mode("modern");
textWrapCellType.caption("This is a long long text");
sheet.setCellType(3, 2, textWrapCellType);
sheet.getCell(3, 2).wordWrap(true);
// Row 4: Hit Test Mode
sheet.setValue(4, 1, "Hit Test Mode");
var hitTestCellCellType = new spreadNS.CellTypes.CheckBox();
hitTestCellCellType.mode("modern");
hitTestCellCellType.hitTestMode("cell");
hitTestCellCellType.caption("Click cell");
sheet.setCellType(4, 2, hitTestCellCellType);
var hitTestCheckboxCellType = new spreadNS.CellTypes.CheckBox();
hitTestCheckboxCellType.mode("modern");
hitTestCheckboxCellType.hitTestMode("checkbox");
hitTestCheckboxCellType.caption("Only click checkbox");
sheet.setCellType(4, 3, hitTestCheckboxCellType);
// Row 5: Text Editable
sheet.setValue(5, 1, "Text Editable");
var textEditableTrueCellType = new spreadNS.CellTypes.CheckBox();
textEditableTrueCellType.mode("modern");
textEditableTrueCellType.textEditable(true);
textEditableTrueCellType.caption("Can enter edit mode");
sheet.setCellType(5, 2, textEditableTrueCellType);
var textEditableFalseCellType = new spreadNS.CellTypes.CheckBox();
textEditableFalseCellType.mode("modern");
textEditableFalseCellType.textEditable(false);
textEditableFalseCellType.caption("Cannot enter edit mode");
sheet.setCellType(5, 3, textEditableFalseCellType);
// Row 6: Box Size
sheet.setValue(6, 1, "Box Size");
var boxSize10CellType = new spreadNS.CellTypes.CheckBox();
boxSize10CellType.mode("modern");
boxSize10CellType.textTrue("Size 10");
boxSize10CellType.textFalse("Size 10");
boxSize10CellType.boxSize(10);
sheet.setCellType(6, 2, boxSize10CellType);
var boxSize16CellType = new spreadNS.CellTypes.CheckBox();
boxSize16CellType.mode("modern");
boxSize16CellType.textTrue("Size 16");
boxSize16CellType.textFalse("Size 16");
boxSize16CellType.boxSize(16);
sheet.setCellType(6, 3, boxSize16CellType);
var boxSize20CellType = new spreadNS.CellTypes.CheckBox();
boxSize20CellType.mode("modern");
boxSize20CellType.textTrue("Size 20");
boxSize20CellType.textFalse("Size 20");
boxSize20CellType.boxSize(20);
sheet.setCellType(6, 4, boxSize20CellType);
var boxSize24CellType = new spreadNS.CellTypes.CheckBox();
boxSize24CellType.mode("modern");
boxSize24CellType.textTrue("Size 24");
boxSize24CellType.textFalse("Size 24");
boxSize24CellType.boxSize(24);
sheet.setCellType(6, 5, boxSize24CellType);
var boxSizeAutoCellType = new spreadNS.CellTypes.CheckBox();
boxSizeAutoCellType.mode("modern");
boxSizeAutoCellType.textTrue("Auto Size");
boxSizeAutoCellType.textFalse("Auto Size");
boxSizeAutoCellType.boxSize("auto");
sheet.setCellType(6, 6, boxSizeAutoCellType);
// Row 7: Color
sheet.setValue(7, 1, "Color");
var colorDefaultCellType = new spreadNS.CellTypes.CheckBox();
colorDefaultCellType.mode("modern");
colorDefaultCellType.textTrue("Default");
colorDefaultCellType.textFalse("Default");
sheet.setCellType(7, 2, colorDefaultCellType);
var colorRedCellType = new spreadNS.CellTypes.CheckBox();
colorRedCellType.mode("modern");
colorRedCellType.textTrue("Red");
colorRedCellType.textFalse("Red");
sheet.setCellType(7, 3, colorRedCellType);
sheet.getCell(7, 3).foreColor("red");
var colorBlueCellType = new spreadNS.CellTypes.CheckBox();
colorBlueCellType.mode("modern");
colorBlueCellType.textTrue("Blue");
colorBlueCellType.textFalse("Blue");
sheet.setCellType(7, 4, colorBlueCellType);
sheet.getCell(7, 4).foreColor("blue");
var colorGreenCellType = new spreadNS.CellTypes.CheckBox();
colorGreenCellType.mode("modern");
colorGreenCellType.textTrue("Green");
colorGreenCellType.textFalse("Green");
sheet.setCellType(7, 5, colorGreenCellType);
sheet.getCell(7, 5).foreColor("green");
sheet.resumePaint();
}
initCheckboxUsageSheet = () => {
var spread = this.spread;
var sheet = spread.getSheet(3);
sheet.name("Checkbox Usage");
sheet.suspendPaint();
// Define tasks data
var tasks = [
{ task: "Homepage", plan: true, design: true, dev: true, test: true, deploy: true },
{ task: "Product Page", plan: true, design: true, dev: true, test: false, deploy: false },
{ task: "Checkout", plan: true, design: true, dev: false, test: false, deploy: false },
{ task: "User Profile", plan: true, design: false, dev: false, test: false, deploy: false },
{ task: "Admin Panel", plan: false, design: false, dev: false, test: false, deploy: false },
{ task: "API Gateway", plan: true, design: true, dev: true, test: true, deploy: false }
];
// Set column widths
sheet.setColumnWidth(0, 200); // Task
sheet.setColumnWidth(1, 80); // Plan
sheet.setColumnWidth(2, 80); // Design
sheet.setColumnWidth(3, 80); // Dev
sheet.setColumnWidth(4, 80); // Test
sheet.setColumnWidth(5, 80); // Deploy
sheet.setColumnWidth(6, 120); // Progress
sheet.setColumnWidth(7, 100); // Status
// Set row heights
sheet.setRowHeight(0, 40);
sheet.setRowHeight(1, 30);
for (var i = 2; i < 8; i++) {
sheet.setRowHeight(i, 35);
}
// Header row (row 0) - "Task Progress Tracker"
sheet.addSpan(0, 0, 1, 8);
sheet.setValue(0, 0, "Task Progress Tracker");
var headerStyle = new spreadNS.Style();
headerStyle.backColor = "#2E5090";
headerStyle.foreColor = "#FFFFFF";
headerStyle.hAlign = spreadNS.HorizontalAlign.center;
headerStyle.vAlign = spreadNS.VerticalAlign.center;
headerStyle.font = "bold 14pt Calibri";
sheet.setStyle(0, 0, headerStyle);
// Column header row (row 1)
var columnHeaders = ["Task", "Plan", "Design", "Dev", "Test", "Deploy", "Progress", "Status"];
var columnHeaderStyle = new spreadNS.Style();
columnHeaderStyle.backColor = "#4472C4";
columnHeaderStyle.foreColor = "#FFFFFF";
columnHeaderStyle.hAlign = spreadNS.HorizontalAlign.center;
columnHeaderStyle.vAlign = spreadNS.VerticalAlign.center;
columnHeaderStyle.font = "bold 11pt Calibri";
for (var col = 0; col < columnHeaders.length; col++) {
sheet.setValue(1, col, columnHeaders[col]);
sheet.setStyle(1, col, columnHeaderStyle);
}
// Create checkbox cell type
var checkboxCellType = new spreadNS.CellTypes.CheckBox();
checkboxCellType.mode("modern");
checkboxCellType.textTrue("");
checkboxCellType.textFalse("");
checkboxCellType.textEditable(false);
// Center align style for all cells
var centerStyle = new spreadNS.Style();
centerStyle.hAlign = spreadNS.HorizontalAlign.center;
centerStyle.vAlign = spreadNS.VerticalAlign.center;
// Populate data rows
for (var i = 0; i < tasks.length; i++) {
var rowIndex = i + 2; // Data starts at row 2
var task = tasks[i];
// Column 0: Task name (set value and alignment)
sheet.setValue(rowIndex, 0, task.task);
sheet.getCell(rowIndex, 0).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 0).vAlign(spreadNS.VerticalAlign.center);
// Columns 1-5: Checkboxes (Plan, Design, Dev, Test, Deploy)
var checkboxColumns = [
{ col: 1, value: task.plan },
{ col: 2, value: task.design },
{ col: 3, value: task.dev },
{ col: 4, value: task.test },
{ col: 5, value: task.deploy }
];
for (var j = 0; j < checkboxColumns.length; j++) {
sheet.setCellType(rowIndex, checkboxColumns[j].col, checkboxCellType);
sheet.setValue(rowIndex, checkboxColumns[j].col, checkboxColumns[j].value);
// Use getCell() to avoid overwriting CellType
sheet.getCell(rowIndex, checkboxColumns[j].col).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, checkboxColumns[j].col).vAlign(spreadNS.VerticalAlign.center);
}
// Column 6: Progress (use formula to calculate automatically)
var progressFormula = "=COUNTIF(B" + (rowIndex + 1) + ":F" + (rowIndex + 1) + ",TRUE)/5";
sheet.setFormula(rowIndex, 6, progressFormula);
sheet.getCell(rowIndex, 6).formatter("0%");
sheet.getCell(rowIndex, 6).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getCell(rowIndex, 6).vAlign(GC.Spread.Sheets.VerticalAlign.center);
// Add data bar for Progress column
var progressRule = new spreadNS.ConditionalFormatting.DataBarRule();
progressRule.ranges([new spreadNS.Range(rowIndex, 6, 1, 1)]);
progressRule.minType(spreadNS.ConditionalFormatting.ScaleValueType.number);
progressRule.minValue(0);
progressRule.maxType(spreadNS.ConditionalFormatting.ScaleValueType.number);
progressRule.maxValue(1);
progressRule.color("#D9D9D9");
progressRule.showBorder(false);
progressRule.showBarOnly(false);
progressRule.gradient(false);
sheet.conditionalFormats.addRule(progressRule);
// Column 7: Status (use formula to calculate automatically based on Progress)
var statusFormula = '=IF(G' + (rowIndex + 1) + '=1,"Complete",' +
'IF(G' + (rowIndex + 1) + '>=0.8,"Near Done",' +
'IF(G' + (rowIndex + 1) + '>=0.6,"Active",' +
'IF(G' + (rowIndex + 1) + '>=0.4,"In Progress",' +
'IF(G' + (rowIndex + 1) + '>=0.2,"Started","Pending")))))';
sheet.setFormula(rowIndex, 7, statusFormula);
sheet.getCell(rowIndex, 7).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 7).vAlign(spreadNS.VerticalAlign.center);
}
// Set up conditional formatting for background colors based on Progress column
for (var i = 0; i < tasks.length; i++) {
var rowIndex = i + 2;
var progressCell = "$G" + (rowIndex + 1);
var ranges = [new spreadNS.Range(rowIndex, 0, 1, 8)];
var ruleDefault = new spreadNS.ConditionalFormatting.NormalConditionRule();
ruleDefault.ranges(ranges);
ruleDefault.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
ruleDefault.formula(progressCell + "<0.2");
ruleDefault.style(new spreadNS.Style());
ruleDefault.style().backColor = "#F0F0F0";
ruleDefault.style().foreColor = "#757575";
sheet.conditionalFormats.addRule(ruleDefault);
var rule20 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule20.ranges(ranges);
rule20.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule20.formula(progressCell + ">=0.2");
rule20.style(new spreadNS.Style());
rule20.style().backColor = "#FFCDD2";
rule20.style().foreColor = "#D32F2F";
sheet.conditionalFormats.addRule(rule20);
var rule40 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule40.ranges(ranges);
rule40.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule40.formula(progressCell + ">=0.4");
rule40.style(new spreadNS.Style());
rule40.style().backColor = "#FFE0B2";
rule40.style().foreColor = "#E65100";
sheet.conditionalFormats.addRule(rule40);
var rule60 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule60.ranges(ranges);
rule60.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule60.formula(progressCell + ">=0.6");
rule60.style(new spreadNS.Style());
rule60.style().backColor = "#FFF9C4";
rule60.style().foreColor = "#F57F17";
sheet.conditionalFormats.addRule(rule60);
var rule80 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule80.ranges(ranges);
rule80.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule80.formula(progressCell + ">=0.8");
rule80.style(new spreadNS.Style());
rule80.style().backColor = "#C8E6C9";
rule80.style().foreColor = "#2E7D32";
sheet.conditionalFormats.addRule(rule80);
}
sheet.resumePaint();
}
exportToExcel() {
const fileName = "CheckboxDemo.xlsx";
this.spread.export((blob) => {
saveAs(blob, fileName);
}, (error) => {
console.error("Export error:", error);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
}
}
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>{this.state.panelDescription}</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" value={this.state.boxSize} 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="hittest-mode-options" style={{display: this.state.mode === 'hitTestMode' ? 'block' : 'none'}}>
<div class="option-row">
<label>hitTestMode:</label>
<select id="hitTestMode" value={this.state.hitTestMode} onChange={(e) => { this.setState({ hitTestMode: e.target.value }); }}>
<option value="cell">cell</option>
<option value="checkbox">checkbox</option>
</select>
</div>
</div>
<div class="text-editable-options" style={{display: this.state.mode === 'textEditable' ? 'block' : 'none'}}>
<div class="option-row">
<input id="textEditable" type="checkbox" checked={this.state.textEditable} onChange={(e) => { this.setState({ textEditable: e.target.checked }); }} />
<label for="textEditable">textEditable:</label>
</div>
</div>
<div class="box-size-options" style={{display: this.state.mode === 'boxSize' ? 'block' : 'none'}}>
<div class="option-row">
<label for="txtBoxSize">boxSize:</label>
<input id="txtBoxSize" type="text" value={this.state.boxSize} onChange={(e) => { this.setState({ boxSize: e.target.value }); }} />
</div>
<div class="option-row">
<label for="txtBoxSizeCaption">caption:</label>
<input id="txtBoxSizeCaption" type="text" value={this.state.caption} onChange={(e) => { this.setState({ caption: e.target.value }); }} />
</div>
</div>
<div class="color-options" style={{display: this.state.mode === 'color' ? 'block' : 'none'}}>
<div class="option-row">
<label for="txtColorCaption">caption:</label>
<input id="txtColorCaption" type="text" value={this.state.caption} onChange={(e) => { this.setState({ caption: e.target.value }); }} />
</div>
<div class="option-row">
<label for="txtForeColor">foreColor:</label>
<input id="txtForeColor" type="text" value={this.state.foreColor} onChange={(e) => { this.setState({ foreColor: e.target.value }); }} />
</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>
{this.state.mode !== null && (
<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 class="option-row">
<input type="button" id="exportExcel" value="Export to Excel" onClick={this.props.exportToExcel} />
</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">
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<!-- 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/',
'cdn:': 'https://cdn.mescius.io/demoapps/packages/spreadjs/19.1.2-master-2026-06-10-2131/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'cdn:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-io': 'cdn:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-react': 'cdn:@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);
