JSLink - Client side rendering -How to render custom display name with ICON in the list view?

Question

I have been playing with JSlink and CSR. I was able to modify headers in my table with this code:

(function () {


function preTaskFormRenderer(renderCtx) {
   modifyHeaderData(renderCtx);       
}


function modifyHeaderData(renderCtx)
{
  var viewTitle = renderCtx.viewTitle;
  var linkTitleField = renderCtx.ListSchema.Field[5];
  linkTitleField.DisplayName = "Changed Name of the column";

  var linkTitleField = renderCtx.ListSchema.Field[6];
  linkTitleField.DisplayName = "Awesome Column Flag";
}

function registerRenderer()
{
  var ctxForm = {};
  ctxForm.Templates = {};
  ctxForm.OnPreRender = preTaskFormRenderer;
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
} 

ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();

But I would like to display in the column title a picture, but when I use simple html (), instead of picture, it will just show the html as normal text. Do you have an idea how to display the name as HTML?

Answer 1

This worked for an announcements list. You need to write your code in 'OnPostRender'. Check the rendered DOM and modify the code in 'postRenderHandler' function if needed. Add the required html for displaying your icon. You might want to add some validations to make sure the code doesn't throw any errors.

(function () { 


    // jQuery library is required in this sample 
    // Fallback to loading jQuery from a CDN path if the local is unavailable 
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>')); 

    var ctx = {}; 
    ctx.OnPostRender = postRenderHandler;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); 


})(); 

function postRenderHandler(ctx) {
    var titleFieldDisplayName = ctx.ListSchema.Field[0].DisplayName;
    console.log(titleFieldDisplayName);
    $("div[displayname='" + titleFieldDisplayName + "']").prepend("<b>html before </b>");
    $("div[displayname='" + titleFieldDisplayName + "']").append("<b> html after </b>");

}

Answer 2

A no JQuery solution for adding images to a ListView header

There are lots of images available;
Use https://github.com/purtuga/SPImages/ to browse the default _layouts/images folders

var displayname='Due Date';
var el=document.querySelector("DIV[displayname='" + displayname + "'] A");
el.innerHTML = "<img src='/_layouts/images/ADDTOFAVORITES.GIF' />" + "myLabel";

if you want to target by columnNr you can do

var columnNr=3;
var el=document.querySelectorAll("DIV[ctxnum] A")[ columnNr ];
el.innerHTML = "<img src='/_layouts/images/ADDTOFAVORITES.GIF' />" + "myLabel";

Notes:

• the Selector selects the A tag and not just the outer DIV, so the IMG gets the same click behaviour as the columnheader

• if you want to keep the existing label use:

    el.innerHTML = "<img src='YOURIMAGEURL' />" + el.innerHTML;
  

• with multiple Views on one page you can narrow this down with the ctx ID:

    var el=document.querySelectorAll("DIV[ctxnum='26'] A")[ columnNr ];
  

iCSR-headers

Answer 3

A cleaner and nicer solution would be to override the RenderHeaderTemplate(a,b) function. In this way you have full control of the creation of the <thead> and there is no need to look up dom elements with JS or JQuery.