You can customize the CellType by inheriting Base, and implementing the required methods, such as paint, createEditorElement, getEditorValue, and so on. After that you can use your custom CellType. For example:
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
//Custom Cell Type
function FivePointedStarCellType() {
this.size = 10;
}
FivePointedStarCellType.prototype = new spreadNS.CellTypes.Base();
FivePointedStarCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
if (!ctx) {
return;
}
ctx.save();
// draw inside the cell's boundary
ctx.rect(x, y, w, h);
ctx.clip();
ctx.beginPath();
if (value) {
ctx.fillStyle = "orange";
} else {
ctx.fillStyle = "gray";
}
var size = this.size;
var dx = x + w / 2;
var dy = y + h / 2;
ctx.beginPath();
var dig = Math.PI / 5 * 4;
ctx.moveTo(dx + Math.sin(0 * dig) * size, dy + Math.cos(0 * dig) * size);
for (var i = 1; i < 5; i++) {
ctx.lineTo(dx + Math.sin(i * dig) * size, dy + Math.cos(i * dig) * size);
}
ctx.closePath();
ctx.fill();
ctx.restore();
};
FivePointedStarCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
var xm = cellRect.x + cellRect.width / 2,
ym = cellRect.y + cellRect.height / 2,
size = 10;
var info = { x: x, y: y, row: context.row, col: context.col, cellRect: cellRect, sheetArea: context.sheetArea };
if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size) {
info.isReservedLocation = true;
}
return info;
};
FivePointedStarCellType.prototype.processMouseUp = function (hitInfo) {
var sheet = hitInfo.sheet;
if (sheet && hitInfo.isReservedLocation) {
var row = hitInfo.row, col = hitInfo.col, sheetArea = hitInfo.sheetArea;
var newValue = !sheet.getValue(row, col, sheetArea);
var spread = sheet.getParent();
spread.commandManager().execute({cmd: "editCell", sheetName: sheet.name(), row: row, col: col, newValue: newValue});
return true;
}
return false;
};
function FullNameCellType() {
}
FullNameCellType.prototype = new spreadNS.CellTypes.Base();
FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
if (value) {
spreadNS.CellTypes.Base.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, options]);
}
};
FullNameCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
if (editorContext) {
editorContext.style.width=cellRect.width;
editorContext.style.height=100;
return {height: 100};
}
};
FullNameCellType.prototype.createEditorElement = function () {
var div = document.createElement("div");
div.setAttribute("gcUIElement", "gcEditingInput");
div.style.backgroundColor= "white";
div.style.overflow= "hidden";
var span1 = document.createElement('span');
span1.style.display = "block";
var span2 = document.createElement("span");
span2.style.display = "block";
var input1 = document.createElement("input");
var input2 = document.createElement("input");
var type = document.createAttribute('type');
type.nodeValue="text";
var clonedType = type.cloneNode(true);
input1.setAttributeNode(type);
input2.setAttributeNode(clonedType);
div.appendChild(span1);
div.appendChild(input1);
div.appendChild(span2);
div.appendChild(input2);
return div;
};
FullNameCellType.prototype.getEditorValue = function (editorContext) {
if (editorContext && editorContext.children.length === 4) {
var input1 = editorContext.children[1];
var firstName = input1.value;
var input2 = editorContext.children[3];
var lastName = input2.value;
return { firstName: firstName, lastName: lastName };
}
};
FullNameCellType.prototype.setEditorValue = function (editorContext, value) {
if (editorContext && editorContext.children.length === 4) {
var span1 = editorContext.children[0];
span1.innerHTML="First Name:";
var span2 = editorContext.children[2];
span2.innerHTML="Last Name:";
if (value) {
var input1 = editorContext.children[1];
input1.value=value.firstName;
var input2 = editorContext.children[3];
input2.value=value.lastName;
}
}
};
FullNameCellType.prototype.isReservedKey = function (e) {
//cell type handle tab key by itself
return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey);
};
FullNameCellType.prototype.isEditingValueChanged = function(oldValue, newValue) {
if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) {
return true;
}
return false;
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 170);
var columnInfo = [
{ name: "result", displayName: "Result", cellType: new FivePointedStarCellType(), size: 50 },
{ name: "person", displayName: "Person", cellType: new FullNameCellType(), size: 170 }
];
var source = [
{ result: true, person: {firstName:"LeBron",lastName:"James"}},
{ result: false, person: { firstName: "Chris", lastName: "Bosh" } },
{ result: true, person: { firstName: "Dwyane", lastName: "Wade" } },
{ result: false, person: { firstName: "Mike", lastName: "Miller" } },
{ result: true, person: { firstName: "Mike", lastName: "Miller" } },
{ result: true, person: { firstName: "Udonis", lastName: "Haslem" } },
{ result: true, person: { firstName: "Mario", lastName: "Chalmers" } },
{ result: true, person: { firstName: "Joel", lastName: "Anthony" } },
{ result: false, person: { firstName: "Shane", lastName: "Battier" } },
{ result: false, person: { firstName: "Ray", lastName: "Allen" } },
{ result: true, person: { firstName: "James", lastName: "Jones" } },
{ result: false, person: { firstName: "Rashard", lastName: "Lewis" } },
{ result: true, person: { firstName: "Norris", lastName: "Cole" } },
{ result: true, person: { firstName: "Chris", lastName: "Andersen" } },
{ result: false, person: { firstName: "Jarvis", lastName: "Varnado" } },
{ result: true, person: { firstName: "Juwan", lastName: "Howard" } },
];
sheet.setDataSource(source);
sheet.bindColumns(columnInfo);
sheet.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" style="width:100%; height: 100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
