JS Link Conditional Formatting Paging Not Working

Question

I've added a list view webpart onto a SharePoint 2013 online page, this webpart has a JS Link to a file containing JavaScript which applies different CSS to the CurrentRiskImpactLikelihood column depending on it's value.

The JavaScript i've used is below:

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


condFieldCtx.Templates.Fields = {
"CurrentRiskImpactLikelihood": {"View": PriorityFormat1},
};
condFieldCtx.OnPostRender = [PriorityFormat1];
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(condFieldCtx);
})();


function PriorityFormat1(ctx){

    var priorityValue = ctx.CurrentItem.CurrentRiskImpactLikelihood;

    if(priorityValue == 'Very Low'){
        return "<span><font style='padding:5px;color:black;background-color:yellow;display:block;'>"+ctx.CurrentItem.CurrentRiskImpactLikelihood+"</font></span>";
        }
    else if(priorityValue == 'Low'){
        return "<span><font style='padding:5px;color:black;background-color:yellow;display:block;'>"+ctx.CurrentItem.CurrentRiskImpactLikelihood+"</font></span>";
        }
    else if(priorityValue == 'Medium'){
        return "<span><font style='padding:5px;color:white;background-color:orange;display:block;'>"+ctx.CurrentItem.CurrentRiskImpactLikelihood+"</font></span>";
        }
    else if(priorityValue == 'High'){
        return "<span><font style='padding:5px;color:white;background-color:red;display:block;'>"+ctx.CurrentItem.CurrentRiskImpactLikelihood+"</font></span>";
        }
    else if(priorityValue == 'Very High'){
        return "<span><font style='padding:5px;color:white;background-color:red;display:block;'>"+ctx.CurrentItem.CurrentRiskImpactLikelihood+"</font></span>";
        }
    else{
        return ctx.CurrentItem.CurrentRiskImpactLikelihood;
        }
}

This works fine on page 1 of the values I return, it doesn't matter what the item limit of the pages in the view are, as soon as I go to the next page I get the following error:

TypeError: Cannot read property 'CurrentRiskImpactLikelihood' of null

Does anyone have any ideas on a fix for this? I've tried googling it but had no luck so far!

Answer 1

At first glance it would seem to me that the problem is occurring because you have attached your custom rendering function to both the field itself during view rendering, and as a function to be called OnPostRender.

The problem is that, during the post-render phase, ctx.CurrentItem will not exist, because at that point it is done rendering all of the individual items.