Check Box

The CheckBox represents a check box cell. This can be useful when you want to have some sort of form in your page that users can fill out, and it makes getting what they have selected easy to do.

<p>To create a check box cell, follow this example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> c = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.CheckBox(); sheet.setCellType(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>, c, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>The <strong>CheckBox</strong> can support a three-state check box. You can use the <strong>isThreeState</strong> method to get and set whether the check box supports three states. For example:</p> <pre><code class="hljs js language-js"> c.isThreeState(<span class="hljs-literal">true</span>); <span class="hljs-keyword">var</span> state = c.isThreeState(); </code></pre> <p>The three states are true, false, or indeterminate. Every state has its own text; you can use the <strong>textTrue</strong>, <strong>textFalse</strong>, and <strong>textIndeterminate</strong> methods to get and set these states' text. For example:</p> <pre><code class="hljs js language-js"> c.isThreeState(<span class="hljs-literal">true</span>); c.textTrue(<span class="hljs-string">'Check state'</span>); c.textFalse(<span class="hljs-string">'UnCheck state'</span>); c.textIndeterminate(<span class="hljs-string">'Indeterminate state'</span>); </code></pre> <p>You can use the <strong>caption</strong> method to get and set the caption of the check box cell. Use the <strong>textAlign</strong> method to get and set the text alignment relative to the check box. The setting is a <strong>CheckBoxTextAlign</strong> enumeration value.</p> <ul> <li><strong>top: Text is on top of the check box.</strong></li> <li><strong>bottom: Text is below the check box.</strong></li> <li><strong>left: Text is to the left of the check box.</strong></li> <li><strong>right: Text is to the right of the check box.</strong></li> </ul> <pre><code class="hljs js language-js"> c.caption(<span class="hljs-string">'Check Box'</span>); c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left); </code></pre>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.bind(spreadNS.Events.SelectionChanged, function() { propertyChange(false); }); sheet.suspendPaint(); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 150); sheet.setRowHeight(1, 35); sheet.setValue(1, 1, "caption"); sheet.getCell(1, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center).foreColor("green"); var captionCellType = new GC.Spread.Sheets.CellTypes.CheckBox(); captionCellType.caption("Caption"); sheet.setCellType(1, 2, captionCellType); sheet.getCell(1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setRowHeight(3, 35); sheet.setValue(3, 1, "threeState"); sheet.getCell(3, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center).foreColor("red"); var threeStateCellType = new GC.Spread.Sheets.CellTypes.CheckBox(); threeStateCellType.isThreeState(false); threeStateCellType.textTrue("Checked!"); threeStateCellType.textFalse("Check Me!"); sheet.setCellType(3, 2, threeStateCellType); sheet.getCell(3, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setRowHeight(5, 35); sheet.setValue(5, 1, "textAlign"); sheet.getCell(5, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center).foreColor("blue"); var textAlignCellType = new GC.Spread.Sheets.CellTypes.CheckBox(); textAlignCellType.isThreeState(false); textAlignCellType.caption("textAlign"); textAlignCellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom); sheet.setCellType(5, 2, textAlignCellType); sheet.getCell(5, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.resumePaint(); _getElementById("changeProperty").addEventListener('click',function() { propertyChange(true); }); function propertyChange(isSet) { 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; } if (!isSet) { _getElementById("changeProperty").removeAttribute("disabled"); 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("selCheckBoxCellAlign").value=checkboxCellType.textAlign(); } 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); } checkboxCellType.textAlign(parseInt(_getElementById("selCheckBoxCellAlign").value)); } } sheet.repaint(); } function getActualRange(range, maxRowCount, maxColCount) { 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 _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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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"> <labe>Select the check box cell in Spread and edit its options with these text boxes.</labe> </div> <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" /> </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 class="option-row"> <label></label> <input type="button" id="changeProperty" value="Update" /> </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; } .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; }