Use the following code to create a checkbox list cell:
The Checkbox List has same methods with Radio List.
Example:
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
initEvent(spread);
readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList());
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var radio = new GC.Spread.Sheets.CellTypes.CheckBoxList();
radio.items([
{ text: "sample1", value: "0" },
{ text: "sample2", value: "1" },
{ text: "sample3", value: "2" },
]);
sheet.setCellType(0, 1, radio);
sheet.defaults.rowHeight = 50;
sheet.defaults.colWidth = 200;
sheet.resumePaint();
};
function initEvent(spread) {
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function () {
var sheet = spread.getActiveSheet();
var row = sheet.getActiveRowIndex();
var column = sheet.getActiveColumnIndex();
var cellType = sheet.getCellType(row, column);
if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBoxList) {
readSetting(cellType);
} else {
readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList());
}
});
_getElementById("apply").addEventListener('click', function () {
applySetting();
});
_getElementById("addItem").addEventListener('click', function () {
var select = _getElementById("items");
var d = new Date();
d.setMonth(d.getMonth() + select.length);
var str = d.getFullYear() + "-" + (d.getMonth() + 1);
_getElementById("items").add(new Option(str, select.length));
});
_getElementById("removeItem").addEventListener('click', function () {
var select = _getElementById("items");
select[select.length - 1].remove();
});
_getElementById("direction-horizontal").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("direction-vertical").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("isFlowLayout").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("boxSize").addEventListener('change', function () {
applySetting();
})
};
function readSetting(cellType) {
var select = _getElementById("items");
select.options.length = 0;
var items = cellType.items();
for(var i=0; i<items.length; i++){
select.add(new Option(items[i].text, items[i].value));
}
if(cellType.direction() === GC.Spread.Sheets.CellTypes.Direction.horizontal) {
_getElementById("direction-horizontal").checked = true;
} else {
_getElementById("direction-vertical").checked = true;
}
if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.right) {
_getElementById("textAlign-right").checked = true;
} else {
_getElementById("textAlign-left").checked = true;
}
_getElementById("isFlowLayout").checked = cellType.isFlowLayout();
_getElementById("rowCount").value = cellType.maxRowCount();
_getElementById("columnCount").value = cellType.maxColumnCount();
_getElementById("space-horizontal").value = cellType.itemSpacing().horizontal;
_getElementById("space-vertical").value = cellType.itemSpacing().vertical;
_getElementById("boxSize").value = cellType.boxSize();
refreshMaxCountVisible();
}
function refreshMaxCountVisible() {
if (_getElementById("isFlowLayout").checked) {
_getElementById("rowCountDiv").style.display="none";
_getElementById("columnCountDiv").style.display="none";
} else if (_getElementById("direction-vertical").checked) {
_getElementById("rowCountDiv").style.display="block";
_getElementById("columnCountDiv").style.display="none";
} else {
_getElementById("rowCountDiv").style.display="none";
_getElementById("columnCountDiv").style.display="block";
}
}
function applySetting() {
var sheet = spread.getActiveSheet();
var row = sheet.getActiveRowIndex();
var column = sheet.getActiveColumnIndex();
var cellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
var items = [];
var select = _getElementById("items");
for (var i = 0; i < select.length; i++) {
items.push({ text: select[i].text, value: select[i].value });
}
cellType.items(items);
if (_getElementById("direction-horizontal").checked) {
cellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal);
} else {
cellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
}
if (_getElementById("textAlign-right").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
} else {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left);
}
cellType.isFlowLayout(_getElementById("isFlowLayout").checked);
if (_getElementById("rowCount").value) {
cellType.maxRowCount(_getElementById("rowCount").value);
}
if (_getElementById("columnCount").value) {
cellType.maxColumnCount(_getElementById("columnCount").value);
}
cellType.itemSpacing({
horizontal: _getElementById("space-horizontal").value,
vertical: _getElementById("space-vertical").value
});
var boxSizeValue = _getElementById("boxSize").value;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
cellType.boxSize(boxSizeValue);
} else {
cellType.boxSize(boxSize);
}
sheet.getCell(row, column).cellType(cellType);
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/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">
<p>Change any options below then press the Set button to apply your changes.</p>
<label>Items:</label>
</div>
<div class="option-row">
<select id="items" size="5"></select>
<input type="button" id="addItem" value="Add" />
<input type="button" id="removeItem" value="Remove" />
</div>
<hr>
<div class="option-row">
<label>Direction:</label>
</div>
<div class="option-row">
<input type="radio" name="direction" id="direction-horizontal" checked="checked" /><label for="direction-horizontal">horizontal</label>
<input type="radio" name="direction" id="direction-vertical" /><label for="direction-vertical">vertical</label>
</div>
<div class="option-row">
<label>Text Align:</label>
</div>
<div class="option-row">
<input type="radio" name="textAlign" id="textAlign-left" checked="checked" /><label for="textAlign-left">left</label>
<input type="radio" name="textAlign" id="textAlign-right" /><label for="textAlign-right">right</label>
</div>
<hr>
<div class="option-row">
<label for="isFlowLayout">Flow Layout</label>
<input type="checkbox" id="isFlowLayout" checked />
</div>
<div class="option-row" id="rowCountDiv">
<label for="rowCount">Max Row Count:</label>
<input type="text" id="rowCount" value="2" />
</div>
<div class="option-row" id="columnCountDiv">
<label for="columnCount">Max Column Count:</label>
<input type="text" id="columnCount" value="2" />
</div>
<div class="option-row">
<label for="space-horizontal">Item horizontal Spacing:</label>
<input type="text" id="space-horizontal" value="8" />
</div>
<div class="option-row">
<label for="space-vertical">Item vertical Spacing:</label>
<input type="text" id="space-vertical" value="2" />
</div>
<hr>
<div class="option-row">
<label for="boxSize">Box Size</label>
<input type="text" id="boxSize" class="boxSize"/>
</div>
<div class="option-row">
<input type="button" id="apply" value="Set" />
</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;
}
.boxSize{
display: block;
}
.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;
}
.option-row {
padding-bottom: 5px;
}
label {
display:inline-block;
}
input{
padding: 4px 8px;
box-sizing: border-box;
}
select{
width: 100%;
}
input[type=checkbox]+label {
display: inline-block;
width: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
