To set the cell type, first create a cellType object, then use the setCellType method to set the cellType for the sheet, cell, column, or row. For example:
Sometimes you can use the cellType with data binding by binding a cellType to a column. For example:
After you set the cell type you can use the getCellType method to get the cell type. If you want to remove the cell type, set the value to null or undefined.
SpreadJS provides an event (ButtonClicked) on the spreadsheet. The event occurs when you click a button, check box, or hyperlink in a cell. For example:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets,
sheet = spread.getSheet(0);
var eventTrigger = document.getElementById("eventTrigger");
spread.bind(spreadNS.Events.ButtonClicked, function (e, args) {
var text = "";
if (eventTrigger.value === "undefined"){
eventTrigger.value = "";
}
var sheet = args.sheet, row = args.row, col = args.col;
var cellType = sheet.getCellType(row, col);
if (cellType instanceof GC.Spread.Sheets.CellTypes.Button) {
text = eventTrigger.value + "You click a button.\n";
}
if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBox) {
text = eventTrigger.value + "You click a check box.\n";
}
if (cellType instanceof GC.Spread.Sheets.CellTypes.HyperLink) {
text = eventTrigger.value + "You click a hyperlink.\n";
}
eventTrigger.value=text;
});
spread.bind(spreadNS.Events.CellClick, function (e, args) {
var text = "";
if (eventTrigger.value === "undefined"){
eventTrigger.value = "";
}
var sheet = args.sheet, row = args.row, col = args.col;
var cellType = sheet.getCellType(row, col);
if (cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox) {
text = eventTrigger.value + "You click a combo box.\n";
}
eventTrigger.value=text;
});
sheet.suspendPaint();
sheet.name('Basic Usage');
sheet.setColumnWidth(2, 140);
sheet.setColumnWidth(1, 120);
sheet.setRowHeight(1, 50);
var b0 = new spreadNS.CellTypes.Button();
b0.text("Margin");
b0.marginLeft(15);
b0.marginTop(7);
b0.marginRight(15);
b0.marginBottom(7);
sheet.setCellType(1, 2, b0, spreadNS.SheetArea.viewport);
sheet.setValue(1, 1, "ButtonCellType");
var c = new spreadNS.CellTypes.CheckBox();
c.isThreeState(false);
c.textTrue("Checked!");
c.textFalse("Check Me!");
sheet.setCellType(2, 2, c, spreadNS.SheetArea.viewport);
sheet.setValue(2, 1, "CheckBoxCellType");
var combo = new spreadNS.CellTypes.ComboBox();
combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);
combo.editorValueType(spreadNS.CellTypes.EditorValueType.text);
sheet.getCell(3, 2, spreadNS.SheetArea.viewport).cellType(combo).value("Grape");
sheet.setValue(3, 1, "ComboBoxCellType");
var h = new spreadNS.CellTypes.HyperLink();
h.text("SpreadJS Overview");
sheet.setCellType(4, 2, h, spreadNS.SheetArea.viewport);
sheet.getCell(4, 2, spreadNS.SheetArea.viewport).value("http://developer.mescius.com/en/spreadjs/").hAlign(spreadNS.HorizontalAlign.center);
sheet.setValue(4, 1, "HyperLinkCellType");
sheet.resumePaint();
var sheet1 = spread.getSheet(1);
sheet1.name('DataBind');
sheet1.suspendPaint();
var _lines = ["Computers", "Washers", "Stoves"];
var _colors = ["Red", "Green", "Blue", "White"];
var _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"];
var lineCellType = new spreadNS.CellTypes.ComboBox();
lineCellType.items(_lines);
var colorCellType = new spreadNS.CellTypes.ComboBox();
colorCellType.items(_colors);
var checkBoxCellType = new spreadNS.CellTypes.CheckBox();
var ratingCellType = new spreadNS.CellTypes.ComboBox();
ratingCellType.items(_ratings);
var datasource = [
{ name: "Stoves S0", line: "Washers", color: "Green", discontinued: true, rating: "Average" },
{ name: "Computers C1", line: "Washers", color: "Green", discontinued: true, rating: "Average" },
{ name: "Washers W3", line: "Washers", color: "Green", discontinued: true, rating: "Average" }
];
var colInfos = [
{ name: "name", size: 100 },
{ name: "line", cellType: lineCellType, size: 80 },
{ name: "color", cellType: colorCellType },
{ name: "discontinued", cellType: checkBoxCellType, size: 80 },
{ name: "rating", cellType: ratingCellType }
];
sheet1.autoGenerateColumns = false;
sheet1.setDataSource(datasource);
sheet1.bindColumns(colInfos);
sheet1.resumePaint();
};
<!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">
This text box will display information about the different cell types that are interacted with.
<div class="option-row">
<textarea id="eventTrigger" style="width: 100%; height: 120px"></textarea>
</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;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
padding-bottom: 8px;
}
label {
padding-bottom: 4px;
display: block;
}
input {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
