ButtonList

Similar to the check box list and radio list usage but the ButtonList list can do single select or multiple selection.

<p>Use the following code to create a buttonList cell:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> cellType = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.ButtonList(); cellType.items([{<span class="hljs-attr">text</span>:<span class="hljs-string">"a"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">1</span>},{<span class="hljs-attr">text</span>:<span class="hljs-string">"b"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">2</span>},{<span class="hljs-attr">text</span>:<span class="hljs-string">"c"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">3</span>}]); activeSheet.getCell(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>).cellType(cellType); </code></pre> <p>The <strong>ButtonList Cell Type</strong> includes <strong>items</strong>, <strong>isFlowLayout</strong>, <strong>maxRowCount</strong>, <strong>maxColumnCount</strong>, <strong>itemSpacing</strong>, and <strong>direction</strong> methods, similar to the <strong>Radio List Cell Type</strong> and <strong>Checkbox List Cell Type</strong>.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> cellType = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.ButtonList(); cellType.items([{<span class="hljs-attr">text</span>:<span class="hljs-string">"a"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">1</span>},{<span class="hljs-attr">text</span>:<span class="hljs-string">"b"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">2</span>},{<span class="hljs-attr">text</span>:<span class="hljs-string">"c"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">3</span>}]); cellType.isFlowLayout(<span class="hljs-literal">false</span>); cellType.maxColumnCount(<span class="hljs-number">2</span>); cellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical); cellType.itemSpacing({ <span class="hljs-attr">horzontial</span>:<span class="hljs-number">80</span>, <span class="hljs-attr">vertical</span>:<span class="hljs-number">20</span> }); activeSheet.getCell(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>).cellType(cellType); </code></pre> <p>You can use the <strong>padding</strong> method to get or set the padding in pixels with css-like format.</p> <p>You can use the <strong>selectedBackColor</strong> and <strong>selectedForeColor</strong> methods to configure the selected style.</p> <p>You can use the <strong>selectionMode</strong> method to set the single select or multiple select mode.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> cellType = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.ButtonList(); cellType.items([{<span class="hljs-attr">text</span>:<span class="hljs-string">"a"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">1</span>},{<span class="hljs-attr">text</span>:<span class="hljs-string">"b"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">2</span>},{<span class="hljs-attr">text</span>:<span class="hljs-string">"c"</span>,<span class="hljs-attr">value</span>:<span class="hljs-number">3</span>}]); cellType.padding(<span class="hljs-string">"5, 2, 0, 2"</span>); cellType.selectedBackColor(<span class="hljs-string">"#FFFF00"</span>); cellType.selectedForeColor(<span class="hljs-string">"#FFFF00"</span>); cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.single); activeSheet.getCell(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>).cellType(cellType); </code></pre>
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.ButtonList()); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); var radio = new GC.Spread.Sheets.CellTypes.ButtonList(); 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.ButtonList) { readSetting(cellType); } else { readSetting(new GC.Spread.Sheets.CellTypes.ButtonList()); } }); _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(); }); }; 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.selectionMode() === GC.Spread.Sheets.CellTypes.SelectionMode.signle) { _getElementById("selectionMode-single").checked = true; } else { _getElementById("selectionMode-multiple").checked = true; } if(cellType.direction() === GC.Spread.Sheets.CellTypes.Direction.horizontal) { _getElementById("direction-horizontal").checked = true; } else { _getElementById("direction-vertical").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("padding").value = cellType.padding(); _getElementById("selectedBackColor").value = cellType.selectedBackColor(); _getElementById("selectedForeColor").value = cellType.selectedForeColor(); 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.ButtonList(); 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("selectionMode-single").checked) { cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.single); } else { cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.multiple); } if (_getElementById("direction-horizontal").checked) { cellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal); } else { cellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical); } 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 }); cellType.padding(_getElementById("padding").value); cellType.selectedBackColor(_getElementById("selectedBackColor").value); cellType.selectedForeColor(_getElementById("selectedForeColor").value); 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/@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"> <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> <div class="option-row"> <label>Selection Mode:</label> </div> <div class="option-row"> <input type="radio" name="selectionMode" id="selectionMode-single" checked="checked" /><label for="selectionMode-single">single</label> <input type="radio" name="selectionMode" id="selectionMode-multiple" /><label for="selectionMode-multiple">multiple</label> </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 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> <div class="option-row"> <label for="padding">Padding:</label> <input type="text" id="padding" value="2" /> </div> <div class="option-row"> <label for="selectedBackColor">Selected BackColor:</label> <input type="text" id="selectedBackColor" value="2" /> </div> <div class="option-row"> <label for="selectedForeColor">Selected ForeColor:</label> <input type="text" id="selectedForeColor" value="2" /> </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; } .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; }