Custom Lists - set row background color in a list depending on a column value

Question

Starting from this example:

https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd

I would like to set the entire row background color depending on a column value.

Answer 1

Below example demonstrates how to customize List View in order to highlight list item rows.

Assume there is a Tasks list and depending on status, rows have to be highlighted using the corresponding color.

Template code:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Not Started' : '#FFF1AD',  
          'In Progress' : '#FFD800',
          'Completed' : '#01DF3A' 
       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }
     }
   }); 

});

How to apply the changes

There are at least two options how to apply the changes:

1. Using JSLink property
2. Place JavaScript template on page via Script Editor/Content Editor web parts

Here is how to apply the changes using the second option:

1. Switch the page into edit mode
2. Add Script Editor webpart right below the list view web part.
3. Put the specified code by wrapping it using script tag code into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>
4. Save the page

Results

Answer 2

You can do this by handling OnPostRender event. Something like

priorityFiledContext.OnPostRender = [
    ApplyRowOverride
];

function ApplyRowOverride(ctx) {
    for(var index = 0; index < ctx.ListData.Row.Length; index++) {
        var item = ctx.ListData.Row[index];
        if(item.Field == "WhateverValue") {
            var row = document.getElementById(GenerateIIDForListItem(ctx, item));
            if(row != null) {
                row.style.backgroundcolor = "red";
            }
        }
    }
}

Answer 3

replace 'ctx.ListData.Row.Length' by 'ctx.ListData.Row.length' in above code