SpreadJS Documentation
setEditorValue Method
The DOM element that was created by the createEditorElement method.
The value returned from the active cell.
The context associated with the cell type. See the Remarks for more information.
Sets the editor's value.
Syntax
var instance = new GcSpread.Sheets.CustomCellType();
var returnValue; // Type: any
returnValue = instance.setEditorValue(editorContext, value, context);
function setEditorValue( 
   editorContext : object,
   value : object,
   context : object
) : any;

Parameters

editorContext
The DOM element that was created by the createEditorElement method.
value
The value returned from the active cell.
context
The context associated with the cell type. See the Remarks for more information.
Example
This example creates custom cells.
//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);
Remarks

The context parameter can include the following items:

Item Type Description
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.

 

See Also

Reference

CustomCellType type

 

 


Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.