4

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";

            }
        }       

    }
}

);

Spook
  • 51
  • 1
  • 6

2 Answers2

1

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.

Spook
  • 51
  • 1
  • 6
-1

I would recommend to check the jquery.tablesorter.js out, this will hold your styles. The ordering is on client side in your case, so you have to solve it there. You can apply it for simple tables, and add a short js:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);
Robert
  • 1
  • 2
  • Thanks for the reply but do we know why this is happening? This is something I will be tackling a lot in the future so need to find a solution rather than replacing SharePoint List Views with a custom built table. – Spook Jun 07 '15 at 00:39