How do I modify the Title Column of a Task List using JSLink

Question

I would like to modify the title column of a Task List in SharePoint 2013. I would like to make the title column different colors based on a selection in another field. For some reason I can run the TitleRendering function
 on a different filed and it works perfectly, but when I try to run it on the Title field it is completely ignored. Is there some kind of work around for this?
var taskSample = taskSample || {};
taskSample.CustomizeFieldRendering = function () {
RegisterSod('hierarchytaskslist.js', '/_layouts/15/hierarchytaskslist.js');
LoadSodByKey('hierarchytaskslist.js', null);
// Intialize the variables for overrides objects
var overrideCtx = {
Templates: {
Fields: {
"Title": {
'View' : taskSample.TitleRendering
// Register the override of the field
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
taskSample.TitleRendering = function (ctx) {
var output = [];
switch(ctx.CurrentItem.Unit) {
case "Unit 1":
output.push('<span style="color: blue;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 2":
output.push('<span style="color: green;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 3":
output.push('<span style="color: red;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 4":
output.push('<span style="color: yellow;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 5":
output.push('<span style="color: orange;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 6":
output.push('<span style="color: pink;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
default:
output.push(ctx.CurrentItem.Title);
break;
return output.join('');
taskSample.CustomizeFieldRendering();

Answer 1

Hi,
Per my understanding, the TitleRendering function is not been applied to the Title column of the Task list.
I suggest you replace the “Title” with “LinkTitle” in your .js file:
var overrideCtx = {
Templates: {
Fields: {
"LinkTitle": {
'View' : taskSample.TitleRendering
In IE Developer Tools, we can see that the “name” attribute of the Title column is “LinkTitle”:
Best regards
Patrick Liang
TechNet Community Support