Add Excel Comments in SpreadJS

SpreadJS has a very flexible API which provides for programmable customization. While you can change individual cells and their settings through methods, you can also make much deeper customization like owner-draw and change behavior. SpreadJS provides CellType for each cell which permits them to have different UI and behaviors. CellType can be used for different types of data like texture, Boolean, and hyperlink… Plus, you can also define your own CellType through the CustomCellType class. Here is a sample that illustrates how you can customize a simple Excel-like comments feature. In Excel, if a cell has comments, there is a red triangle display at the right-top corner of the cell and when you mouse hover on the cell the comments will popup. We can change the appearance of a cell by inheriting from TextCellType class, and customize the behavior of the mouse to instead popup a comments panel which is simulated with a div element. The first step is to create an HTML page, then add JavaScript library and CSS references in the head tag, and add a SpreadJS place holder element in the body tag, please refer to here for more information. Then, define the CommentsCellType class which is inherited from TextCellType class.

function CommentsCellType(text) {
this.text = text;
}
CommentsCellType.prototype = new $.wijmo.wijspread.TextCellType();

Here we need to override some of the base class functions, Let's start with the paint function and draw a red triangle at the right-top corner.

CommentsCellType.prototype.paint = function(ctx, value, x, y, w, h, style, options) {
$.wijmo.wijspread.TextCellType.prototype.paint(ctx,value,x,y,w,h,style,options);
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(x+w-7,y);
ctx.lineTo(x+w,y);
ctx.lineTo(x+w,y+7);
ctx.fill();
};

You will need to override the getHitInfo function that allows the cell type can get mouse information like enter, leave, hover, click etc.

CommentsCellType.prototype.getHitInfo = function (x, y, row, col, cellStyle, cellRect, sheetArea) {
return {x: x, y: y, row: row, col: col, cellStyle: cellStyle, cellRect: cellRect, sheetArea: sheetArea};
}

Next we'll customize the mouse behavior, so that when the mouse enters the cell, a div element is created and prompts a popup.

CommentsCellType.prototype.processMouseEnter = function (hitinfo) {  
    if (!this._commentsElement) {  
        var div = document.createElement("div");  
        $(div).css("position", "absolute")  
            .css("border", "1px black solid")  
            .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")  
            .css("font", "9pt Arial")  
            .css("background", "#FFFFEE")  
            .css("padding", 5);  

        this._commentsElement = div;  
    }  
    $(this._commentsElement).html(this.text)  
        .css("top", hitinfo.y + 15)  
        .css("left", hitinfo.x + 15);  
    $(this._commentsElement).hide();  
    document.body.insertBefore(this._commentsElement, null);  
    $(this._commentsElement).show("fast");  
};

And when the mouse leaves the cell, we need to close the comments div element.

CommentsCellType.prototype.processMouseLeave = function (hitinfo) {
if (this._commentsElement) {
document.body.removeChild(this._commentsElement);
this._commentsElement = null;
}
};

Now that the CommentsCellType is defined, we can initialize SpreadJS and set this cell type instance to a cell.

$("#ss").wijspread();
var spread = $("#ss").wijspread("spread");
var sheet = spread.getActiveSheet();
spread.useWijmoTheme = true;
spread.repaint();
sheet.getCell(1, 1).value("comments").cellType(new CommentsCellType("Eric:
this cell has comments!"));

OK, done! The cell [1,1] now has comments, a red triangle displayed in the right-top corner of the cell and when the mouse hovers over the cell, comments popup. Here is the sample so you may try it in action, and get the complete sample source code.