CSR to render Task Status destroys Task checkboxes

Question

I'm using some JavaScript to provide a more visual approach to a task lists column Percentage Complete.

The script works fine, but I noticed that the task column Completed is not being rendered as a unchecked/checked checkbox and instead displays the actual checkbox values No/Yes.

Using F12 Developer tool, there is no console error, and inspecting the HTML shows that when the script is applied that the HTML that renders the checkbox is never added.

The picture below demonstrates with and without the script. (Used as a JSLink).

The full script.

(function () { 

    // Create object that have the context information about the field that we want to change it's output render  
    var percentCompleteFiledContext = {}; 
    percentCompleteFiledContext.Templates = {}; 
    percentCompleteFiledContext.Templates.Fields = { 
        // Apply the new rendering for PercentComplete field on List View, Display, New and Edit forms 
        "PercentComplete": {  
            "View": percentCompleteViewFiledTemplate, 
            "DisplayForm": percentCompleteViewFiledTemplate, 
            "NewForm": percentCompleteEditFiledTemplate, 
            "EditForm": percentCompleteEditFiledTemplate 
        } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(percentCompleteFiledContext); 

})(); 

// This function provides the rendering logic for View and Display form 
function percentCompleteViewFiledTemplate(ctx) { 

    var percentComplete = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 
    return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'> \ 
            <div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #0094ff;'> \ 
            &nbsp;</div></div>&nbsp;" + percentComplete; 

} 

// This function provides the rendering logic for New and Edit forms 
function percentCompleteEditFiledTemplate(ctx) { 

    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); 

    // Register a callback just before submit. 
    formCtx.registerGetValueCallback(formCtx.fieldName, function () { 
        return document.getElementById('inpPercentComplete').value; 
    }); 

    return "<input type='range' id='inpPercentComplete' name='inpPercentComplete' min='0' max='100' \ 
            oninput='outPercentComplete.value=inpPercentComplete.value' value='" + formCtx.fieldValue + "' /> \ 
            <output name='outPercentComplete' for='inpPercentComplete' >" + formCtx.fieldValue + "</output>%"; 

} 

CSR code samples #5 (Percent Complete)

Any pointers in the right direction?

Answer 1

It is not your CSR destroying the checkboxes,

It is because Microsoft didn't test JSLink properly and shipped a failing product

The Checkboxes are created by a JSLink on the View definition (each View definition)
If you check the sources it loads hierarchytaskslists.js, and that CSR code does the CheckBox

Now when you attach another JSLink on the WebPart it effectivly blocks loading of every other JSLInk on Views (and maybe even Field JSLinks)

Workaround is to load the Microsoft JS files yourself, add it as an extra JSLink on your WebPart

---

JSLinks on WebPart, View , Field

My (private) Link Manager App learned me there are 3 Microsoft JS files applied to various types of Lists

This is the Tasks list, where you see, by default every View gets the hierarchytaskslists file

But they do not work the moment you add a JSLink on the ListView webpart!!

No Field JSLinks here as you can only set those with back-end PowerShell code, not from the Browser side

Creating CSR / JSLink

Check out the awesome WYSIWYG editor Chrome Extension Andrey Markeev wrote:

https://github.com/andrei-markeev/cisar

It makes editing CSR a breeze

And https://github.com/tavikukko/Chrome-SP-Editor is a cool tool too