SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage User Interface / Cell Types / Custom Cell
In This Topic
    Custom Cell
    In This Topic

    You can implement a custom cell using the Base class.

    Custom cell

    Using Code

    This example creates two custom cells (A1 and B1).

    JavaScript
    Copy Code
    //Custom Cell Type
             function FivePointedStarCellType() {
                 this.fillStyle = "orange";
                 this.size = 10;
             }
             FivePointedStarCellType.prototype = new GC.Spread.Sheets.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 = this.fillStyle;
                 } 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 };
            spread.commandManager().execute({cmd: "editCell", sheetName: activeSheet.name(), row: row, col: col, newValue: newValue});
                     return true;
                 }
                 return false;
             };
            function FullNameCellType() {
             }
             FullNameCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
             FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
                 if (value) {
                     GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, context]);
                 }
             };
             FullNameCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect, context) {
                 if (editorContext) {
                     $(editorContext).width(cellRect.width);
                     $(editorContext).height(100);
                 }
             };
             FullNameCellType.prototype.createEditorElement = function (context) {
                 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, context) {
                 //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,context) {
                 if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) {
                     return true;
                 }
                 return false;
             };
             $(function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
                 var sheet = spread.getActiveSheet();
                 sheet.suspendPaint();
                 sheet.setCellType(0, 0, new FivePointedStarCellType());
                 sheet.setValue(0, 0, true);
                 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.resumePaint();
             });
    
    See Also