Displaying ImageButton in SpreadJS

The ButtonCellType in SpreadJS enables the users to display buttons with static text in grid cells. There are another type of buttons known as ImageButton which displays an image on the button rather than the text.The ButtonCellType in SpreadJS does not provides any option to display images on the buttons. This blog describes how we can add ImageButton to SpreadJS cells which will display an image on the button instead of static text. We will create a custom ImageButtonCellType derived from ButtonCellType, and override the paint function of ButtonCellType. Now this method paints an image on the button, when the button is rendered. Here is the code for the same:

function ImageButtonCellType() { } ImageButtonCellType.prototype = new $.wijmo.wijspread.ButtonCellType(); // Override paint function, drag a red triangle at top-right corner of the cell ImageButtonCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {     $.wijmo.wijspread.ButtonCellType.prototype.paint.apply(this, arguments);     ctx.drawImage(imageObj, x + 4, y + 4, w - 8, h - 8); };

Later, we will create an instance of ImageButtonCellType and assign it to a SpreadJS cell, here is the code:

var spread = $("#ss").wijspread("spread"); var sheet = spread.getActiveSheet(); sheet.getCell(1, 1).cellType(new ImageButtonCellType());

Here is the final output: You may refer to the attached sample which implements the above approach.