I'm using the JSLink feature to put some buttons at the top of a list view. A screenshot of the relevant code is posted below. It's working, but a few users have noted that the column names row disappeared. They should be right below the buttons (second screenshot), but don't appear at all. I used the F12 developer tools to inspect elements on the page, but couldn't find that row. I think it's because the JSLink script is overriding the header, and that row is part of the original header.

Is it possible to have a custom header AND the original column names on a list view?

Fig. 1 - the custom header code: enter image description here

Fig. 2 - the custom header seen on page: enter image description here


Can you change your logic as below

(function () {    
    var requestCtx = {};
    requestCtx.Templates = {};
    requestCtx.Templates.Header = overrideHeader;



function overrideHeader(ctx) {
    var htmlTmp = RenderHeaderTemplate(ctx);        
    htmlTmp += "<a href='#'>Refresh</a>";

    return htmlTmp;     

I am using RenderHeaderTemplate to get the existing header template.

|improve this answer|||||
  • Thank you! I replaced 'RenderTableHeader' with 'RenderHeaderTemplate' and my column names are back where they should be. – Omegacron Jul 13 '17 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.