Checkbox List

The Checkbox List CellType provides users with the ability to choose and select multiple items from a list of options that are listed within a cell.

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; }