javascriptjquerysharepointsharepoint-2013client-templates

Trying to call Javascript Function when SharePoint List View Web Part is filtered


I have some JavaScript that will colour row in a SharePoint list View web part depending on values in certain column. This part works fine and the rows are coloured correctly upon page load. The issue I have is that when the List is filtered (if you click on any of the column headers and arrange by Ascending or Descending order) the formatting is lost and the colours disappear.

I'm looking for a way for the formatting to stay or be reapplied after the filter action has completed. If the page is refreshed, the Filter that was selected will remain in place and the colours will return.

I need a way for the colours to be reapplied once a filter has been applied instead of just on Page Load.

Thanks in advance.

Here is my current JS:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {            
        var trimmed = rows[i]["Age"]
        var final = trimmed.replace(",", "");
        var oneWeek = final < 7;
        var oneToTwo = final >= 7 && final <= 14;
        var twoOrMore = final > 14;

        if (oneWeek)
            {
                var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
                var tr = document.getElementById(rowElementId);
                tr.style.backgroundColor = "#CCFFCC";

            }

        else if (oneToTwo)
            {
                var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
                var tr = document.getElementById(rowElementId);
                tr.style.backgroundColor = "#FFEECC";

            }

        else if (twoOrMore)
            {
                var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
                var tr = document.getElementById(rowElementId);
                tr.style.backgroundColor = "#FFCCCC";

            }
        }       

    }
}

);


Solution

  • So after a ton of investigation, it turns out my formatting was being overwritten at the last second after a sort or filter had taken place.

    The solution was to add this to the end of the code: ctx.skipNextAnimation = true; This skipped the animation that shows all of the rows falling into place and allows my formatting to take effect as it should.