Add custom cell image/overlay watermark

Question

I would like to be able to watermark a cell in spreadJs with a padlock icon. I want this to be always at the right center of the cell like the image below.

Is this possible?

I can see the below link does something similar, but this is stretched across the whole cell which I don't really want as the cell width and height could be any width and height so this would look odd.

I would like the cell to function as normal and keep all existing style other than having a watermark over the cell of the padlock where needed.

https://help.grapecity.com/spread/SpreadJSWeb/backimage.html

UPDATE

I've just come across the following which I think is a potential for this to work using a custom cell. Does anyone have a simple example they can share where all it is doing is having a custom icon added to an existing cell?

https://help.grapecity.com/spread/SpreadJSWeb/cellcustom.html

score 2 · Answer 1 · answered Mar 27 '19 at 14:40

You can create a custom CellType as you noted above.

Define the CellType:

function IconCellType() {
    }
    IconCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
    IconCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
        if (!ctx) {
            return;
        }

        GC.Spread.Sheets.CellTypes.Text.prototype.paint.call(this, ctx, value, x, y, w, h, style, context);

        ctx.save();

        // draw inside the cell's boundary
        ctx.rect(x, y, w, h);
        ctx.clip();

        let img = document.getElementById('lock');
        ctx.drawImage(img, x+w-20, y+h/2-10, 20, 20);

        ctx.restore();
    }

Then set the celltype:

var sheet = workbook.getActiveSheet();
sheet.getCell(1, 1).cellType(new IconCellType());

Please also note that the documentation links you added are for SpreadJS version 9. Go to the v12 Documentation for the most up to date documentation.

Thanks for the comment, i'm getting the following error with this code? gc.spread.sheets.all.12.0.7.min.js:25 Uncaught TypeError: e.format is not a function — user3284707, Mar 27 '19 at 14:48

score 0 · Accepted Answer · answered Apr 11 '19 at 13:56

SpreadJs support came back to me with the following example which suited my needs in case anyone else is strugglign with this for V12.7

Javascript

var spread;
var sheet;
$(document).ready(function () {
    spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
    sheet = spread.getActiveSheet();

    sheet.setColumnCount(5);
    sheet.setRowCount(5);
    sheet.suspendPaint();
    sheet.getCell(0, 0).text("This is Circle text.").cellType(new IconCellType(document.getElementById('icon-lock')));

    sheet.getCell(2, 0).text("Orange").cellType(new IconCellType(document.getElementById('icon-lock')));
    sheet.resumePaint();
});

function IconCellType(img) {
    this.typeName = "IconCellType";
    this.img = img;
}
IconCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
// EllipsisTextCellType.prototype
IconCellType.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();

    // draw text
    GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value, x+20, y, w-20, h, style, context]);
    ctx.beginPath();
    // let img = document.getElementById('icon-lock');
    ctx.drawImage(this.img, x + 2, y + 2, 16, 16);
    ctx.fill();
    ctx.stroke();

    ctx.restore();
};

HTML

<img id="icon-lock" style="display:none"  src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4Ij4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNOSw0OWMtMS4xLDAtMi0wLjktMi0yVjIzICBjMC0xLjEsMC45LTIsMi0yaDMyYzEuMSwwLDIsMC45LDIsMnYyNGMwLDEuMS0wLjksMi0yLDJIOXoiLz4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMzYsMjFjMCwwLDAtNC45LDAtNiAgYzAtNi4xLTQuOS0xMS0xMS0xMWMtNi4xLDAtMTEsNC45LTExLDExYzAsMS4xLDAsNiwwLDYiLz4KPHBhdGggZD0iTTI4LDMzYzAtMS43LTEuMy0zLTMtM2MtMS43LDAtMywxLjMtMywzYzAsMC45LDAuNCwxLjcsMSwyLjJWMzhjMCwxLjEsMC45LDIsMiwyYzEuMSwwLDItMC45LDItMnYtMi44ICBDMjcuNiwzNC43LDI4LDMzLjksMjgsMzN6Ii8+Cjwvc3ZnPgo="/>
<h1>SpreadJS</h1>
<div id="ss" style="width: 500px; height: 400px; border: 1px solid gray"></div>

Renders

Add custom cell image/overlay watermark

2 Answers2