Azure / Office 365 / SharePoint Development / Search

Applying JS Link on Task Lists Breaks the Default Rendering of the Checkboxes

July 22, 2013

A few days ago a clever reader of my blog has informed me about a problem with the Create a "% Complete" Progress Bar with JS Link in SharePoint 2013 solution. He told me that when you apply the JS Link JavaScript to the web part, the checkboxes task checkboxes are rendered as Yes / No values. I saw on Tobias Zimmergren his blog that another reader has also mentioned this behavior (read it here).

I tested this problem, and as it turned out, it were not only the checkboxes that weren't rendering, but the other fields did not behave as they should be.

Let me first show you how a default task view rendering looks like.

Default Task List Rendering

Default Task List Rendering

The next screenshot shows you how rendering is from the moment you apply a custom JS Link reference:

Rendering with JS Link applied

Rendering with JS Link applied

As you see, the checkboxes aren't rendering, but also the Task Name text is not strikethrough, and the dates aren't colored red if task is overdue. This problems occurs with whatever JS Link you apply to the task list.

I did some investigation, and it turned out that the Task List web part already uses a JS Link reference to override the rendering of these fields (checkboxes, task name, due date). The default JS Link reference that the web part uses is: "/_layouts/15/hierarchytaskslist.js".

This JavaScript file does a couple of things:

  • Overrides the default rendering of the Checkmark, DueDate, and LinkTitle columns;
  • Adding event receivers that automatically change the task status when you click on a checkbox;
  • Adds links to the context menu (Open, Add to timeline, Create Subtask);

From the moment you apply your own JS Link reference, the hierarchytaskslist.js file won't be loaded anymore. That is why these kind of functionalities disappear.

Solution 1

The solution for this problem is very simple, although I spend a couple of hours to this problem. The thing you need do is to also load the hierarchytaskslist.js script on your page.

This can easily be done by adding a script reference from within your custom JS Link JavaScript file with the following piece of code:

My updated script looks like this:

Solution 2

You can add a second JavaScript reference to the JS Link property by using a pipe symbol "|".

The JS Link property value in mine environment looks like this: "~sitecollection/_layouts/15/hierarchytaskslist.js|~sitecollection/_catalogs/masterpage/task_complete_rendering.js".


The end result looks like when applied to the web part:

Result of the default and custom JS Link references

Result of the default and custom JS Link references

As you can see the checkboxes, strikethrough, overdue dates and my custom progress bar are working as it should be.



Found out that you can add multiple JavaScript files to the JS Link property by just using the pipe symbol "|" as separator.


Modified the script to show the percentage number in the progress bar.



  • Bill Burke

    It would be nice to put the nuber percent in the progress bar… (40%)

    • estruyf


      I modified the script to show the percentage number.


  • Azam

    Great example. Thanks

  • maklei

    Thanks for this example! have any tutorial how to customize Header? if we want to add border, bold….

  • Thanks for the Percent Number

  • Avinash Reddy

    I have uploaded the file to maser page and gave the url in my Task list webpart there is no effect at all can you please help with it ?

    • Avinash Reddy,

      What does the rendering look like? Could you check if the JavaScript file gets loaded on the page?


      • Avinash Reddy

        Elio Struyf,

        file is loading. I tried uploading js file into a document library and gave the path in JS link section of the webpart. There is no custom rendering at all. It just give me OOTB sharepoint 2013 rendering.

  • Avinash Reddy

    sorry Elio,

    Script is not loaded

  • Avinash Reddy

    Hi Elio,

    I followed

    blog of yours and that works for me.

    • Avinash Reddy,

      Thank you for the feedback.


  • Pingback: JS Link: was man sonst noch wissen sollte()

  • Sydney

    Hi, will this work for SharePoint 2013 Online?

    • Sydney,

      This should indeed have to work on Office 365, because it was created on such an environment.
      Is it not working for you? Or was it just a question?


      • Breno

        Hello, I tried to do this process in Sharepoint 2013 and the progress bar always permanesse 100% (color)

  • Thanks for the nice article. I am also facing similar issue but in different context. I am using Shaded style view for one of my list and after applying my custom JS Link, the shaded style goes away. How do I get the restore Shaded style (which JS I should add in the JS Link) after applying my Custom JS? Thanks in advance!

    • facesagarSagar,

      I need to take a look at it. If I’m not mistaken, if you use the shaded view, it renders as a 2010 list view. So I think it works a bit different with that type of view.


      • Elio, Any luck here?

        • What I think is that it falls back to XSL rendering. So I don’t think it will be possible.

          A solution could be to create the shading with JavaScript, instead of using the shaded view itself.

  • Shane Riley

    Great job!

    Just wondering if its just a simple code to make the color green when the task is at 100% ;)


    • Shane Riley,

      You would need to change the output code to something like this:


      • Shane Riley

        Excellent, works perfectly!

        Thanks alot, i owe you a beer :)

        Best Regards

  • Bharath

    Hi Elios,

    Very nice of it and worked.

    I’m trying to do the same on a generic SharePoint view pages to display the Yes/No checkbox field as Check-box and the event as well. Any pointers.

    • Bharath,

      You could check how they do it in the default JS link file of the task list. You could find the whole function that is used to render the checkboxes in the hierarchytaskslist.debug.js file (location: /_layouts/15/hierarchytaskslist.debug.js).

      The function that they use is: window.CheckMarkFieldTemplate.RenderCheckMarkField.


  • Bharath

    Thank you Elio… I made few changes to the “solution 1” and the rendering is working. I have used jQuery for updating and retrieving values. Finally task completed…:).
    Once again thanks for your article..

  • Alex

    Can apply this same approach to a document library in quick edit mode?

    • Alex,

      Didn’t tried it yet, but it is possible to override the rendering for every form even the edit one.


  • Pieter van der Poort

    Hi Elio,

    Clever post! I’ve also modified a task list using a JS link. The task list now contains kpi’s based on this blog post: All went well in a default ‘American’ SharePoint 2013 setup. However, in a ‘Dutch’ setup of SharePoint 2013 it turned out that Javascript transforms the original European dates into future Anmerican dates. As a result, the kpi’s stay green when they should turn yellow. Do you have a solution for this Javascript date problem? I would appreciate that very much!

    Kind regards,

    Pieter van der Poort

  • Pieter van der Poort

    Changing the country settings of the site to English (United States) does the trick. However, it also changes the date format.

  • Jenifer

    I used your KPI example to create my own KPI on my task list. Do you by any chance know how to modify the Task Name column in a Task list? I have tired to use the Title column the same way you do for percent complete and it never hits the fucntion.

    Do you have any ideas?

    var overrideCtx = {
    Templates: {
    Fields: {
    ‘Title’: {
    ‘View’ : taskSample.TitleRendering
    ‘PercentComplete’: {
    ‘View’ : taskSample.PercentCompleteRendering


  • Hannah

    Hi Elio Struyf, can you give me a Jscript sample on how to disable the checkboxes when the box is ticked? Thank you in advance.

  • Krishna Reddy

    Hi Elio Struyf, can you give me a javascript sample on how to enable the checkboxes options.Actually my task list I didn’t find the checkboxs. how to set the checkbox in completed column instead of Yes/no.
    Thanks in advance

  • Sameer Badsha

    Hi All,

    Can someone help me in setting up the task lists to appear fully on the timeline. I used the below script and it works fine in Chrome browser but not on IE. I just placed this query on a content editor web-part on the top of a task list created.

    $( window ).load(function(){
    $(this).css(‘width’,’auto’); });
    $(this).css(‘width’,’auto’); });


    I want the task lists to be shown as how it is in the below image.