So I was tasked with creating a conditional to highlight an item red when the date is overdue. With some help from you guys I was able to produce a JSLink that highlighted the entire row when an item was overdue. I was wondering if it was possible to modify this code so that it only highlighted the cell and not the entire row. Thanks for your help!
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.OnPostRender = [
HighlightRowOverride
];
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function HighlightRowOverride(inCtx) {
//for each item (row)
for (var i = 0; i < inCtx.ListData.Row.length; ++i) {
var listItem = inCtx.ListData.Row[i];
var iid = GenerateIIDForListItem(inCtx, listItem);
var row = document.getElementById(iid);
var date = new Date(listItem.Date);
date.setHours(0,0,0,0);
todaysDate = new Date();
todaysDate.setHours(0,0,0,0);
if (date.getTime() > todaysDate.getTime()) {
if (row != null)
row.style.backgroundColor = "rgba(255, 0, 0, 0.5)"; //red
}
}
inCtx.skipNextAnimation = true;
}
jsfiddle: https://jsfiddle.net/vqfj6xff/