체크박스 셀을 만들려면 다음 예제를 따르세요.
체크박스는 3상태 체크박스를 지원할 수 있습니다. isThreeState 메서드를 사용하여 체크박스가 3상태를 지원하는지 가져오거나 설정할 수 있습니다.
세 가지 상태는 true, false, indeterminate입니다. 각 상태에는 고유한 텍스트가 있으며, textTrue, textFalse, textIndeterminate 메서드를 사용하여 이러한 상태 텍스트를 가져오거나 설정할 수 있습니다.
caption 메서드를 사용하여 체크박스 셀의 캡션을 가져오거나 설정할 수 있습니다. textAlign 메서드를 사용하면 체크박스를 기준으로 한 텍스트 맞춤을 가져오거나 설정할 수 있습니다. 이 설정은 CheckBoxTextAlign 열거형 값입니다.
top: 텍스트가 체크박스 위에 표시됩니다.
bottom: 텍스트가 체크박스 아래에 표시됩니다.
left: 텍스트가 체크박스 왼쪽에 표시됩니다.
right: 텍스트가 체크박스 오른쪽에 표시됩니다.
inside: 텍스트가 체크박스 안쪽에 표시됩니다. 이 열거형 값은 mode가 toggle로 설정된 경우에만 적용됩니다.
boxSize 메서드를 사용하여 체크박스 크기를 가져오거나 설정할 수 있습니다. cellType에는 숫자 또는 "auto"를 설정할 수 있습니다.
셀 스타일 "wordWrap"이 true로 설정되어 있고 셀 너비가 텍스트를 표시하기에 충분하지 않으면 텍스트가 줄 바꿈되어 표시됩니다.
mode 메서드를 사용하여 체크박스 모드를 가져오거나 설정할 수 있습니다. cellType에는 "checkbox", "toggle", "modern"을 설정할 수 있습니다.
checkbox: 클래식 체크박스 스타일입니다(기본값).
toggle: 토글 스위치 스타일입니다.
modern: 모던 체크박스 스타일입니다. modern 모드에서는 셀의 foreColor가 체크박스 모양에 영향을 줍니다.
toggleOptions 메서드를 사용하여 체크박스의 토글 옵션을 가져오거나 설정할 수 있습니다. 매개 변수 형식은 GC.Spread.Sheets.CellTypes.IToggleOptions를 참조하세요.
hitTestMode 메서드를 사용하여 checkbox 및 modern 모드에서 클릭 응답 영역을 가져오거나 설정할 수 있습니다. 설정 값은 'cell' 또는 'checkbox' 문자열입니다.
cell: 전체 셀이 클릭에 반응합니다(기본값).
checkbox: 체크박스 영역만 클릭에 반응합니다.
textEditable 메서드를 사용하여 checkbox 및 modern 모드에서 텍스트 편집 가능 여부를 가져오거나 설정할 수 있습니다. false로 설정하면 체크박스가 toggle 모드와 비슷하게 동작하며 텍스트 편집 모드로 들어갈 수 없습니다.
Excel 가져오기 및 내보내기
체크박스 셀 유형은 Excel 파일 가져오기와 내보내기를 모두 지원합니다. 이 기능은 checkbox 모드, toggle 모드, modern 모드에서 원활하게 동작하므로 Excel 파일로 작업할 때 체크박스를 유지할 수 있습니다.
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" />
<meta name="spreadjs culture" content="ko-kr" /><link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}
