color coding in a list view is lost when any of the columns are arranged by clicking on the column header

Question

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. If the page is refreshed, the Filter that was selected will remain in place and the colours will return.

I'm looking for a way for the formatting to stay or be reapplied after the sort action has completed.

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

            }
        }

    }
});

Answer 1

Ok, as requested by the OP, here is a solution for how to deal with MDS when trying to apply CSR.

First, a brief explanation of the problem. To quote this blog post (which is where I found the solution of how to do this):

When the list view page was first rendered, the MDS system receives the custom javascript for the first time. It then, puts this javascript in a list (let’s call it “already executed javascripts” for fun). When subsequent pages are requested, MDS checks its own list of “already executed javascripts” and if the page being requested requires execution of a javascript, which MDS already has on its list, it simply will not execute it again.

Luckily, the MDS system has a way to register scripts to exclude from that list, meaning, the registered scripts will execute again and again because they won't be on that list.

However, to register a script that way, the script needs an entry point function, and usually the pattern for creating CSR template overrides uses a self-executing anonymous function.

So to get this to work, we need to do two things:

• Change the CSR code to have an entry point function
• Register the script (and that function) with MDS so it will always execute

With that all said, here is the pattern I have been using for CSR template overrides that will work on both MDS enabled sites and MDS disabled sites. Since you are using OnPostRender I will include that, and I will also include an item override just so you can see how other parts would fit in as well.

var myCustomOverrides = myCustomOverrides || {};  // register our namespace

myCustomOverrides.colourCodedRows = (function () {
    return {
        item: function (ctx) {
            var itemHtml = "";
            // custom code to do whatever we want here
            return itemHtml;
        },

        postProcess: function (ctx) {
            // your OnPostRender code here
        },

        render: function () {
            var myTemplateOverrides = {};
            myTemplateOverrides.Templates = {};
            myTemplateOverrides.Templates.Item = myCustomOverrides.colourCodedRows.item;

            myTemplateOverrides.OnPostRender = myCustomOverrides.colourCodedRows.postProcess;

            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(myTemplateOverrides);
        }
    }
})();

// register script for MDS enabled site
RegisterModuleInit("/path/to/my/OverrideScript.js", myCustomOverrides.colourCodedRows.render); 

// fallback for non-MDS enabled site
myCustomOverrides.colourCodedRows.render();  

Then just attach that script file to the List View Web Part (or wherever you are attaching it) using JSLink in the regular way.

Answer 2

@malibeg sorry, I thought I updated this post. The solution was to add a line of code to the bottom ctx.skipAnimation();

What was happening was the code was rendering properly then the animation (a very subtle scroll effect) was running and resetting the view. Adding the line above to the end of your code prevents that and it should work fine from there.

Answer 3

You can update your code as follows

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    //your code
    OnPostRender: function(ctx) {
        //your code 

        //Add this  line of statement to work your customizations on sorting, searching, filtering
        ctx.skipNextAnimation = true;
    }

});

Answer 4

You can update your code as follows

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
//your code
OnPostRender: function(ctx) {
    //your code 

    //Add this  line of statement to work your customizations on sorting ,searching, filtering
    ctx.skipNextAnimation = true;
 }
});