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).

enter image description here

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 



// 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?

1 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:


It makes editing CSR a breeze

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

  • Thank you Danny. Sad to hear that another one failed setting added to the list. Does it matter in what order the JSlink is added? Would ~sitecollection/_layouts/15/clienttemplates.js separated by "|" be correct? Commented Mar 24, 2017 at 9:52
  • In this case not .. unless you override that Completed Field with CSR yourself. I changed my answer, I mentioned the wrong JS file for a TasksList. Commented Mar 24, 2017 at 10:59
  • Thank you for the additional details! And the chrome extension, this is just fantastic! Commented Mar 24, 2017 at 11:44
  • I know we aren't supposed to do thank you comments but holy cow this is one of the most awesome answers on SharePoint.stackexchange.com. Thank you! Commented Mar 24, 2017 at 12:17
  • 1
    You are in a filter-bubble, James, that's why its awesome to you 😁 I add extra text-tags (so not only the SO tags) to my better answers, so sharepoint.stackexchange.com/search?q=icsr get's you more CSR stuff Commented Mar 24, 2017 at 12:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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