Trim Cell Text with Ellipsis in SpreadJS

If your text overflows the cell bounds then an ellipsis should be appended to the text and the rest is cut off. With this the user would be well aware of the fact that there is some amount of text that they can not see. Wouldn’t this be a nice feature for the SpreadJS cells as well? Unfortunately, SpreadJS doesn't provide a built-in function that would show ellipsis in the text when it is too long for the width of the column it is displayed in. i.e. SpreadJS does not cut off text at all even if the text does not fit into cell size. However the good news is that we can still achieve the same in SpreadJS using CustomCellType and we will name this as EllipsisTextCellType for demonstration purpose. And this is how our output will look like:- The following code will add the ellipsis by overriding EllipsisTextCellType's Paint event. And then clicking on cell with ellipsis will show full text of the cell to the user.

var ns = $.wijmo.wijspread;  
$(document).ready(function () {  
    var spread = new GcSpread.Sheets.Spread($("#ss").get(0), { sheetCount: 3 });  
    var sheet = spread.getActiveSheet();  
    sheet.setColumnCount(5);  
    sheet.setRowCount(5);  
    sheet.isPaintSuspended(true);  
    sheet.getCell(3, 1).text("This is ellipsis text.").cellType(new EllipsisTextCellType());  
    sheet.isPaintSuspended(false);  
});  

function EllipsisTextCellType() { }  
EllipsisTextCellType.prototype = new ns.TextCellType();  
EllipsisTextCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {  
    value = fittingString(ctx, value, w - 2);  
    ns.TextCellType.prototype.paint.apply(this, arguments);  
};  
function fittingString(c, str, maxWidth) {  
    var width = c.measureText(str).width;  
    var ellipsis = '…';  
    var ellipsisWidth = c.measureText(ellipsis).width;  
    if (width <= maxWidth || width <= ellipsisWidth) {  
        return str;  
    } else {  
        var len = str.length;  
        while (width >= maxWidth - ellipsisWidth && len-- > 0) {  
            str = str.substring(0, len);  
            width = c.measureText(str).width;  
        }  
        return str + ellipsis;  
    }  
};  

Simple it is! You can Download Sample for detailed implementation.