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.
The next screenshot shows you how rendering is from the moment you apply a custom JS Link reference:
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:
- 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.
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.
My updated script looks like this:
The JS Link property value in mine environment looks like this:
The end result looks like when applied to the web part:
As you can see the checkboxes, strikethrough, overdue dates and my custom progress bar are working as it should be.
Modified the script to show the percentage number in the progress bar.