0

I'm new to JavaScript and I'm trying to highlight a row in a custom list red if the date is overdue. I've been tampering with this code for a while now and I can't seem to get any results. I'm pretty sure my error lies in the date comparison or looking up the rows. I was able to do a row highlight with the conditional being if a task was high priority or not, but the date factor is throwing me for a loop.

(function () {
 var overrideCtx = {};
 overrideCtx.Templates = {};

 overrideCtx.OnPostRender = [ApplyRowOverride];
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
 })();

function ApplyRowOverride(ctx) {
todaysDate = new Date();
todaysDate.setHours(0,0,0,0);
for(var index = 0; index < ctx.ListData.Row.Length; index++) {
    var item = ctx.ListData.Row[index];
    if(item.Date.getTime() < todaysDate.getTime()) {
        var row = document.getElementById(GenerateIIDForListItem(ctx, item));
        if(row != null) {
            row.style.backgroundcolor = "red";
        }
    }
}
}
  • Is the code sample you posted here exactly the same as the code you're trying to run? Because in this sample you are telling OnPostRender to execute a function named HighlightRowOverride, but you don't have a function with that name, you have a function named ApplyRowOverride. – Dylan Cristy Sep 28 '16 at 17:34
  • Sorry for the delayed response, I renamed the function while updating the code and didn't upload the correct version on here. Even with the correct function name it's still not producing any results. Thank you for catching that error! – iamthehxc Oct 3 '16 at 12:22
0

Please check if format of javascript date time and date from list item is same ? I am sure it would be different format..put a alert on what is date which is coming from list item and javascript date object.. Also can you please put here what are the both dates which is getting returned... Other thing you can try is create java script date object from your list item date object.. it would need string like this "yyyy-mm-dd".

Below code is referred from https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript

Compare < and > just as usual, but anything involving = should use a + prefix. Like so:

var x = new Date('2013-05-23');
var y = new Date('2013-05-23');

// less than, greater than is fine:
x < y; => false
x > y; => false
x === y; => false, oops!

// anything involving '=' should use the '+' prefix
// it will then compare the dates' millisecond values
+x <= +y;  => true
+x >= +y;  => true
+x === +y; => true
0

Thank you Dylan and Siddharth! Both of you were able to point me in the right direction. I was able to create a solution! I think my problem was that (at first) the function name was incorrectly copied. Second, I believe the formatting of the two date types were different. That was what was causing an issue. Below is a jsfiddle of the solution that I created in case anyone else has this question in the future! Once again, thanks for all your help!

Here is my solution: https://jsfiddle.net/och535x6/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.