Use the following code to create a buttonList cell:
The ButtonList Cell Type includes items, isFlowLayout, maxRowCount, maxColumnCount, itemSpacing, and direction methods, similar to the Radio List Cell Type and Checkbox List Cell Type.
You can use the padding method to get or set the padding in pixels with css-like format.
You can use the selectedBackColor and selectedForeColor methods to configure the selected style.
You can use the selectionMode method to set the single select or multiple select mode.
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/@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>
<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;
}
