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.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<label>{{ panelDescription }}</label>
<div class="checkbox-options" v-if="mode === 'checkbox'">
<div class="option-row" v-if="hasCaption === null || hasCaption">
<label for="caption">caption:</label>
<input id="caption" type="text" v-model="caption" />
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<label for="textTrue">textTrue:</label>
<input id="textTrue" type="text" v-model="textTrue" />
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<label for="textIndeterminate">textIndeterminate(for 3-state option):</label>
<input id="textIndeterminate" type="text" v-model="textIndeterminate" />
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<label for="textFalse">textFalse:</label>
<input id="textFalse" type="text" v-model="textFalse" />
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<label for="boxSize">boxSize:</label>
<input id="boxSize" type="text" v-model="boxSize" />
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="textAlign" v-model="textAlign">
<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" v-if="hasCaption === null || !hasCaption">
<input id="isThreeState" type="checkbox" v-model="isThreeState" />
<label for="isThreeState">isThreeState:</label>
</div>
</div>
<div class="hittest-mode-options" v-if="mode === 'hitTestMode'">
<div class="option-row">
<label>hitTestMode:</label>
<select id="hitTestMode" v-model="hitTestMode">
<option value="cell">cell</option>
<option value="checkbox">checkbox</option>
</select>
</div>
</div>
<div class="text-editable-options" v-if="mode === 'textEditable'">
<div class="option-row">
<input id="textEditable" type="checkbox" v-model="textEditable" />
<label for="textEditable">textEditable:</label>
</div>
</div>
<div class="boxsize-options" v-if="mode === 'boxSize'">
<div class="option-row">
<label for="txtBoxSize">boxSize:</label>
<input id="txtBoxSize" type="text" v-model="boxSizeValue" />
</div>
<div class="option-row">
<label for="txtBoxSizeCaption">caption:</label>
<input id="txtBoxSizeCaption" type="text" v-model="boxSizeCaption" />
</div>
</div>
<div class="color-options" v-if="mode === 'color'">
<div class="option-row">
<label for="txtColorCaption">caption:</label>
<input id="txtColorCaption" type="text" v-model="colorCaption" />
</div>
<div class="option-row">
<label for="txtForeColor">foreColor:</label>
<input id="txtForeColor" type="text" v-model="foreColor" />
</div>
</div>
<div class="toggle-options" v-if="mode === 'toggle'">
<div class="option-row">
<label>caption:</label>
<input type="text" id="toggleCheckBoxCellTextCaption" v-model="caption" />
</div>
<div class="option-row">
<label>textTrue:</label>
<input type="text" id="toggleCheckBoxCellTextTrue" v-model="textTrue" />
</div>
<div class="option-row">
<label>textFalse:</label>
<input type="text" id="toggleCheckBoxCellTextFalse" v-model="textFalse" />
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="selToggleCheckBoxCellAlign" v-model="textAlign">
<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" v-model="autoSize" />
autoSize
</label>
</div>
<div class="option-row" :class="{ 'disabled': autoSize }">
<label>width:</label>
<input type="text" id="toggleCheckBoxCellWidth" v-model="width" />
</div>
<div class="option-row" :class="{ 'disabled': autoSize }">
<label>height:</label>
<input type="text" id="toggleCheckBoxCellHeight" v-model="height" />
</div>
<div class="option-row">
<label>sliderMargin:</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" v-model="sliderMargin" />
</div>
<div class="option-row">
<label>sliderRadius:</label>
<input type="text" id="toggleCheckBoxCellSliderRadius" v-model="sliderRadius" />
</div>
<div class="option-row">
<label>trackRadius:</label>
<input type="text" id="toggleCheckBoxCellTrackRadius" v-model="trackRadius" />
</div>
<div class="option-row">
<label>sliderColorOn:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" v-model="sliderColorOn" />
</div>
<div class="option-row">
<label>sliderColorOff:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" v-model="sliderColorOff" />
</div>
<div class="option-row">
<label>trackColorOn:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" v-model="trackColorOn" />
</div>
<div class="option-row">
<label>trackColorOff:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" v-model="trackColorOff" />
</div>
<div class="option-row">
<label>animationDuration:</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" v-model="animationDuration" />
</div>
</div>
<div class="option-row" v-if="mode !== null">
<input type="button" id="setProperty" value="Update" :disabled="disabled" @click="propertyChange($event, true)" />
</div>
<div class="option-row">
<input type="button" id="exportExcel" value="Export to Excel" @click="exportToExcel" />
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue'
import '@mescius/spread-sheets-io'
import { ref } from 'vue';
import GC from '@mescius/spread-sheets';
const spreadNS = GC.Spread.Sheets;
const caption = ref('');
const textTrue = ref('textTrue');
const textIndeterminate = ref('textIndeterminate');
const textFalse = ref('textFalse');
const textAlign = ref('0'); // 默认值为 'top'
const isThreeState = ref(true);
const disabled = ref(false);
const hasCaption = ref(null);
const spread = ref(null);
const boxSize = ref(12);
const mode = ref('checkbox');
const width = ref(40);
const height = ref(20);
const sliderMargin = ref(2);
const sliderRadius = ref(null);
const trackRadius = ref(null);
const trackColorOn = ref('#8cbae8');
const trackColorOff = ref('#9e9e9e');
const sliderColorOn = ref('#1565c0');
const sliderColorOff = ref('#ffffff');
const animationDuration = ref(200);
const autoSize = ref(false);
const hitTestMode = ref('cell');
const textEditable = ref(true);
const boxSizeValue = ref('auto');
const boxSizeCaption = ref('');
const colorCaption = ref('');
const foreColor = ref('');
const panelDescription = ref('Select the check box cell in Spread and edit its options with these text boxes.');
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 initSpread = (spreadInstance) => {
spread.value = spreadInstance;
initToggleSheet(spread);
initCheckboxSheet(spread);
initModernSheet(spread);
initCheckboxUsageSheet(spread);
spread.value.bind(spreadNS.Events.ActiveSheetChanged, function() {
const sheet = spread.value.getActiveSheet();
const sheetName = sheet.name();
if (sheetName === "Checkbox Usage") {
panelDescription.value = "Export the current workbook to an Excel file.";
mode.value = null;
disabled.value = true;
} else {
panelDescription.value = "Select the check box cell in Spread and edit its options with these text boxes.";
propertyChange(null, false);
}
});
};
const initToggleSheet = () => {
var sheet1 = spread.value.getSheet(0);
sheet1.name("Toggle");
sheet1.defaults.colWidth = 190;
sheet1.defaults.rowHeight = 60;
sheet1.suspendPaint();
sheet1.bind(spreadNS.Events.SelectionChanged, (e) => {
propertyChange(e);
});
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.value.getSheet(1);
sheet2.name("Checkbox");
sheet2.defaults.colWidth = 190;
sheet2.defaults.rowHeight = 60;
sheet2.suspendPaint();
sheet2.bind(spreadNS.Events.SelectionChanged, (e) => {
propertyChange(e);
});
sheet2.setColumnWidth(0, 110);
sheet2.setColumnWidth(1, 190);
sheet2.setColumnWidth(2, 145);
sheet2.setColumnWidth(3, 170);
sheet2.setColumnWidth(4, 130);
sheet2.setColumnWidth(5, 130);
sheet2.setColumnWidth(6, 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, "Accent 1"));
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 < 7; 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 - 5 examples
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 - 4 examples
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 - 2 examples
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 - 2 examples
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 - 5 examples
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 sheet = spread.value.getSheet(2);
sheet.name("Modern");
sheet.defaults.colWidth = 190;
sheet.defaults.rowHeight = 60;
sheet.suspendPaint();
sheet.bind(spreadNS.Events.SelectionChanged, (e) => {
propertyChange(e);
});
sheet.setColumnWidth(0, 110);
sheet.setColumnWidth(1, 190);
sheet.setColumnWidth(2, 145);
sheet.setColumnWidth(3, 170);
sheet.setColumnWidth(4, 130);
sheet.setColumnWidth(5, 130);
sheet.setColumnWidth(6, 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, initCellStyle(11, "Accent 1"));
sheet.setStyle(0, 1, initCellStyle(11, "Accent 6"));
sheet.setStyle(1, 1, initCellStyle(11, "#FF0000"));
sheet.setStyle(2, 1, initCellStyle(11, "Accent 5"));
sheet.setStyle(3, 1, initCellStyle(11, "Accent 4"));
sheet.setStyle(4, 1, initCellStyle(11, "Accent 2"));
sheet.setStyle(5, 1, initCellStyle(11, "Accent 3"));
sheet.setStyle(6, 1, initCellStyle(11, "Accent 1"));
sheet.setStyle(7, 1, 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.caption("Caption");
captionCellType.mode("modern");
sheet.setCellType(0, 2, captionCellType);
// Row 1: Three State - 5 examples
sheet.setValue(1, 1, "Three State");
// Two state - checked
var twoStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateCheckedCellType.isThreeState(false);
twoStateCheckedCellType.textTrue("Checked");
twoStateCheckedCellType.textFalse("Unchecked");
twoStateCheckedCellType.mode("modern");
sheet.setCellType(1, 2, twoStateCheckedCellType);
sheet.setValue(1, 2, true);
// Two state - unchecked
var twoStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateUncheckedCellType.isThreeState(false);
twoStateUncheckedCellType.textTrue("Checked");
twoStateUncheckedCellType.textFalse("Unchecked");
twoStateUncheckedCellType.mode("modern");
sheet.setCellType(1, 3, twoStateUncheckedCellType);
sheet.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");
threeStateCheckedCellType.mode("modern");
sheet.setCellType(1, 4, threeStateCheckedCellType);
sheet.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");
threeStateUncheckedCellType.mode("modern");
sheet.setCellType(1, 5, threeStateUncheckedCellType);
sheet.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");
threeStateIndeterminateCellType.mode("modern");
sheet.setCellType(1, 6, threeStateIndeterminateCellType);
sheet.setValue(1, 6, null);
// Row 2: Text Align - 4 examples
sheet.setValue(2, 1, "Text Align");
var textAlignTopCellType = new spreadNS.CellTypes.CheckBox();
textAlignTopCellType.caption("Top");
textAlignTopCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
textAlignTopCellType.mode("modern");
sheet.setCellType(2, 2, textAlignTopCellType);
var textAlignBottomCellType = new spreadNS.CellTypes.CheckBox();
textAlignBottomCellType.caption("Bottom");
textAlignBottomCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
textAlignBottomCellType.mode("modern");
sheet.setCellType(2, 3, textAlignBottomCellType);
var textAlignLeftCellType = new spreadNS.CellTypes.CheckBox();
textAlignLeftCellType.caption("Left");
textAlignLeftCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
textAlignLeftCellType.mode("modern");
sheet.setCellType(2, 4, textAlignLeftCellType);
var textAlignRightCellType = new spreadNS.CellTypes.CheckBox();
textAlignRightCellType.caption("Right");
textAlignRightCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
textAlignRightCellType.mode("modern");
sheet.setCellType(2, 5, textAlignRightCellType);
// Row 3: Text Wrap
sheet.setValue(3, 1, "Text Wrap");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.caption("This is a long long text");
textWrapCellType.mode("modern");
sheet.setCellType(3, 2, textWrapCellType);
sheet.getCell(3, 2).wordWrap(true);
// Row 4: Hit Test Mode - 2 examples
sheet.setValue(4, 1, "Hit Test Mode");
var hitTestCellCellType = new spreadNS.CellTypes.CheckBox();
hitTestCellCellType.hitTestMode("cell");
hitTestCellCellType.caption("Click cell");
hitTestCellCellType.mode("modern");
sheet.setCellType(4, 2, hitTestCellCellType);
var hitTestCheckboxCellType = new spreadNS.CellTypes.CheckBox();
hitTestCheckboxCellType.hitTestMode("checkbox");
hitTestCheckboxCellType.caption("Only click checkbox");
hitTestCheckboxCellType.mode("modern");
sheet.setCellType(4, 3, hitTestCheckboxCellType);
// Row 5: Text Editable - 2 examples
sheet.setValue(5, 1, "Text Editable");
var textEditableTrueCellType = new spreadNS.CellTypes.CheckBox();
textEditableTrueCellType.textEditable(true);
textEditableTrueCellType.caption("Can enter edit mode");
textEditableTrueCellType.mode("modern");
sheet.setCellType(5, 2, textEditableTrueCellType);
var textEditableFalseCellType = new spreadNS.CellTypes.CheckBox();
textEditableFalseCellType.textEditable(false);
textEditableFalseCellType.caption("Cannot enter edit mode");
textEditableFalseCellType.mode("modern");
sheet.setCellType(5, 3, textEditableFalseCellType);
// Row 6: Box Size - 5 examples
sheet.setValue(6, 1, "Box Size");
var boxSize10CellType = new spreadNS.CellTypes.CheckBox();
boxSize10CellType.textTrue("Size 10");
boxSize10CellType.textFalse("Size 10");
boxSize10CellType.boxSize(10);
boxSize10CellType.mode("modern");
sheet.setCellType(6, 2, boxSize10CellType);
var boxSize16CellType = new spreadNS.CellTypes.CheckBox();
boxSize16CellType.textTrue("Size 16");
boxSize16CellType.textFalse("Size 16");
boxSize16CellType.boxSize(16);
boxSize16CellType.mode("modern");
sheet.setCellType(6, 3, boxSize16CellType);
var boxSize20CellType = new spreadNS.CellTypes.CheckBox();
boxSize20CellType.textTrue("Size 20");
boxSize20CellType.textFalse("Size 20");
boxSize20CellType.boxSize(20);
boxSize20CellType.mode("modern");
sheet.setCellType(6, 4, boxSize20CellType);
var boxSize24CellType = new spreadNS.CellTypes.CheckBox();
boxSize24CellType.textTrue("Size 24");
boxSize24CellType.textFalse("Size 24");
boxSize24CellType.boxSize(24);
boxSize24CellType.mode("modern");
sheet.setCellType(6, 5, boxSize24CellType);
var boxSizeAutoCellType = new spreadNS.CellTypes.CheckBox();
boxSizeAutoCellType.textTrue("Auto Size");
boxSizeAutoCellType.textFalse("Auto Size");
boxSizeAutoCellType.boxSize("auto");
boxSizeAutoCellType.mode("modern");
sheet.setCellType(6, 6, boxSizeAutoCellType);
// Row 7: Color - 4 examples
sheet.setValue(7, 1, "Color");
var colorDefaultCellType = new spreadNS.CellTypes.CheckBox();
colorDefaultCellType.textTrue("Default");
colorDefaultCellType.textFalse("Default");
colorDefaultCellType.mode("modern");
sheet.setCellType(7, 2, colorDefaultCellType);
var colorRedCellType = new spreadNS.CellTypes.CheckBox();
colorRedCellType.textTrue("Red");
colorRedCellType.textFalse("Red");
colorRedCellType.mode("modern");
sheet.setCellType(7, 3, colorRedCellType);
sheet.getCell(7, 3).foreColor("red");
var colorBlueCellType = new spreadNS.CellTypes.CheckBox();
colorBlueCellType.textTrue("Blue");
colorBlueCellType.textFalse("Blue");
colorBlueCellType.mode("modern");
sheet.setCellType(7, 4, colorBlueCellType);
sheet.getCell(7, 4).foreColor("blue");
var colorGreenCellType = new spreadNS.CellTypes.CheckBox();
colorGreenCellType.textTrue("Green");
colorGreenCellType.textFalse("Green");
colorGreenCellType.mode("modern");
sheet.setCellType(7, 5, colorGreenCellType);
sheet.getCell(7, 5).foreColor("green");
sheet.resumePaint();
}
const initCheckboxUsageSheet = () => {
var sheet = spread.value.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 GC.Spread.Sheets.Style();
headerStyle.backColor = "#2E5090";
headerStyle.foreColor = "#FFFFFF";
headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
headerStyle.vAlign = GC.Spread.Sheets.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 GC.Spread.Sheets.Style();
columnHeaderStyle.backColor = "#4472C4";
columnHeaderStyle.foreColor = "#FFFFFF";
columnHeaderStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
columnHeaderStyle.vAlign = GC.Spread.Sheets.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.textTrue("");
checkboxCellType.textFalse("");
checkboxCellType.textEditable(false);
checkboxCellType.mode("modern");
// Center align style for all cells
var centerStyle = new GC.Spread.Sheets.Style();
centerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
centerStyle.vAlign = GC.Spread.Sheets.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
sheet.setValue(rowIndex, 0, task.task);
sheet.getCell(rowIndex, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getCell(rowIndex, 0).vAlign(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getCell(rowIndex, checkboxColumns[j].col).vAlign(GC.Spread.Sheets.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 GC.Spread.Sheets.ConditionalFormatting.DataBarRule();
progressRule.ranges([new GC.Spread.Sheets.Range(rowIndex, 6, 1, 1)]);
progressRule.minType(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.number);
progressRule.minValue(0);
progressRule.maxType(GC.Spread.Sheets.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(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getCell(rowIndex, 7).vAlign(GC.Spread.Sheets.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();
}
const exportToExcel = () => {
const fileName = "CheckboxDemo.xlsx";
spread.value.export((blob) => {
saveAs(blob, fileName);
}, (error) => {
console.error("Export error:", error);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
}
const propertyChange = (e, settings = false) => {
const sheet = spread.value.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)) {
disabled.value = true;
return;
}
// Hide all modes first
mode.value = null;
disabled.value = true;
// Check if this is Toggle sheet
if (sheet.name() === "Toggle") {
const checkboxMode = checkboxCellType.mode();
if (checkboxMode === 'toggle') {
mode.value = 'toggle';
disabled.value = false;
if (!settings) {
caption.value = checkboxCellType.caption();
textTrue.value = checkboxCellType.textTrue();
textFalse.value = checkboxCellType.textFalse();
textAlign.value = checkboxCellType.textAlign();
const toggleOptions = checkboxCellType.toggleOptions();
width.value = toggleOptions.width;
height.value = toggleOptions.height;
sliderMargin.value = toggleOptions.sliderMargin;
sliderRadius.value = toggleOptions.sliderRadius;
trackRadius.value = toggleOptions.trackRadius;
sliderColorOn.value = toggleOptions.sliderColorOn;
sliderColorOff.value = toggleOptions.sliderColorOff;
trackColorOn.value = toggleOptions.trackColorOn;
trackColorOff.value = toggleOptions.trackColorOff;
animationDuration.value = toggleOptions.animationDuration;
autoSize.value = toggleOptions.autoSize;
} else {
checkboxCellType.caption(caption.value);
checkboxCellType.textTrue(textTrue.value);
checkboxCellType.textFalse(textFalse.value);
checkboxCellType.textAlign(Number(textAlign.value));
const sliderRadiusValue = sliderRadius.value;
const trackRadiusValue = trackRadius.value;
const autoSizeValue = !!autoSize.value;
checkboxCellType.toggleOptions({
width: autoSizeValue ? null : (width.value - 0),
height: autoSizeValue ? null : (height.value - 0),
sliderMargin: sliderMargin.value - 0,
sliderRadius: sliderRadiusValue === '' ? null : (sliderRadiusValue - 0),
trackRadius: trackRadiusValue === '' ? null : (trackRadiusValue - 0),
sliderColorOn: sliderColorOn.value,
sliderColorOff: sliderColorOff.value,
trackColorOn: trackColorOn.value,
trackColorOff: trackColorOff.value,
animationDuration: animationDuration.value - 0,
autoSize: autoSizeValue,
});
}
} else {
mode.value = 'checkbox';
disabled.value = false;
if (!settings) {
if (checkboxCellType.caption()) {
hasCaption.value = true;
caption.value = checkboxCellType.caption();
} else {
hasCaption.value = false;
textTrue.value = checkboxCellType.textTrue();
textIndeterminate.value = checkboxCellType.textIndeterminate();
textFalse.value = checkboxCellType.textFalse();
isThreeState.value = checkboxCellType.isThreeState();
boxSize.value = checkboxCellType.boxSize();
}
textAlign.value = checkboxCellType.textAlign().toString();
} else {
if (checkboxCellType.caption()) {
checkboxCellType.caption(caption.value);
} else {
checkboxCellType.textTrue(textTrue.value);
checkboxCellType.textIndeterminate(textIndeterminate.value);
checkboxCellType.textFalse(textFalse.value);
checkboxCellType.isThreeState(isThreeState.value);
var boxSizeVal = Number(boxSize.value);
if (isNaN(boxSizeVal)) {
checkboxCellType.boxSize(boxSize.value);
} else {
checkboxCellType.boxSize(boxSizeVal);
}
}
checkboxCellType.textAlign(Number(textAlign.value));
}
}
sheet.repaint();
return;
}
// Check if this is Checkbox sheet - handle by row
if (sheet.name() === "Checkbox" || sheet.name() === "Modern") {
disabled.value = false;
switch (sel.row) {
case 0: // Caption
mode.value = 'checkbox';
if (!settings) {
hasCaption.value = true;
caption.value = checkboxCellType.caption();
textAlign.value = checkboxCellType.textAlign().toString();
} else {
checkboxCellType.caption(caption.value);
checkboxCellType.textAlign(Number(textAlign.value));
}
break;
case 1: // Three State
mode.value = 'checkbox';
if (!settings) {
hasCaption.value = false;
textTrue.value = checkboxCellType.textTrue();
textIndeterminate.value = checkboxCellType.textIndeterminate();
textFalse.value = checkboxCellType.textFalse();
isThreeState.value = checkboxCellType.isThreeState();
boxSize.value = checkboxCellType.boxSize();
textAlign.value = checkboxCellType.textAlign().toString();
} else {
checkboxCellType.textTrue(textTrue.value);
checkboxCellType.textIndeterminate(textIndeterminate.value);
checkboxCellType.textFalse(textFalse.value);
checkboxCellType.isThreeState(isThreeState.value);
var boxSizeVal = Number(boxSize.value);
if (isNaN(boxSizeVal)) {
checkboxCellType.boxSize(boxSize.value);
} else {
checkboxCellType.boxSize(boxSizeVal);
}
checkboxCellType.textAlign(Number(textAlign.value));
}
break;
case 2: // Text Align
mode.value = 'checkbox';
if (!settings) {
hasCaption.value = true;
caption.value = checkboxCellType.caption();
textAlign.value = checkboxCellType.textAlign().toString();
} else {
checkboxCellType.caption(caption.value);
checkboxCellType.textAlign(Number(textAlign.value));
}
break;
case 3: // Text Wrap
mode.value = 'checkbox';
if (!settings) {
hasCaption.value = true;
caption.value = checkboxCellType.caption();
textAlign.value = checkboxCellType.textAlign().toString();
} else {
checkboxCellType.caption(caption.value);
checkboxCellType.textAlign(Number(textAlign.value));
}
break;
case 4: // Hit Test Mode
mode.value = 'hitTestMode';
if (!settings) {
hitTestMode.value = checkboxCellType.hitTestMode();
} else {
checkboxCellType.hitTestMode(hitTestMode.value);
}
break;
case 5: // Text Editable
mode.value = 'textEditable';
if (!settings) {
textEditable.value = checkboxCellType.textEditable();
} else {
checkboxCellType.textEditable(textEditable.value);
}
break;
case 6: // Box Size
mode.value = 'boxSize';
if (!settings) {
boxSizeValue.value = checkboxCellType.boxSize();
boxSizeCaption.value = checkboxCellType.textTrue();
} else {
var boxSizeVal = Number(boxSizeValue.value);
if (isNaN(boxSizeVal)) {
checkboxCellType.boxSize(boxSizeValue.value);
} else {
checkboxCellType.boxSize(boxSizeVal);
}
checkboxCellType.textTrue(boxSizeCaption.value);
checkboxCellType.textFalse(boxSizeCaption.value);
}
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);
};
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'cdn:': 'https://cdn.mescius.io/demoapps/packages/spreadjs/19.1.2-master-2026-06-10-2131/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'cdn:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-io': 'cdn:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-resources-en': 'cdn:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'cdn:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
