How to ensure client side rendering of list item is applied when 'Grouping' is enabled in the list view

Question

I've followed some instructions to create a JavaScript file that renders the Title column of a document library as a link to the file in order to obscure the less user friendly name column.

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'LinkedToTitle': { 'View': '<a class="ms-listlink ms-draggable" href="<#= ctx.CurrentItem.FileRef #>" > <#= ctx.CurrentItem.Title #></a>' }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Everything works well until I configure grouping in the view. When I expand a group, the column is simply left blank (but I can refresh the page and get the links back).

I get the same results no matter where I apply the JSLink: to the XML Field definition, editing the web part, or editing the aspx file of the view.

Using server side rendering works, however I lose the View Selector links at the top of the page.

Is there a way to have my links show up and keep my view selectors? Preferably with CSR and not XSL.

Answer 1

I have just managed to do something similar to what you were working on. Here is a link to my question where I have posted the working (so far) script.

Do not apply CSR Override in QuickEdit Mode

I thought it might still be relevant to you as it works in both MDS and non-MDS modes.

Disclaimer What I have found that works for MDS so far (note that I am using on-premises and have the ability to upload to layouts) ... Also, apologies if I have not correctly stated or understood any of the points below. Javascript and MDS is still in the black magic category for me ;-)

1. Use a self executing wrapper function such as -

   function $global*filenameWithoutExtension*() { ... your code } $global*filenameWithoutExtension*();

2. Upload your file to _layouts making sure that there are no extra '.'s in the name. For a library like jQuery, I actually rename the file and add the wrapper function around the existing minified jQuery.

3. When registering the script (scriptlink etc) use the plain script name (which SharePoint then looks for in _layouts).
4. If using a jslink, DO NOT use the ~layouts tag as when it renders the script reference in the page, it omits the leading /. (Use something like clienttemplates.js|kgjslinktitlefordocview.js instead).
5. By default, any script reference on the page that has an entry function prefixed with $global seems to be automatically flagged by RegisterModuleInit for exclusion from MDS. Otherwise as noted you need to register it yourself. The registration and the script reference in the actual page need to match paths. This is I think why ~layouts token not rendering the leading slash prevents these scripts from registering properly.

Answer 2

Discovered that this is actually a subset of the problem with CSR not being rendered due to the Minimal Download Strategy. Turning off the feature or using RegisterModuleInit as described here will solve the problem.

• Register CSR-override on MDS enabled SharePoint 2013 site