Task List - Using a custom JS Link file, but keeping original menu options

Question

I have added a 'Task List' app to my site.

Out the box, when you click on the '...' menu option, you see a pop-up with a whole bunch of useful task list related details.

However, I have also created a custom JS Link file which I have added to the list to do some custom highlighting/logic, etc.

I noticed though that when I add the JS Link file to the list, I now lose those menu details..

Any idea why, and/or how I can get them back while still using my JS Link file?

Thanks!

I added the JSLink via the 'web part' properties..

Edit:

Mu custom JS Link file is the following.. (The idea is for it to give each alternating row a different background color, and then to highlight in green the next upcoming due task/project)

(function($) {

var statusFieldCtx = {};

statusFieldCtx.Templates = {};

statusFieldCtx.Templates.Fields = { "MSStatus": {"View": StatusMilestoneViewTemplate}};
statusFieldCtx.OnPostRender = [ rowStyle ];

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);

})();

function rowStyle(ctx){ 
    $(".ms-itmHoverEnabled.ms-itmhover:nth-child(even)").addClass('alternateListRow');
    HighlightNextDue(ctx);  
}

function StatusMilestoneViewTemplate(ctx) {
    var _itemMissed = "Missed"
    var _itemComplete = "Completed";
    var _itemOther = "Missed - Not Complete";
    var _itemValid = "Not Completed";
    var _statusValue = ctx.CurrentItem.MSStatus;
    var _dueDate = new Date(ctx.CurrentItem.DueDate);
    var _completeDate = new Date(ctx.CurrentItem.CompletedDate);
    var _today = new Date();
    var _title = ctx.CurrentItem.Title;
    var _todayDt = new Date(_today.getFullYear(),_today.getMonth(),_today.getDate());
    var _dueDateDt = new Date(_dueDate.getFullYear(),_dueDate.getMonth(),_dueDate.getDate());
    var _completeDateDt = new Date(_completeDate.getFullYear(),_completeDate.getMonth(),_completeDate.getDate());

    if (_completeDateDt > _dueDateDt)   {
        return _itemMissed;
    }else if (_completeDateDt <= _dueDateDt) {  
        return _itemComplete;
    }else if (_dueDateDt >= _todayDt) {
        return _itemValid;
    }else {
        return _itemOther;  
    }
 }

function HighlightNextDue(ctx){ 

    var AllDates = new Array();
    var AllTitles = new Array();

    for (var i = 0; i < ctx.ListData.Row.length; ++i) {         

    var listItem = ctx.ListData.Row[i];     
    var today = new Date();
    var today = today.getFullYear() + "-" + ("0" + (today.getMonth()+1)).slice(-2) + "-" + ("0" + today.getDate()).slice(-2);       
    var _dueDateDt = listItem.RevisedDueDate;
    var _title = listItem.Title;
    var iid = GenerateIIDForListItem(ctx, listItem);
    var row = document.getElementById(iid);

        if(_dueDateDt >= today){                
            if (row != null){               
                AllDates.push(_dueDateDt);  
                AllTitles.push(_title);                                      
             }                  
        }   
}   

if(AllTitles.length > 0){       
    var listLinks = document.getElementsByClassName('ms-listlink')
    var TitlesAll = AllTitles[0];//AllTitles.reduce(function (a, b) { return a < b ? a : b; });         
    var titleReplaced = TitlesAll.split(' ').join('-');
    for (var i = 0; i < listLinks.length; i++) {
        if (listLinks[i].innerHTML == TitlesAll) {
            var ele = listLinks[i];
            $(ele).closest('tr').attr('id', "Highlight-" + titleReplaced);
            $("tr#Highlight-" + titleReplaced).css('background-color','#F1F8C8');   
        }
    }           
}   

Answer 1

Finally figured it out. :)

I noticed that when I clicked on the '...' I wouldn't get my contextual Task List options, HOWEVER if I clicked on the task in the timeline view, those options were there. Also, once I saw them in the Time Line menu, they then began appearing in my list menu!

So I kept an eye on my js files that were being loaded on my page, and I noticed that a file which appeared after selecting the timeline item was the js file - hierarchytaskslist.js ! That was the missing required js file which my custom JS Link file was overriding for my list view.

Did a quick google to find out how to force this file to load, and found two options..

Solution 1 - Register/load 'hierarchytaskslist.js' in your custom JS Link file

In my function, I called this.. Which loaded the file when my JS Link file loaded. So my file now starts like this..

(function($) {

    RegisterSod('hierarchytaskslist.js', '/_layouts/15/hierarchytaskslist.js');
    LoadSodByKey('hierarchytaskslist.js', null);

    var statusFieldCtx = {};
    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = { "MSStatus": {"View": StatusMilestoneViewTemplate}};

    statusFieldCtx.OnPostRender = [ rowStyle ];

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);

})();

Solution 2 - Add it in your list view JS Link field

Another way to load this file is to add the path alongside your custom JS file in the JS Link field.

~sitecollection/_layouts/15/hierarchytaskslist.js|~sitecollection/CustomScripts/CustomScript.js