To create a check box cell, follow this example:
The CheckBox can support a three-state check box. You can use the isThreeState method to get and set whether the check box supports three states. For example:
The three states are true, false, or indeterminate. Every state has its own text; you can use the textTrue, textFalse, and textIndeterminate methods to get and set these states' text. For example:
You can use the caption method to get and set the caption of the check box cell. Use the textAlign method to get and set the text alignment relative to the check box. The setting is a CheckBoxTextAlign enumeration value.
top: Text is on top of the check box.
bottom: Text is below the check box.
left: Text is to the left of the check box.
right: Text is to the right of the check box.
inside: Text is to the inside of the check box. This enumeration value takes effect only when mode is set to toggle.
You can use the boxSize method to get and set checkbox size. You can set number or "auto" to cellType.
When the cell style "wordWrap” is set to true and the cell width is not enough for the text, the text will display wrapped.
You can use the mode method to get and set checkbox mode. You can set "checkbox", "toggle", or "modern" to cellType.
checkbox: The classic checkbox style (default).
toggle: A toggle switch style.
modern: A modern checkbox style. In modern mode, the cell's foreColor affects the checkbox appearance.
You can use the toggleOptions method to get and set the toggle options of a checkbox. Please refer to GC.Spread.Sheets.CellTypes.IToggleOptions for parameter types.
You can use the hitTestMode method to get and set the click response area in checkbox and modern mode. The setting is a string value: 'cell' or 'checkbox'.
cell: The entire cell responds to clicks (default).
checkbox: Only the checkbox area responds to clicks.
You can use the textEditable method to get and set whether the text is editable in checkbox and modern mode. When set to false, the checkbox behaves similar to toggle mode and cannot enter text editing mode.
Excel Import and Export
The CheckBox cell type supports both importing from and exporting to Excel files. This functionality works seamlessly in checkbox mode, toggle mode, and modern mode, allowing you to preserve your checkbox when working with Excel files.
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-io';
import './styles.css';
declare const saveAs: (blob: Blob, fileName: string) => void;
const spreadNS = GC.Spread.Sheets;
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
caption = '';
textTrue = 'textTrue';
textIndeterminate = 'textIndeterminate';
textFalse = 'textFalse';
textAlign = 'top';
isThreeState = true;
disabled = false;
hasCaption: any = null;
boxSize: number | string = 12;
boxSizeCaption: string = '';
foreColor: string = '';
colorCaption: string = '';
mode: string = 'checkbox';
width: number = 40;
height: number = 20;
sliderMargin: number = 2;
sliderRadius: number | null = null;
trackRadius: number | null = null;
trackColorOn: string = '#8cbae8';
trackColorOff: string = '#9e9e9e';
sliderColorOn: string = '#1565c0';
sliderColorOff: string = '#ffffff';
animationDuration: number = 200;
autoSize: boolean = false;
hitTestMode: string = 'cell';
textEditable: boolean = true;
panelDescription: string = 'Select the check box cell in Spread and edit its options with these text boxes.';
spread: GC.Spread.Sheets.Workbook;
propertyChange(e: MouseEvent, settings?: any) {
var spreadNS = GC.Spread.Sheets;
const sheet = this.spread.getActiveSheet();
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = this.getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const checkboxCellType = sheet.getCellType(sel.row, sel.col);
if (!(checkboxCellType instanceof spreadNS.CellTypes.CheckBox)) {
this.disabled = true;
return;
}
// Check if this is Toggle sheet
if (sheet.name() === "Toggle") {
const checkboxMode = checkboxCellType.mode();
if (checkboxMode === 'toggle') {
this.mode = 'toggle';
} else {
this.mode = 'checkbox';
}
if (!settings) {
this.disabled = false;
if (checkboxMode === 'toggle') {
this.caption = checkboxCellType.caption();
this.textTrue = checkboxCellType.textTrue();
this.textFalse = checkboxCellType.textFalse();
this.textAlign = checkboxCellType.textAlign();
const toggleOptions = checkboxCellType.toggleOptions();
this.width = toggleOptions.width;
this.height = toggleOptions.height;
this.sliderMargin = toggleOptions.sliderMargin;
this.sliderRadius = toggleOptions.sliderRadius;
this.trackRadius = toggleOptions.trackRadius;
this.sliderColorOn = toggleOptions.sliderColorOn;
this.sliderColorOff = toggleOptions.sliderColorOff;
this.trackColorOn = toggleOptions.trackColorOn;
this.trackColorOff = toggleOptions.trackColorOff;
this.animationDuration = toggleOptions.animationDuration;
this.autoSize = toggleOptions.autoSize;
} else {
if (checkboxCellType.caption()) {
this.hasCaption = true;
this.caption = checkboxCellType.caption();
} else {
this.hasCaption = false;
this.textTrue = checkboxCellType.textTrue();
this.textIndeterminate = checkboxCellType.textIndeterminate();
this.textFalse = checkboxCellType.textFalse();
this.isThreeState = checkboxCellType.isThreeState();
this.boxSize = checkboxCellType.boxSize();
}
this.textAlign = checkboxCellType.textAlign();
}
} else {
if (checkboxMode === 'toggle') {
checkboxCellType.caption(this.caption);
checkboxCellType.textTrue(this.textTrue);
checkboxCellType.textFalse(this.textFalse);
checkboxCellType.textAlign(Number(this.textAlign));
const sliderRadius = this.sliderRadius;
const trackRadius = this.trackRadius;
const autoSize = !!this.autoSize;
checkboxCellType.toggleOptions({
width: autoSize ? null : (this.width - 0),
height: autoSize ? null : (this.height - 0),
sliderMargin: this.sliderMargin - 0,
sliderRadius: sliderRadius === null ? null : (sliderRadius - 0),
trackRadius: trackRadius === null ? null : (trackRadius - 0),
sliderColorOn: this.sliderColorOn,
sliderColorOff: this.sliderColorOff,
trackColorOn: this.trackColorOn,
trackColorOff: this.trackColorOff,
animationDuration: this.animationDuration - 0,
autoSize: autoSize,
});
} else {
if (checkboxCellType.caption()) {
checkboxCellType.caption(this.caption);
} else {
checkboxCellType.textTrue(this.textTrue);
checkboxCellType.textIndeterminate(this.textIndeterminate);
checkboxCellType.textFalse(this.textFalse);
checkboxCellType.isThreeState(this.isThreeState);
var boxSize = Number(this.boxSize);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(this.boxSize);
} else {
checkboxCellType.boxSize(boxSize);
}
}
checkboxCellType.textAlign(Number(this.textAlign));
}
}
sheet.repaint();
return;
}
// Check if this is Checkbox sheet - handle by row
if (sheet.name() === "Checkbox" || sheet.name() === "Modern") {
this.disabled = false;
switch (sel.row) {
case 0: // Caption
this.mode = 'checkbox';
if (!settings) {
this.hasCaption = true;
this.caption = checkboxCellType.caption();
this.textAlign = checkboxCellType.textAlign();
} else {
checkboxCellType.caption(this.caption);
checkboxCellType.textAlign(Number(this.textAlign));
}
break;
case 1: // Three State
this.mode = 'checkbox';
if (!settings) {
this.hasCaption = false;
this.textTrue = checkboxCellType.textTrue();
this.textIndeterminate = checkboxCellType.textIndeterminate();
this.textFalse = checkboxCellType.textFalse();
this.isThreeState = checkboxCellType.isThreeState();
this.boxSize = checkboxCellType.boxSize();
this.textAlign = checkboxCellType.textAlign();
} else {
checkboxCellType.textTrue(this.textTrue);
checkboxCellType.textIndeterminate(this.textIndeterminate);
checkboxCellType.textFalse(this.textFalse);
checkboxCellType.isThreeState(this.isThreeState);
var boxSizeValue = Number(this.boxSize);
if (isNaN(boxSizeValue)) {
checkboxCellType.boxSize(this.boxSize);
} else {
checkboxCellType.boxSize(boxSizeValue);
}
checkboxCellType.textAlign(Number(this.textAlign));
}
break;
case 2: // Text Align
this.mode = 'checkbox';
if (!settings) {
this.hasCaption = true;
this.caption = checkboxCellType.caption();
this.textAlign = checkboxCellType.textAlign();
} else {
checkboxCellType.caption(this.caption);
checkboxCellType.textAlign(Number(this.textAlign));
}
break;
case 3: // Text Wrap
this.mode = 'checkbox';
if (!settings) {
this.hasCaption = true;
this.caption = checkboxCellType.caption();
this.textAlign = checkboxCellType.textAlign();
} else {
checkboxCellType.caption(this.caption);
checkboxCellType.textAlign(Number(this.textAlign));
}
break;
case 4: // Hit Test Mode
this.mode = 'hitTestMode';
if (!settings) {
this.hitTestMode = checkboxCellType.hitTestMode();
} else {
checkboxCellType.hitTestMode(this.hitTestMode);
}
break;
case 5: // Text Editable
this.mode = 'textEditable';
if (!settings) {
this.textEditable = checkboxCellType.textEditable();
} else {
checkboxCellType.textEditable(this.textEditable);
}
break;
case 6: // Box Size
this.mode = 'checkbox';
if (!settings) {
this.hasCaption = false;
this.textTrue = checkboxCellType.textTrue();
this.textFalse = checkboxCellType.textFalse();
this.boxSize = checkboxCellType.boxSize();
this.textAlign = checkboxCellType.textAlign();
} else {
checkboxCellType.textTrue(this.textTrue);
checkboxCellType.textFalse(this.textFalse);
var boxSizeValue2 = Number(this.boxSize);
if (isNaN(boxSizeValue2)) {
checkboxCellType.boxSize(this.boxSize);
} else {
checkboxCellType.boxSize(boxSizeValue2);
}
checkboxCellType.textAlign(Number(this.textAlign));
}
break;
}
sheet.repaint();
return;
}
}
sheet.repaint();
}
getActualRange(range: GC.Spread.Sheets.Range, maxRowCount: number, maxColCount: number) {
var spreadNS = GC.Spread.Sheets;
const row = range.row < 0 ? 0 : range.row;
const col = range.col < 0 ? 0 : range.col;
const rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
const colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
initCellStyle(fontSize: number, foreColor: string) {
const style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = `bold ${fontSize}pt Calibri`;
style.foreColor = foreColor;
return style;
}
initSpread($event: any) {
const spreadNS = GC.Spread.Sheets;
this.spread = $event.spread;
this.initToggleSheet(this.spread);
this.initCheckboxSheet(this.spread);
this.initModernSheet(this.spread);
this.initCheckboxUsageSheet(this.spread);
this.spread.bind(spreadNS.Events.ActiveSheetChanged, () => {
const sheet = this.spread.getActiveSheet();
const sheetName = sheet.name();
if (sheetName === "Checkbox Usage") {
this.panelDescription = "Export the current workbook to an Excel file.";
this.mode = null;
this.disabled = true;
} else {
this.panelDescription = "Select the check box cell in Spread and edit its options with these text boxes.";
this.propertyChange(this.spread, false);
}
});
}
initToggleSheet(spread: GC.Spread.Sheets.Workbook) {
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, () => {
this.propertyChange(spread, false);
});
sheet1.setColumnWidth(0, 110);
sheet1.setColumnWidth(1, 190);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 110);
sheet1.setColumnWidth(4, 190);
sheet1.setColumnWidth(5, 130);
sheet1.setColumnWidth(6, 130);
sheet1.setColumnWidth(7, 130);
sheet1.setColumnWidth(8, 130);
sheet1.setColumnWidth(9, 130);
for (let i = 0; i < 7; i++) {
sheet1.setRowHeight(i, 60);
}
sheet1.addSpan(0, 0, 7, 1);
sheet1.setValue(0, 0, "Toggle Mode");
// sheet1.setStyle(0, 0, initCellStyle(11, "Accent 1"));
sheet1.setStyle(0, 0, this.initCellStyle(11, "Accent 2"));
sheet1.setStyle(0, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(1, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(2, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(3, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(4, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(5, 1, this.initCellStyle(11, "#000"));
sheet1.setStyle(6, 1, this.initCellStyle(11, "#000"));
sheet1.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 7; i++) {
for (let j = 1; j < 8; j++) {
sheet1.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
var toggleOptions = {
width: 30,
height: 15,
trackColorOn: '#4CAF50',
trackColorOff: '#bfbfbf',
sliderColorOn: '#ffffff',
sliderColorOff: '#ffffff',
animationDuration: 200,
};
sheet1.setValue(0, 1, "Custom Size");
var toggleCustomSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType1.mode('toggle');
toggleCustomSizeCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(0, 2, toggleCustomSizeCellType1);
var toggleCustomSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType2.mode('toggle');
toggleCustomSizeCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
});
sheet1.setCellType(0, 3, toggleCustomSizeCellType2);
var toggleCustomSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType3.mode('toggle');
toggleCustomSizeCellType3.toggleOptions({
...toggleOptions,
width: 60,
height: 30,
});
sheet1.setCellType(0, 4, toggleCustomSizeCellType3);
sheet1.setValue(1, 1, "Auto Size");
sheet1.comments.add(1, 1, 'After enabling the Auto Size option, the button size will be dynamically adjusted according to the text.');
var comment = sheet1.comments.get(1, 1);
comment.indicatorSize(8);
comment.indicatorColor('blue');
var toggleAutoSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType1.mode('toggle');
toggleAutoSizeCellType1.caption("Auto");
toggleAutoSizeCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType1.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 2, toggleAutoSizeCellType1);
sheet1.getStyle(1, 2).fontSize = '8pt';
var toggleAutoSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType2.mode('toggle');
toggleAutoSizeCellType2.caption("Auto");
toggleAutoSizeCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType2.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 3, toggleAutoSizeCellType2);
sheet1.getStyle(1, 3).fontSize = '12pt';
var toggleAutoSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType3.mode('toggle');
toggleAutoSizeCellType3.caption("Auto");
toggleAutoSizeCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType3.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 4, toggleAutoSizeCellType3);
sheet1.getStyle(1, 4).fontSize = '16pt';
sheet1.setValue(2, 1, "Custom Colors");
var toggleCustomColorsCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomColorsCellType1.mode('toggle');
toggleCustomColorsCellType1.textTrue("On");
toggleCustomColorsCellType1.textFalse("Off");
toggleCustomColorsCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleCustomColorsCellType1.toggleOptions({
trackColorOn: "Accent 1 60",
trackColorOff: "Background 1 -15",
sliderColorOn: "Accent 1",
sliderColorOff: "Background 1",
animationDuration: 500,
autoSize: true
});
sheet1.setCellType(2, 2, toggleCustomColorsCellType1);
sheet1.setValue(3, 1, "Text Align");
var toggleTextAlignCellType1 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType1.mode('toggle');
toggleTextAlignCellType1.caption("Top");
toggleTextAlignCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.top);
toggleTextAlignCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(3, 2, toggleTextAlignCellType1);
var toggleTextAlignCellType2 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType2.mode('toggle');
toggleTextAlignCellType2.caption("Bottom");
toggleTextAlignCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
toggleTextAlignCellType2.toggleOptions(toggleOptions);
sheet1.setCellType(3, 3, toggleTextAlignCellType2);
var toggleTextAlignCellType3 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType3.mode('toggle');
toggleTextAlignCellType3.caption("Left");
toggleTextAlignCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
toggleTextAlignCellType3.toggleOptions(toggleOptions);
sheet1.setCellType(3, 4, toggleTextAlignCellType3);
var toggleTextAlignCellType4 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType4.mode('toggle');
toggleTextAlignCellType4.caption("Right");
toggleTextAlignCellType4.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
toggleTextAlignCellType4.toggleOptions(toggleOptions);
sheet1.setCellType(3, 5, toggleTextAlignCellType4);
var toggleTextAlignCellType5 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType5.mode('toggle');
toggleTextAlignCellType5.caption("Inside");
toggleTextAlignCellType5.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleTextAlignCellType5.toggleOptions({
...toggleOptions,
width: 70,
height: 20,
});
sheet1.setCellType(3, 6, toggleTextAlignCellType5);
sheet1.setValue(4, 1, "Slider Margin");
var toggleSliderMarginCellType1 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType1.mode('toggle');
toggleSliderMarginCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 2,
});
sheet1.setCellType(4, 2, toggleSliderMarginCellType1);
var toggleSliderMarginCellType2 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType2.mode('toggle');
toggleSliderMarginCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
});
sheet1.setCellType(4, 3, toggleSliderMarginCellType2);
var toggleSliderMarginCellType3 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType3.mode('toggle');
toggleSliderMarginCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 6,
});
sheet1.setCellType(4, 4, toggleSliderMarginCellType3);
sheet1.setValue(5, 1, "Border Radius");
var toggleBorderRadiusCellType1 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType1.mode('toggle');
toggleBorderRadiusCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 0,
});
sheet1.setCellType(5, 2, toggleBorderRadiusCellType1);
var toggleBorderRadiusCellType2 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType2.mode('toggle');
toggleBorderRadiusCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 12,
});
sheet1.setCellType(5, 3, toggleBorderRadiusCellType2);
var toggleBorderRadiusCellType3 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType3.mode('toggle');
toggleBorderRadiusCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
trackRadius: 15,
sliderRadius: 0,
});
sheet1.setCellType(5, 4, toggleBorderRadiusCellType3);
var toggleBorderRadiusCellType4 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType4.mode('toggle');
toggleBorderRadiusCellType4.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 8,
sliderRadius: 6,
});
sheet1.setCellType(5, 5, toggleBorderRadiusCellType4);
var toggleBorderRadiusCellType5 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType5.mode('toggle');
toggleBorderRadiusCellType5.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: null,
sliderRadius: null,
});
sheet1.setCellType(5, 6, toggleBorderRadiusCellType5);
sheet1.setValue(6, 1, "Animation Duration");
var toggleAnimationDurationCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType1.mode('toggle');
toggleAnimationDurationCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 100,
});
sheet1.setCellType(6, 2, toggleAnimationDurationCellType1);
var toggleAnimationDurationCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType2.mode('toggle');
toggleAnimationDurationCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 300,
});
sheet1.setCellType(6, 3, toggleAnimationDurationCellType2);
var toggleAnimationDurationCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType3.mode('toggle');
toggleAnimationDurationCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 500,
});
sheet1.setCellType(6, 4, toggleAnimationDurationCellType3);
sheet1.resumePaint();
}
initCheckboxSheet(spread: GC.Spread.Sheets.Workbook) {
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, () => {
this.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, this.initCellStyle(11, "Accent 1"));
sheet2.setStyle(0, 1, this.initCellStyle(11, "Accent 6"));
sheet2.setStyle(1, 1, this.initCellStyle(11, "#FF0000"));
sheet2.setStyle(2, 1, this.initCellStyle(11, "Accent 5"));
sheet2.setStyle(3, 1, this.initCellStyle(11, "Accent 4"));
sheet2.setStyle(4, 1, this.initCellStyle(11, "Accent 2"));
sheet2.setStyle(5, 1, this.initCellStyle(11, "Accent 3"));
sheet2.setStyle(6, 1, this.initCellStyle(11, "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 < 8; j++) {
sheet2.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
// Row 0: Caption
sheet2.setValue(0, 1, "Caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.caption("Caption");
sheet2.setCellType(0, 2, captionCellType);
// Row 1: Three State
sheet2.setValue(1, 1, "Three State");
// Two-state checked
var twoStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateCheckedCellType.isThreeState(false);
twoStateCheckedCellType.textTrue("Checked");
twoStateCheckedCellType.textFalse("Unchecked");
sheet2.setCellType(1, 2, twoStateCheckedCellType);
sheet2.setValue(1, 2, true);
// Two-state unchecked
var twoStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateUncheckedCellType.isThreeState(false);
twoStateUncheckedCellType.textTrue("Checked");
twoStateUncheckedCellType.textFalse("Unchecked");
sheet2.setCellType(1, 3, twoStateUncheckedCellType);
sheet2.setValue(1, 3, false);
// Three-state checked
var threeStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateCheckedCellType.isThreeState(true);
threeStateCheckedCellType.textTrue("Checked");
threeStateCheckedCellType.textFalse("Unchecked");
threeStateCheckedCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 4, threeStateCheckedCellType);
sheet2.setValue(1, 4, true);
// Three-state unchecked
var threeStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateUncheckedCellType.isThreeState(true);
threeStateUncheckedCellType.textTrue("Checked");
threeStateUncheckedCellType.textFalse("Unchecked");
threeStateUncheckedCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 5, threeStateUncheckedCellType);
sheet2.setValue(1, 5, false);
// Three-state indeterminate
var threeStateIndeterminateCellType = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminateCellType.isThreeState(true);
threeStateIndeterminateCellType.textTrue("Checked");
threeStateIndeterminateCellType.textFalse("Unchecked");
threeStateIndeterminateCellType.textIndeterminate("Indeterminate");
sheet2.setCellType(1, 6, threeStateIndeterminateCellType);
sheet2.setValue(1, 6, null);
// Row 2: Text Align
sheet2.setValue(2, 1, "Text Align");
var textAlignTopCellType = new spreadNS.CellTypes.CheckBox();
textAlignTopCellType.caption("Top");
textAlignTopCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet2.setCellType(2, 2, textAlignTopCellType);
var textAlignBottomCellType = new spreadNS.CellTypes.CheckBox();
textAlignBottomCellType.caption("Bottom");
textAlignBottomCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 3, textAlignBottomCellType);
var textAlignLeftCellType = new spreadNS.CellTypes.CheckBox();
textAlignLeftCellType.caption("Left");
textAlignLeftCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet2.setCellType(2, 4, textAlignLeftCellType);
var textAlignRightCellType = new spreadNS.CellTypes.CheckBox();
textAlignRightCellType.caption("Right");
textAlignRightCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet2.setCellType(2, 5, textAlignRightCellType);
// Row 3: Text Wrap
sheet2.setValue(3, 1, "Text Wrap");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.caption("This is a long long text");
sheet2.setCellType(3, 2, textWrapCellType);
sheet2.getCell(3, 2).wordWrap(true);
// Row 4: Hit Test Mode
sheet2.setValue(4, 1, "Hit Test Mode");
var hitTestCellCellType = new spreadNS.CellTypes.CheckBox();
hitTestCellCellType.hitTestMode("cell");
hitTestCellCellType.caption("Click cell");
sheet2.setCellType(4, 2, hitTestCellCellType);
var hitTestCheckboxCellType = new spreadNS.CellTypes.CheckBox();
hitTestCheckboxCellType.hitTestMode("checkbox");
hitTestCheckboxCellType.caption("Only click checkbox");
sheet2.setCellType(4, 3, hitTestCheckboxCellType);
// Row 5: Text Editable
sheet2.setValue(5, 1, "Text Editable");
var textEditableTrueCellType = new spreadNS.CellTypes.CheckBox();
textEditableTrueCellType.textEditable(true);
textEditableTrueCellType.caption("Can enter edit mode");
sheet2.setCellType(5, 2, textEditableTrueCellType);
var textEditableFalseCellType = new spreadNS.CellTypes.CheckBox();
textEditableFalseCellType.textEditable(false);
textEditableFalseCellType.caption("Cannot enter edit mode");
sheet2.setCellType(5, 3, textEditableFalseCellType);
// Row 6: Box Size
sheet2.setValue(6, 1, "Box Size");
var boxSize10CellType = new spreadNS.CellTypes.CheckBox();
boxSize10CellType.textTrue("Size 10");
boxSize10CellType.textFalse("Size 10");
boxSize10CellType.boxSize(10);
sheet2.setCellType(6, 2, boxSize10CellType);
var boxSize16CellType = new spreadNS.CellTypes.CheckBox();
boxSize16CellType.textTrue("Size 16");
boxSize16CellType.textFalse("Size 16");
boxSize16CellType.boxSize(16);
sheet2.setCellType(6, 3, boxSize16CellType);
var boxSize20CellType = new spreadNS.CellTypes.CheckBox();
boxSize20CellType.textTrue("Size 20");
boxSize20CellType.textFalse("Size 20");
boxSize20CellType.boxSize(20);
sheet2.setCellType(6, 4, boxSize20CellType);
var boxSize24CellType = new spreadNS.CellTypes.CheckBox();
boxSize24CellType.textTrue("Size 24");
boxSize24CellType.textFalse("Size 24");
boxSize24CellType.boxSize(24);
sheet2.setCellType(6, 5, boxSize24CellType);
var boxSizeAutoCellType = new spreadNS.CellTypes.CheckBox();
boxSizeAutoCellType.textTrue("Auto Size");
boxSizeAutoCellType.textFalse("Auto Size");
boxSizeAutoCellType.boxSize("auto");
sheet2.setCellType(6, 6, boxSizeAutoCellType);
sheet2.resumePaint();
}
initModernSheet(spread: GC.Spread.Sheets.Workbook) {
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, () => {
this.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, this.initCellStyle(11, "Accent 1"));
sheet.setStyle(0, 1, this.initCellStyle(11, "Accent 6"));
sheet.setStyle(1, 1, this.initCellStyle(11, "#FF0000"));
sheet.setStyle(2, 1, this.initCellStyle(11, "Accent 5"));
sheet.setStyle(3, 1, this.initCellStyle(11, "Accent 4"));
sheet.setStyle(4, 1, this.initCellStyle(11, "Accent 2"));
sheet.setStyle(5, 1, this.initCellStyle(11, "Accent 3"));
sheet.setStyle(6, 1, this.initCellStyle(11, "Accent 1"));
sheet.setStyle(7, 1, this.initCellStyle(11, "Accent 2"));
sheet.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 8; i++) {
for (let j = 1; j < 8; j++) {
sheet.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
// Row 0: Caption
sheet.setValue(0, 1, "Caption");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.caption("Caption");
captionCellType.mode("modern");
sheet.setCellType(0, 2, captionCellType);
// Row 1: Three State
sheet.setValue(1, 1, "Three State");
// Two-state checked
var twoStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateCheckedCellType.isThreeState(false);
twoStateCheckedCellType.textTrue("Checked");
twoStateCheckedCellType.textFalse("Unchecked");
twoStateCheckedCellType.mode("modern");
sheet.setCellType(1, 2, twoStateCheckedCellType);
sheet.setValue(1, 2, true);
// Two-state unchecked
var twoStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
twoStateUncheckedCellType.isThreeState(false);
twoStateUncheckedCellType.textTrue("Checked");
twoStateUncheckedCellType.textFalse("Unchecked");
twoStateUncheckedCellType.mode("modern");
sheet.setCellType(1, 3, twoStateUncheckedCellType);
sheet.setValue(1, 3, false);
// Three-state checked
var threeStateCheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateCheckedCellType.isThreeState(true);
threeStateCheckedCellType.textTrue("Checked");
threeStateCheckedCellType.textFalse("Unchecked");
threeStateCheckedCellType.textIndeterminate("Indeterminate");
threeStateCheckedCellType.mode("modern");
sheet.setCellType(1, 4, threeStateCheckedCellType);
sheet.setValue(1, 4, true);
// Three-state unchecked
var threeStateUncheckedCellType = new spreadNS.CellTypes.CheckBox();
threeStateUncheckedCellType.isThreeState(true);
threeStateUncheckedCellType.textTrue("Checked");
threeStateUncheckedCellType.textFalse("Unchecked");
threeStateUncheckedCellType.textIndeterminate("Indeterminate");
threeStateUncheckedCellType.mode("modern");
sheet.setCellType(1, 5, threeStateUncheckedCellType);
sheet.setValue(1, 5, false);
// Three-state indeterminate
var threeStateIndeterminateCellType = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminateCellType.isThreeState(true);
threeStateIndeterminateCellType.textTrue("Checked");
threeStateIndeterminateCellType.textFalse("Unchecked");
threeStateIndeterminateCellType.textIndeterminate("Indeterminate");
threeStateIndeterminateCellType.mode("modern");
sheet.setCellType(1, 6, threeStateIndeterminateCellType);
sheet.setValue(1, 6, null);
// Row 2: Text Align
sheet.setValue(2, 1, "Text Align");
var textAlignTopCellType = new spreadNS.CellTypes.CheckBox();
textAlignTopCellType.caption("Top");
textAlignTopCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
textAlignTopCellType.mode("modern");
sheet.setCellType(2, 2, textAlignTopCellType);
var textAlignBottomCellType = new spreadNS.CellTypes.CheckBox();
textAlignBottomCellType.caption("Bottom");
textAlignBottomCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
textAlignBottomCellType.mode("modern");
sheet.setCellType(2, 3, textAlignBottomCellType);
var textAlignLeftCellType = new spreadNS.CellTypes.CheckBox();
textAlignLeftCellType.caption("Left");
textAlignLeftCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
textAlignLeftCellType.mode("modern");
sheet.setCellType(2, 4, textAlignLeftCellType);
var textAlignRightCellType = new spreadNS.CellTypes.CheckBox();
textAlignRightCellType.caption("Right");
textAlignRightCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
textAlignRightCellType.mode("modern");
sheet.setCellType(2, 5, textAlignRightCellType);
// Row 3: Text Wrap
sheet.setValue(3, 1, "Text Wrap");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.caption("This is a long long text");
textWrapCellType.mode("modern");
sheet.setCellType(3, 2, textWrapCellType);
sheet.getCell(3, 2).wordWrap(true);
// Row 4: Hit Test Mode
sheet.setValue(4, 1, "Hit Test Mode");
var hitTestCellCellType = new spreadNS.CellTypes.CheckBox();
hitTestCellCellType.hitTestMode("cell");
hitTestCellCellType.caption("Click cell");
hitTestCellCellType.mode("modern");
sheet.setCellType(4, 2, hitTestCellCellType);
var hitTestCheckboxCellType = new spreadNS.CellTypes.CheckBox();
hitTestCheckboxCellType.hitTestMode("checkbox");
hitTestCheckboxCellType.caption("Only click checkbox");
hitTestCheckboxCellType.mode("modern");
sheet.setCellType(4, 3, hitTestCheckboxCellType);
// Row 5: Text Editable
sheet.setValue(5, 1, "Text Editable");
var textEditableTrueCellType = new spreadNS.CellTypes.CheckBox();
textEditableTrueCellType.textEditable(true);
textEditableTrueCellType.caption("Can enter edit mode");
textEditableTrueCellType.mode("modern");
sheet.setCellType(5, 2, textEditableTrueCellType);
var textEditableFalseCellType = new spreadNS.CellTypes.CheckBox();
textEditableFalseCellType.textEditable(false);
textEditableFalseCellType.caption("Cannot enter edit mode");
textEditableFalseCellType.mode("modern");
sheet.setCellType(5, 3, textEditableFalseCellType);
// Row 6: Box Size
sheet.setValue(6, 1, "Box Size");
var boxSize10CellType = new spreadNS.CellTypes.CheckBox();
boxSize10CellType.textTrue("Size 10");
boxSize10CellType.textFalse("Size 10");
boxSize10CellType.boxSize(10);
boxSize10CellType.mode("modern");
sheet.setCellType(6, 2, boxSize10CellType);
var boxSize16CellType = new spreadNS.CellTypes.CheckBox();
boxSize16CellType.textTrue("Size 16");
boxSize16CellType.textFalse("Size 16");
boxSize16CellType.boxSize(16);
boxSize16CellType.mode("modern");
sheet.setCellType(6, 3, boxSize16CellType);
var boxSize20CellType = new spreadNS.CellTypes.CheckBox();
boxSize20CellType.textTrue("Size 20");
boxSize20CellType.textFalse("Size 20");
boxSize20CellType.boxSize(20);
boxSize20CellType.mode("modern");
sheet.setCellType(6, 4, boxSize20CellType);
var boxSize24CellType = new spreadNS.CellTypes.CheckBox();
boxSize24CellType.textTrue("Size 24");
boxSize24CellType.textFalse("Size 24");
boxSize24CellType.boxSize(24);
boxSize24CellType.mode("modern");
sheet.setCellType(6, 5, boxSize24CellType);
var boxSizeAutoCellType = new spreadNS.CellTypes.CheckBox();
boxSizeAutoCellType.textTrue("Auto Size");
boxSizeAutoCellType.textFalse("Auto Size");
boxSizeAutoCellType.boxSize("auto");
boxSizeAutoCellType.mode("modern");
sheet.setCellType(6, 6, boxSizeAutoCellType);
// Row 7: Color
sheet.setValue(7, 1, "Color");
var colorDefaultCellType = new spreadNS.CellTypes.CheckBox();
colorDefaultCellType.textTrue("Default");
colorDefaultCellType.textFalse("Default");
colorDefaultCellType.mode("modern");
sheet.setCellType(7, 2, colorDefaultCellType);
var colorRedCellType = new spreadNS.CellTypes.CheckBox();
colorRedCellType.textTrue("Red");
colorRedCellType.textFalse("Red");
colorRedCellType.mode("modern");
sheet.setCellType(7, 3, colorRedCellType);
sheet.getCell(7, 3).foreColor("red");
var colorBlueCellType = new spreadNS.CellTypes.CheckBox();
colorBlueCellType.textTrue("Blue");
colorBlueCellType.textFalse("Blue");
colorBlueCellType.mode("modern");
sheet.setCellType(7, 4, colorBlueCellType);
sheet.getCell(7, 4).foreColor("blue");
var colorGreenCellType = new spreadNS.CellTypes.CheckBox();
colorGreenCellType.textTrue("Green");
colorGreenCellType.textFalse("Green");
colorGreenCellType.mode("modern");
sheet.setCellType(7, 5, colorGreenCellType);
sheet.getCell(7, 5).foreColor("green");
sheet.resumePaint();
}
initCheckboxUsageSheet(spread: GC.Spread.Sheets.Workbook) {
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
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)
const progressFormula = `=COUNTIF(B${rowIndex + 1}:F${rowIndex + 1},TRUE)/5`;
sheet.setFormula(rowIndex, 6, progressFormula);
sheet.getCell(rowIndex, 6).formatter("0%");
sheet.getCell(rowIndex, 6).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getCell(rowIndex, 6).vAlign(GC.Spread.Sheets.VerticalAlign.center);
// Add data bar for Progress column
const progressRule = new spreadNS.ConditionalFormatting.DataBarRule();
progressRule.ranges([new spreadNS.Range(rowIndex, 6, 1, 1)]);
progressRule.minType(spreadNS.ConditionalFormatting.ScaleValueType.number);
progressRule.minValue(0);
progressRule.maxType(spreadNS.ConditionalFormatting.ScaleValueType.number);
progressRule.maxValue(1);
progressRule.color("#D9D9D9");
progressRule.showBorder(false);
progressRule.showBarOnly(false);
progressRule.gradient(false);
sheet.conditionalFormats.addRule(progressRule);
// Column 7: Status (use formula to calculate automatically based on Progress)
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 (let i = 0; i < tasks.length; i++) {
const rowIndex = i + 2;
const progressCell = `$G${rowIndex + 1}`;
const ranges = [new spreadNS.Range(rowIndex, 0, 1, 8)];
const ruleDefault = new spreadNS.ConditionalFormatting.NormalConditionRule();
ruleDefault.ranges(ranges);
ruleDefault.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
ruleDefault.formula(`${progressCell}<0.2`);
ruleDefault.style(new spreadNS.Style());
ruleDefault.style().backColor = "#F0F0F0";
ruleDefault.style().foreColor = "#757575";
sheet.conditionalFormats.addRule(ruleDefault);
const rule20 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule20.ranges(ranges);
rule20.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule20.formula(`${progressCell}>=0.2`);
rule20.style(new spreadNS.Style());
rule20.style().backColor = "#FFCDD2";
rule20.style().foreColor = "#D32F2F";
sheet.conditionalFormats.addRule(rule20);
const rule40 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule40.ranges(ranges);
rule40.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule40.formula(`${progressCell}>=0.4`);
rule40.style(new spreadNS.Style());
rule40.style().backColor = "#FFE0B2";
rule40.style().foreColor = "#E65100";
sheet.conditionalFormats.addRule(rule40);
const rule60 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule60.ranges(ranges);
rule60.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule60.formula(`${progressCell}>=0.6`);
rule60.style(new spreadNS.Style());
rule60.style().backColor = "#FFF9C4";
rule60.style().foreColor = "#F57F17";
sheet.conditionalFormats.addRule(rule60);
const rule80 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule80.ranges(ranges);
rule80.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule80.formula(`${progressCell}>=0.8`);
rule80.style(new spreadNS.Style());
rule80.style().backColor = "#C8E6C9";
rule80.style().foreColor = "#2E7D32";
sheet.conditionalFormats.addRule(rule80);
}
sheet.resumePaint();
}
exportToExcel() {
const fileName = "CheckboxDemo.xlsx";
this.spread.export((blob: Blob) => {
saveAs(blob, fileName);
}, (error: any) => {
console.error("Export error:", error);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<label>{{panelDescription}}</label>
<div class="checkbox-options" *ngIf="mode === 'checkbox'">
<div class="option-row" *ngIf="hasCaption === null || hasCaption">
<label for="caption">caption:</label>
<input id="caption" type="text" [(ngModel)]="caption" />
</div>
<div class="option-row" *ngIf="hasCaption === null || !hasCaption">
<label for="textTrue">textTrue:</label>
<input id="textTrue" type="text" [(ngModel)]="textTrue" />
</div>
<div class="option-row" *ngIf="hasCaption === null || !hasCaption">
<label for="textIndeterminate">textIndeterminate(for 3-state option):</label>
<input id="textIndeterminate" type="text" [(ngModel)]="textIndeterminate" />
</div>
<div class="option-row" *ngIf="hasCaption === null || !hasCaption">
<label for="textFalse">textFalse:</label>
<input id="textFalse" type="text" [(ngModel)]="textFalse" />
</div>
<div class="option-row" *ngIf="hasCaption === null || !hasCaption">
<label for="boxSize">boxSize:</label>
<input id="boxSize" type="text" [(ngModel)]="boxSize" />
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="textAlign" [(ngModel)]="textAlign">
<option value="0">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
</select>
</div>
<div class="option-row" *ngIf="hasCaption === null || !hasCaption">
<input id="isThreeState" type="checkbox" checked="checked" [(ngModel)]="isThreeState" />
<label for="isThreeState">isThreeState:</label>
</div>
</div>
<div class="hittest-mode-options" *ngIf="mode === 'hitTestMode'">
<div class="option-row">
<label>hitTestMode:</label>
<select id="hitTestMode" [(ngModel)]="hitTestMode">
<option value="cell">cell</option>
<option value="checkbox">checkbox</option>
</select>
</div>
</div>
<div class="text-editable-options" *ngIf="mode === 'textEditable'">
<div class="option-row">
<input id="textEditable" type="checkbox" [(ngModel)]="textEditable" />
<label for="textEditable">textEditable:</label>
</div>
</div>
<div class="box-size-options" *ngIf="mode === 'boxSize'">
<div class="option-row">
<label for="boxSizeValue">boxSize:</label>
<input id="boxSizeValue" type="text" [(ngModel)]="boxSize" />
</div>
<div class="option-row">
<label for="boxSizeCaption">caption:</label>
<input id="boxSizeCaption" type="text" [(ngModel)]="boxSizeCaption" />
</div>
</div>
<div class="color-options" *ngIf="mode === 'color'">
<div class="option-row">
<label for="colorCaption">caption:</label>
<input id="colorCaption" type="text" [(ngModel)]="colorCaption" />
</div>
<div class="option-row">
<label for="foreColor">foreColor:</label>
<input id="foreColor" type="text" [(ngModel)]="foreColor" placeholder="#FF0000" />
</div>
</div>
<div class="toggle-options" *ngIf="mode === 'toggle'">
<div class="option-row">
<label>caption:</label>
<input type="text" id="toggleCheckBoxCellTextCaption" [(ngModel)]="caption" />
</div>
<div class="option-row">
<label>textTrue:</label>
<input type="text" id="toggleCheckBoxCellTextTrue" [(ngModel)]="textTrue" />
</div>
<div class="option-row">
<label>textFalse:</label>
<input type="text" id="toggleCheckBoxCellTextFalse" [(ngModel)]="textFalse" />
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="selToggleCheckBoxCellAlign" [(ngModel)]="textAlign">
<option value="0" selected="selected">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
<option value="4">inside</option>
</select>
</div>
<div class="option-row">
<label class="toggle-checkbox-cell-auto-size">
<input type="checkbox" id="toggleCheckBoxCellAutoSize" [(ngModel)]="autoSize" />
autoSize
</label>
</div>
<div class="option-row" [class.disabled]="autoSize">
<label>width:</label>
<input type="text" id="toggleCheckBoxCellWidth" [(ngModel)]="width" />
</div>
<div class="option-row" [class.disabled]="autoSize">
<label>height:</label>
<input type="text" id="toggleCheckBoxCellHeight" [(ngModel)]="height" />
</div>
<div class="option-row">
<label>sliderMargin:</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" [(ngModel)]="sliderMargin" />
</div>
<div class="option-row">
<label>sliderRadius:</label>
<input type="text" id="toggleCheckBoxCellSliderRadius" [(ngModel)]="sliderRadius" />
</div>
<div class="option-row">
<label>trackRadius:</label>
<input type="text" id="toggleCheckBoxCellTrackRadius" [(ngModel)]="trackRadius" />
</div>
<div class="option-row">
<label>sliderColorOn:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" [(ngModel)]="sliderColorOn" />
</div>
<div class="option-row">
<label>sliderColorOff:</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" [(ngModel)]="sliderColorOff" />
</div>
<div class="option-row">
<label>trackColorOn:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" [(ngModel)]="trackColorOn" />
</div>
<div class="option-row">
<label>trackColorOff:</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" [(ngModel)]="trackColorOff" />
</div>
<div class="option-row">
<label>animationDuration:</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" [(ngModel)]="animationDuration" />
</div>
</div>
<div class="option-row" *ngIf="mode !== null">
<input type="button" id="setProperty" value="Update" [disabled]="disabled" (click)="propertyChange($event, true)" />
</div>
<div class="option-row">
<input type="button" id="exportExcel" value="Export to Excel" (click)="exportToExcel()" />
</div>
</div>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.sample-options{
z-index: 1000;
}
.option {
padding-bottom: 6px;
}
.option-row {
font-size: 14px;
padding: 5px;
}
.toggle-checkbox-cell-auto-size {
padding: 8px 0;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
.checkbox {
padding-right: 12px;
display: inline-block;
}
label {
padding-bottom: 4px;
display: block;
}
input, select {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
input[type=checkbox]+label {
display: inline-block;
width: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'cdn:': 'https://cdn.mescius.io/demoapps/packages/spreadjs/19.1.2-master-2026-06-10-2131/'
},
// map tells the System loader where to look for things
map: {
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'cdn:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-io': 'cdn:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-angular': 'cdn:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
