GcSpread.Sheets Namespace > CustomCellType type : isReservedKey Method |
var instance = new GcSpread.Sheets.CustomCellType(); var value; // Type: boolean value = instance.isReservedKey(event, context);
true
if the cell type handles keyboard events itself; otherwise, false
.//Custom Cell Type function FivePointedStarCellType() { this.size = 10; } FivePointedStarCellType.prototype = new GcSpread.Sheets.CustomCellType(); 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; for (var i = 0; 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 cellEditInfo = { row: row, col: col, newValue: newValue }; var undoAction = new GcSpread.Sheets.UndoRedo.CellEditUndoAction(sheet, cellEditInfo); sheet.doCommand(undoAction); return true; } return false; }; function FullNameCellType() { } FullNameCellType.prototype = new GcSpread.Sheets.CustomCellType(); FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) { if (value) { GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, context]); } }; FullNameCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) { if (editorContext) { $(editorContext).width(cellRect.width); $(editorContext).height(100); } }; FullNameCellType.prototype.createEditorElement = function () { var div = document.createElement("div"); var $div = $(div); $div.attr("gcUIElement", "gcEditingInput"); $div.css("background-color", "white"); $div.css("position", "absolute"); $div.css("overflow", "hidden"); $div.css("border", "2px #5292f7 solid"); var $span1 = $("<span></span>"); $span1.css("display", "block"); var $span2 = $("<span></span>"); $span2.css("display", "block"); var $input1 = $("<input type='text'/>"); var $input2 = $("<input type='text'/>"); $div.append($span1); $div.append($input1); $div.append($span2); $div.append($input2); return div; }; FullNameCellType.prototype.getEditorValue = function (editorContext) { if (editorContext && editorContext.children.length === 4) { var input1 = editorContext.children[1]; var firstName = $(input1).val(); var input2 = editorContext.children[3]; var lastName = $(input2).val(); return { firstName: firstName, lastName: lastName }; } }; FullNameCellType.prototype.setEditorValue = function (editorContext, value) { if (editorContext && editorContext.children.length === 4) { var span1 = editorContext.children[0]; $(span1).text("First Name:"); var span2 = editorContext.children[2]; $(span2).text("Last Name:"); if (value) { var input1 = editorContext.children[1]; $(input1).val(value.firstName); var input2 = editorContext.children[3]; $(input2).val(value.lastName); } } }; FullNameCellType.prototype.isReservedKey = function (e) { //cell type handle tab key by itself return (e.keyCode === GcSpread.Sheets.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; }; var spread1 = $("#spreadContainer").data("spread"); var sheet = spread1.getActiveSheet(); sheet.isPaintSuspended(true); sheet.setCellType(0, 0, new FivePointedStarCellType()); sheet.setRowHeight(0, 200); sheet.setColumnWidth(0, 200); sheet.setCellType(0, 1, new FullNameCellType()); sheet.setColumnWidth(1, 200); sheet.setValue(0, 1, {firstName:"Bob", lastName:"Smith"}); sheet.isPaintSuspended(false);
You can override the isReservedKey method to customize the reserved key. In display mode, once isReservedKey returns True, the sheet will not handle the reserved key event. The event is handled by the processKeyDown and processKeyUp methods.
The context parameter can include the following items:
Item | Type | Description |
context.isEditing | boolean | Whether the cell is being edited. |
context.sheet | GcSpread.Sheets.Sheet instance | Indicates the current sheet. |
context.row | number | The row index. |
context.col | number | The column index. |
context.sheetArea | GcSpread.Sheets.SheetArea | The current sheet area. |