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.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 4 });
initSpread(spread);
// Bind export button click event
document.getElementById("exportExcel").onclick = function() {
exportToExcel(spread);
};
};
function 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;
}
function propertyChange(spread, isSet) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getActiveSheet();
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
var checkboxCellType = sheet.getCellType(sel.row, sel.col);
if (!(checkboxCellType instanceof spreadNS.CellTypes.CheckBox)) {
_getElementById("changeProperty").setAttribute("disabled", 'disabled');
return;
}
// Check if this is the hitTestMode demo cell (row 4, col 2 or 3) on Checkbox or Modern sheet
var sheetName = sheet.name();
if ((sheetName === "Checkbox" || sheetName === "Modern") && sel.row === 4 && (sel.col === 2 || sel.col === 3)) {
_getElementById("checkboxOption").style.display = "none";
_getElementById("toggleOptions").style.display = "none";
_getElementById("hitTestModeOption").style.display = "block";
_getElementById("textEditableOption").style.display = "none";
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
_getElementById("selHitTestMode").value = checkboxCellType.hitTestMode();
} else {
checkboxCellType.hitTestMode(_getElementById("selHitTestMode").value);
// Update caption based on hitTestMode value
var hitTestMode = _getElementById("selHitTestMode").value;
if (hitTestMode === 'checkbox') {
checkboxCellType.caption("Only click checkbox");
} else {
checkboxCellType.caption("Click cell");
}
}
sheet.repaint();
return;
}
// Check if this is the textEditable demo cell (row 5, col 2 or 3) on Checkbox or Modern sheet
if ((sheetName === "Checkbox" || sheetName === "Modern") && sel.row === 5 && (sel.col === 2 || sel.col === 3)) {
_getElementById("checkboxOption").style.display = "none";
_getElementById("toggleOptions").style.display = "none";
_getElementById("hitTestModeOption").style.display = "none";
_getElementById("textEditableOption").style.display = "block";
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
_getElementById("ckbTextEditable").checked = checkboxCellType.textEditable();
} else {
checkboxCellType.textEditable(_getElementById("ckbTextEditable").checked);
// Update caption based on textEditable value
var textEditable = _getElementById("ckbTextEditable").checked;
if (textEditable) {
checkboxCellType.caption("Can enter edit mode");
} else {
checkboxCellType.caption("Cannot enter edit mode");
}
}
sheet.repaint();
return;
}
// Normal checkbox/toggle mode
_getElementById("hitTestModeOption").style.display = "none";
_getElementById("textEditableOption").style.display = "none";
const checkboxMode = checkboxCellType.mode();
if (checkboxMode === 'toggle') {
_getElementById("checkboxOption").style.display="none";
_getElementById("toggleOptions").style.display="block";
} else {
_getElementById("checkboxOption").style.display="block";
_getElementById("toggleOptions").style.display="none";
}
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
if (checkboxMode === 'toggle') {
_getElementById("toggleCheckBoxCellTextCaption").value = checkboxCellType.caption();
_getElementById("toggleCheckBoxCellTextTrue").value = checkboxCellType.textTrue();
_getElementById("toggleCheckBoxCellTextFalse").value = checkboxCellType.textFalse();
_getElementById("selToggleCheckBoxCellAlign").value = checkboxCellType.textAlign();
const toggleOptions = checkboxCellType.toggleOptions();
_getElementById("toggleCheckBoxCellWidth").value = toggleOptions.width;
_getElementById("toggleCheckBoxCellHeight").value = toggleOptions.height;
_getElementById("toggleCheckBoxCellSliderMargin").value = toggleOptions.sliderMargin;
_getElementById("toggleCheckBoxCellSliderRadius").value = toggleOptions.sliderRadius;
_getElementById("toggleCheckBoxCellTrackRadius").value = toggleOptions.trackRadius;
_getElementById("toggleCheckBoxCellSliderColorOn").value = toggleOptions.sliderColorOn;
_getElementById("toggleCheckBoxCellSliderColorOff").value = toggleOptions.sliderColorOff;
_getElementById("toggleCheckBoxCellTrackColorOn").value = toggleOptions.trackColorOn;
_getElementById("toggleCheckBoxCellTrackColorOff").value = toggleOptions.trackColorOff;
_getElementById("toggleCheckBoxCellAnimationDuration").value = toggleOptions.animationDuration;
_getElementById("toggleCheckBoxCellAutoSize").checked = toggleOptions.autoSize;
_getElementById("toggleCheckBoxCellWidth").classList.toggle("disabled", !!toggleOptions.autoSize);
_getElementById("toggleCheckBoxCellHeight").classList.toggle("disabled", !!toggleOptions.autoSize);
} else {
if(checkboxCellType.caption()) {
_getElementById("txtCheckBoxCellTextCaption").parentNode.style.display="block";
_getElementById("txtCheckBoxCellTextCaption").value=checkboxCellType.caption();
_getElementById("txtCheckBoxCellTextTrue").parentNode.style.display="none";
_getElementById("ckbCheckBoxCellIsThreeState").parentNode.style.display="none";
} else {
_getElementById("txtCheckBoxCellTextCaption").parentNode.style.display="none";
_getElementById("txtCheckBoxCellTextTrue").parentNode.style.display="block";
_getElementById("ckbCheckBoxCellIsThreeState").parentNode.style.display="block";
_getElementById("txtCheckBoxCellTextTrue").value=checkboxCellType.textTrue();
_getElementById("txtCheckBoxCellTextIndeterminate").value=checkboxCellType.textIndeterminate();
_getElementById("txtCheckBoxCellTextFalse").value=checkboxCellType.textFalse();
_getElementById("ckbCheckBoxCellIsThreeState").checked=checkboxCellType.isThreeState();
_getElementById("checkboxSize").value = checkboxCellType.boxSize();
}
_getElementById("selCheckBoxCellAlign").value=checkboxCellType.textAlign();
}
} else {
if (checkboxMode === 'toggle') {
checkboxCellType.caption(_getElementById("toggleCheckBoxCellTextCaption").value);
checkboxCellType.textTrue(_getElementById("toggleCheckBoxCellTextTrue").value);
checkboxCellType.textFalse(_getElementById("toggleCheckBoxCellTextFalse").value);
checkboxCellType.textAlign(_getElementById("selToggleCheckBoxCellAlign").value - 0);
const sliderRadius = _getElementById("toggleCheckBoxCellSliderRadius").value;
const trackRadius = _getElementById("toggleCheckBoxCellTrackRadius").value;
const autoSize = !!_getElementById("toggleCheckBoxCellAutoSize").checked;
checkboxCellType.toggleOptions({
width: autoSize ? null : (_getElementById("toggleCheckBoxCellWidth").value - 0),
height: autoSize ? null : (_getElementById("toggleCheckBoxCellHeight").value - 0),
sliderMargin: _getElementById("toggleCheckBoxCellSliderMargin").value - 0,
sliderRadius: sliderRadius === '' ? null : (sliderRadius - 0),
trackRadius: trackRadius === '' ? null : (trackRadius - 0),
sliderColorOn: _getElementById("toggleCheckBoxCellSliderColorOn").value,
sliderColorOff: _getElementById("toggleCheckBoxCellSliderColorOff").value,
trackColorOn: _getElementById("toggleCheckBoxCellTrackColorOn").value,
trackColorOff: _getElementById("toggleCheckBoxCellTrackColorOff").value,
animationDuration: _getElementById("toggleCheckBoxCellAnimationDuration").value - 0,
autoSize: autoSize,
});
} else {
if(checkboxCellType.caption()) {
checkboxCellType.caption(_getElementById("txtCheckBoxCellTextCaption").value);
} else {
checkboxCellType.textTrue(_getElementById("txtCheckBoxCellTextTrue").value);
checkboxCellType.textIndeterminate(_getElementById("txtCheckBoxCellTextIndeterminate").value);
checkboxCellType.textFalse(_getElementById("txtCheckBoxCellTextFalse").value);
checkboxCellType.isThreeState(_getElementById("ckbCheckBoxCellIsThreeState").checked);
var boxSizeValue = _getElementById("checkboxSize").value;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
}
checkboxCellType.textAlign(_getElementById("selCheckBoxCellAlign").value - 0);
}
}
}
sheet.repaint();
}
function getActualRange(range, maxRowCount, maxColCount) {
var spreadNS = GC.Spread.Sheets;
var row = range.row < 0 ? 0 : range.row;
var col = range.col < 0 ? 0 : range.col;
var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
var colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
initToggleSheet(spread);
initCheckboxSheet(spread);
initModernSheet(spread);
initCheckboxUsageSheet(spread);
_getElementById("changeProperty").addEventListener('click',function() {
propertyChange(spread, true);
});
spread.bind(spreadNS.Events.ActiveSheetChanged, function(e, args) {
var sheet = spread.getActiveSheet();
var sheetName = sheet.name();
if (sheetName === "Checkbox Usage") {
_getElementById("panelDescription").textContent = "Export the current workbook to an Excel file.";
_getElementById("checkboxOption").style.display = "none";
_getElementById("toggleOptions").style.display = "none";
_getElementById("hitTestModeOption").style.display = "none";
_getElementById("textEditableOption").style.display = "none";
_getElementById("boxSizeOption").style.display = "none";
_getElementById("colorOption").style.display = "none";
_getElementById("changeProperty").style.display = "none";
} else {
_getElementById("panelDescription").textContent = "Select the check box cell in Spread and edit its options with these text boxes.";
_getElementById("changeProperty").style.display = "block";
propertyChange(spread, false);
}
});
}
function initToggleSheet(spread) {
var spreadNS = GC.Spread.Sheets;
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();
_getElementById("toggleCheckBoxCellAutoSize").addEventListener('change', function(e) {
_getElementById("toggleCheckBoxCellWidth").classList.toggle("disabled", !!e.target.checked);
_getElementById("toggleCheckBoxCellHeight").classList.toggle("disabled", !!e.target.checked);
});
}
function initCheckboxSheet(spread) {
var spreadNS = GC.Spread.Sheets;
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);
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 twoStateChecked = new spreadNS.CellTypes.CheckBox();
twoStateChecked.isThreeState(false);
twoStateChecked.textTrue("Checked");
twoStateChecked.textFalse("Unchecked");
sheet2.setCellType(1, 2, twoStateChecked);
sheet2.setValue(1, 2, true);
// Two state - unchecked
var twoStateUnchecked = new spreadNS.CellTypes.CheckBox();
twoStateUnchecked.isThreeState(false);
twoStateUnchecked.textTrue("Checked");
twoStateUnchecked.textFalse("Unchecked");
sheet2.setCellType(1, 3, twoStateUnchecked);
sheet2.setValue(1, 3, false);
// Three state - checked
var threeStateChecked = new spreadNS.CellTypes.CheckBox();
threeStateChecked.isThreeState(true);
threeStateChecked.textTrue("Checked");
threeStateChecked.textFalse("Unchecked");
threeStateChecked.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 4, threeStateChecked);
sheet2.setValue(1, 4, true);
// Three state - unchecked
var threeStateUnchecked = new spreadNS.CellTypes.CheckBox();
threeStateUnchecked.isThreeState(true);
threeStateUnchecked.textTrue("Checked");
threeStateUnchecked.textFalse("Unchecked");
threeStateUnchecked.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 5, threeStateUnchecked);
sheet2.setValue(1, 5, false);
// Three state - indeterminate
var threeStateIndeterminate = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminate.isThreeState(true);
threeStateIndeterminate.textTrue("Checked");
threeStateIndeterminate.textFalse("Unchecked");
threeStateIndeterminate.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 6, threeStateIndeterminate);
sheet2.setValue(1, 6, null);
// Row 2: Text Align - 4 examples
sheet2.setValue(2, 1, "Text Align");
var textAlignTop = new spreadNS.CellTypes.CheckBox();
textAlignTop.caption("Top");
textAlignTop.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet2.setCellType(2, 2, textAlignTop);
var textAlignBottom = new spreadNS.CellTypes.CheckBox();
textAlignBottom.caption("Bottom");
textAlignBottom.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 3, textAlignBottom);
var textAlignLeft = new spreadNS.CellTypes.CheckBox();
textAlignLeft.caption("Left");
textAlignLeft.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet2.setCellType(2, 4, textAlignLeft);
var textAlignRight = new spreadNS.CellTypes.CheckBox();
textAlignRight.caption("Right");
textAlignRight.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet2.setCellType(2, 5, textAlignRight);
// 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 hitTestCell = new spreadNS.CellTypes.CheckBox();
hitTestCell.hitTestMode("cell");
hitTestCell.caption("Click cell");
sheet2.setCellType(4, 2, hitTestCell);
var hitTestCheckbox = new spreadNS.CellTypes.CheckBox();
hitTestCheckbox.hitTestMode("checkbox");
hitTestCheckbox.caption("Only click checkbox");
sheet2.setCellType(4, 3, hitTestCheckbox);
// Row 5: Text Editable - 2 examples
sheet2.setValue(5, 1, "Text Editable");
var textEditableTrue = new spreadNS.CellTypes.CheckBox();
textEditableTrue.textEditable(true);
textEditableTrue.caption("Can enter edit mode");
sheet2.setCellType(5, 2, textEditableTrue);
var textEditableFalse = new spreadNS.CellTypes.CheckBox();
textEditableFalse.textEditable(false);
textEditableFalse.caption("Cannot enter edit mode");
sheet2.setCellType(5, 3, textEditableFalse);
// Row 6: Box Size - 5 examples
sheet2.setValue(6, 1, "Box Size");
var boxSize10 = new spreadNS.CellTypes.CheckBox();
boxSize10.textTrue("Size 10");
boxSize10.textFalse("Size 10");
boxSize10.boxSize(10);
sheet2.setCellType(6, 2, boxSize10);
var boxSize16 = new spreadNS.CellTypes.CheckBox();
boxSize16.textTrue("Size 16");
boxSize16.textFalse("Size 16");
boxSize16.boxSize(16);
sheet2.setCellType(6, 3, boxSize16);
var boxSize20 = new spreadNS.CellTypes.CheckBox();
boxSize20.textTrue("Size 20");
boxSize20.textFalse("Size 20");
boxSize20.boxSize(20);
sheet2.setCellType(6, 4, boxSize20);
var boxSize24 = new spreadNS.CellTypes.CheckBox();
boxSize24.textTrue("Size 24");
boxSize24.textFalse("Size 24");
boxSize24.boxSize(24);
sheet2.setCellType(6, 5, boxSize24);
var boxSizeAuto = new spreadNS.CellTypes.CheckBox();
boxSizeAuto.textTrue("Auto Size");
boxSizeAuto.textFalse("Auto Size");
boxSizeAuto.boxSize("auto");
sheet2.setCellType(6, 6, boxSizeAuto);
sheet2.resumePaint();
}
function initModernSheet(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(2);
sheet.name("Modern");
sheet.defaults.colWidth = 190;
sheet.defaults.rowHeight = 60;
sheet.suspendPaint();
sheet.bind(spreadNS.Events.SelectionChanged, function() {
propertyChange(spread, false);
});
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.mode("modern");
captionCellType.caption("Caption");
sheet.setCellType(0, 2, captionCellType);
// Row 1: Three State - 5 examples
sheet.setValue(1, 1, "Three State");
// Two state - checked
var twoStateChecked = new spreadNS.CellTypes.CheckBox();
twoStateChecked.mode("modern");
twoStateChecked.isThreeState(false);
twoStateChecked.textTrue("Checked");
twoStateChecked.textFalse("Unchecked");
sheet.setCellType(1, 2, twoStateChecked);
sheet.setValue(1, 2, true);
// Two state - unchecked
var twoStateUnchecked = new spreadNS.CellTypes.CheckBox();
twoStateUnchecked.mode("modern");
twoStateUnchecked.isThreeState(false);
twoStateUnchecked.textTrue("Checked");
twoStateUnchecked.textFalse("Unchecked");
sheet.setCellType(1, 3, twoStateUnchecked);
sheet.setValue(1, 3, false);
// Three state - checked
var threeStateChecked = new spreadNS.CellTypes.CheckBox();
threeStateChecked.mode("modern");
threeStateChecked.isThreeState(true);
threeStateChecked.textTrue("Checked");
threeStateChecked.textFalse("Unchecked");
threeStateChecked.textIndeterminate("Indeterminate");
sheet.setCellType(1, 4, threeStateChecked);
sheet.setValue(1, 4, true);
// Three state - unchecked
var threeStateUnchecked = new spreadNS.CellTypes.CheckBox();
threeStateUnchecked.mode("modern");
threeStateUnchecked.isThreeState(true);
threeStateUnchecked.textTrue("Checked");
threeStateUnchecked.textFalse("Unchecked");
threeStateUnchecked.textIndeterminate("Indeterminate");
sheet.setCellType(1, 5, threeStateUnchecked);
sheet.setValue(1, 5, false);
// Three state - indeterminate
var threeStateIndeterminate = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminate.mode("modern");
threeStateIndeterminate.isThreeState(true);
threeStateIndeterminate.textTrue("Checked");
threeStateIndeterminate.textFalse("Unchecked");
threeStateIndeterminate.textIndeterminate("Indeterminate");
sheet.setCellType(1, 6, threeStateIndeterminate);
sheet.setValue(1, 6, null);
// Row 2: Text Align - 4 examples
sheet.setValue(2, 1, "Text Align");
var textAlignTop = new spreadNS.CellTypes.CheckBox();
textAlignTop.mode("modern");
textAlignTop.caption("Top");
textAlignTop.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet.setCellType(2, 2, textAlignTop);
var textAlignBottom = new spreadNS.CellTypes.CheckBox();
textAlignBottom.mode("modern");
textAlignBottom.caption("Bottom");
textAlignBottom.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet.setCellType(2, 3, textAlignBottom);
var textAlignLeft = new spreadNS.CellTypes.CheckBox();
textAlignLeft.mode("modern");
textAlignLeft.caption("Left");
textAlignLeft.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet.setCellType(2, 4, textAlignLeft);
var textAlignRight = new spreadNS.CellTypes.CheckBox();
textAlignRight.mode("modern");
textAlignRight.caption("Right");
textAlignRight.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet.setCellType(2, 5, textAlignRight);
// 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 - 2 examples
sheet.setValue(4, 1, "Hit Test Mode");
var hitTestCell = new spreadNS.CellTypes.CheckBox();
hitTestCell.mode("modern");
hitTestCell.hitTestMode("cell");
hitTestCell.caption("Click cell");
sheet.setCellType(4, 2, hitTestCell);
var hitTestCheckbox = new spreadNS.CellTypes.CheckBox();
hitTestCheckbox.mode("modern");
hitTestCheckbox.hitTestMode("checkbox");
hitTestCheckbox.caption("Only click checkbox");
sheet.setCellType(4, 3, hitTestCheckbox);
// Row 5: Text Editable - 2 examples
sheet.setValue(5, 1, "Text Editable");
var textEditableTrue = new spreadNS.CellTypes.CheckBox();
textEditableTrue.mode("modern");
textEditableTrue.textEditable(true);
textEditableTrue.caption("Can enter edit mode");
sheet.setCellType(5, 2, textEditableTrue);
var textEditableFalse = new spreadNS.CellTypes.CheckBox();
textEditableFalse.mode("modern");
textEditableFalse.textEditable(false);
textEditableFalse.caption("Cannot enter edit mode");
sheet.setCellType(5, 3, textEditableFalse);
// Row 6: Box Size - 5 examples
sheet.setValue(6, 1, "Box Size");
var boxSize10 = new spreadNS.CellTypes.CheckBox();
boxSize10.mode("modern");
boxSize10.textTrue("Size 10");
boxSize10.textFalse("Size 10");
boxSize10.boxSize(10);
sheet.setCellType(6, 2, boxSize10);
var boxSize16 = new spreadNS.CellTypes.CheckBox();
boxSize16.mode("modern");
boxSize16.textTrue("Size 16");
boxSize16.textFalse("Size 16");
boxSize16.boxSize(16);
sheet.setCellType(6, 3, boxSize16);
var boxSize20 = new spreadNS.CellTypes.CheckBox();
boxSize20.mode("modern");
boxSize20.textTrue("Size 20");
boxSize20.textFalse("Size 20");
boxSize20.boxSize(20);
sheet.setCellType(6, 4, boxSize20);
var boxSize24 = new spreadNS.CellTypes.CheckBox();
boxSize24.mode("modern");
boxSize24.textTrue("Size 24");
boxSize24.textFalse("Size 24");
boxSize24.boxSize(24);
sheet.setCellType(6, 5, boxSize24);
var boxSizeAuto = new spreadNS.CellTypes.CheckBox();
boxSizeAuto.mode("modern");
boxSizeAuto.textTrue("Auto Size");
boxSizeAuto.textFalse("Auto Size");
boxSizeAuto.boxSize("auto");
sheet.setCellType(6, 6, boxSizeAuto);
// Row 7: Color - 4 examples (foreColor affects checkbox border/fill in modern mode)
sheet.setValue(7, 1, "Color");
var colorDefault = new spreadNS.CellTypes.CheckBox();
colorDefault.mode("modern");
colorDefault.textTrue("Default");
colorDefault.textFalse("Default");
sheet.setCellType(7, 2, colorDefault);
var colorRed = new spreadNS.CellTypes.CheckBox();
colorRed.mode("modern");
colorRed.textTrue("Red");
colorRed.textFalse("Red");
sheet.setCellType(7, 3, colorRed);
sheet.getCell(7, 3).foreColor("red");
var colorBlue = new spreadNS.CellTypes.CheckBox();
colorBlue.mode("modern");
colorBlue.textTrue("Blue");
colorBlue.textFalse("Blue");
sheet.setCellType(7, 4, colorBlue);
sheet.getCell(7, 4).foreColor("blue");
var colorGreen = new spreadNS.CellTypes.CheckBox();
colorGreen.mode("modern");
colorGreen.textTrue("Green");
colorGreen.textFalse("Green");
sheet.setCellType(7, 5, colorGreen);
sheet.getCell(7, 5).foreColor("green");
sheet.resumePaint();
}
function initCheckboxUsageSheet(spread) {
var spreadNS = GC.Spread.Sheets;
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 with modern mode
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
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(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 6).vAlign(spreadNS.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();
}
function _getElementById(id){
return document.getElementById(id);
}
function exportToExcel(spread) {
var fileName = "CheckboxDemo.xlsx";
spread.export(function(blob) {
saveAs(blob, fileName);
}, function(error) {
console.error("Export error:", error);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label id="panelDescription">Select the check box cell in Spread and edit its options with these text boxes.</label>
</div>
<div id="checkboxOption">
<div class="option-row">
<label>caption:</label>
<input type="text" id="txtCheckBoxCellTextCaption" />
</div>
<div class="option-row">
<label>textTrue:</label>
<input type="text" id="txtCheckBoxCellTextTrue" value="textTrue" />
<label>textIndeterminate(for 3-state option):</label>
<input type="text" id="txtCheckBoxCellTextIndeterminate" value="textIndeterminate" />
<label>textFalse:</label>
<input type="text" id="txtCheckBoxCellTextFalse" value="textFalse" />
<label>boxSize</label>
<input type="text" id="checkboxSize" min="1">
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="selCheckBoxCellAlign">
<option value="0" selected="selected">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
</select>
</div>
<div class="option-row">
<input type="checkbox" id="ckbCheckBoxCellIsThreeState" checked="checked" />
<label for="ckbCheckBoxCellIsThreeState">isThreeState</label>
</div>
</div>
<div id="hitTestModeOption" style="display: none;">
<div class="option-row">
<label>hitTestMode:</label>
<select id="selHitTestMode">
<option value="cell">cell</option>
<option value="checkbox">checkbox</option>
</select>
</div>
</div>
<div id="textEditableOption" style="display: none;">
<div class="option-row">
<input type="checkbox" id="ckbTextEditable" />
<label for="ckbTextEditable">textEditable</label>
</div>
</div>
<div id="boxSizeOption" style="display: none;">
<div class="option-row">
<label>boxSize:</label>
<input type="text" id="txtBoxSize" />
</div>
<div class="option-row">
<label>caption:</label>
<input type="text" id="txtBoxSizeCaption" />
</div>
</div>
<div id="colorOption" style="display: none;">
<div class="option-row">
<label>caption:</label>
<input type="text" id="txtColorCaption" />
</div>
<div class="option-row">
<label>foreColor:</label>
<input type="text" id="txtForeColor" placeholder="#FF0000" />
</div>
</div>
<div id="toggleOptions" class="option-row" style="display: none;">
<label>caption:</label>
<input type="text" id="toggleCheckBoxCellTextCaption" />
<label>textTrue:</label>
<input type="text" id="toggleCheckBoxCellTextTrue" value="textTrue" />
<label>textFalse:</label>
<input type="text" id="toggleCheckBoxCellTextFalse" value="textFalse" />
<label>textAlign:</label>
<select id="selToggleCheckBoxCellAlign">
<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>
<label class="toggle-checkbox-cell-auto-size"><input type="checkbox" id="toggleCheckBoxCellAutoSize" /> autoSize</label>
<label>width:</label>
<input type="text" id="toggleCheckBoxCellWidth" value="40" />
<label>height:</label>
<input type="text" id="toggleCheckBoxCellHeight" value="20" />
<label>sliderMargin:</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" value="4" />
<label>sliderRadius:</label>
<input type="number" id="toggleCheckBoxCellSliderRadius" value="12" />
<label>trackRadius:</label>
<input type="number" id="toggleCheckBoxCellTrackRadius" value="15" />
<label>sliderColorOn:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" value="red" />
<label>sliderColorOff:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" value="#fff" />
<label>trackColorOn:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" value="red" />
<label>trackColorOff:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" value="#fff" />
<label>animationDuration:</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" value="300" />
</div>
<div class="option-row">
<label></label>
<input type="button" id="changeProperty" value="Update" />
</div>
<div class="option-row">
<label></label>
<input type="button" id="exportExcel" value="Export to Excel" />
</div>
</div>
</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;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
}
.toggle-checkbox-cell-auto-size {
padding: 8px 0;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
.option-row {
padding-bottom: 5px;
}
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;
}
