Replacing text with icons

Tamras

Using datatable on SharePoint Online, is there a way to replace the text with icons based on values?
Example: Value = In, display <img src='/_layouts/images/KPIDefault-2.GIF'/>

I was using client side rendering but can't figure out how to do this in datatable.

(function() {
    var oFldCtx = {};
    oFldCtx.Templates = {};
    oFldCtx.Templates.Fields = {"InOut": {"View": overrideStatus} };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(oFldCtx);
})();

function overrideStatus(ctx) {
    var oStatus = ctx.CurrentItem.InOut;
    
    if (oStatus == 'In')    {
        return "<img src='/_layouts/images/KPIDefault-0.GIF'/>";
    }
    if (oStatus == 'Out-A')     {
        return "<img src='/_layouts/images/KPIDefault-2.GIF'/>";
    }
    if (oStatus == 'Out-P')     {
        return "<img src='/_layouts/images/KPIDefault-1.GIF'/>";
    }

}

Tamras

I already referred to this page but still unclear.

Tamras

Figured this out by adding:

            "columnDefs": [ {
                "targets": 1,
                "className": "IOBoard",
                "createdCell": function (td, cellData, rowData, row, col) {
                    if(cellData == 'In') {
                        $(td).html("<img src='/_layouts/images/KPIDefault-0.GIF'/>");
                    }
                    if(cellData == 'Out-A') {
                        $(td).html("<img src='/_layouts/images/KPIDefault-2.GIF'/>");
                    }
                    if(cellData == 'Out-P') {
                        $(td).html("<img src='/_layouts/images/KPIDefault-2.GIF'/>");
                    }

                }
            }],

bindrid

you probably should be using the render function in columnDefs or columns options

allan

Agreed - using a rendering function is how I would recommend you do that.

Allan

Tamras

Thanks for the suggestion. I used render as follows:

"aoColumns": [
                { "mData": "Title" },
                { "mData": "InOut", 
                    "render": function(data, type, row) {
                        if(data == 'In') {
                            return '<img src='+ "'/_layouts/images/KPIDefault-0.GIF'" + '/>';
                        }
                        if(data == 'Out-A') {
                            return '<img src='+ "'/_layouts/images/KPIDefault-2.GIF'" + '/>';
                        }
                        if(data == 'Out-P') {
                            return '<img src='+ "'/_layouts/images/KPIDefault-2.GIF'" + '/>';
                        }
                    }
                },