CSR Coloured Colum

Question

I've created a document library with some folders in it and I have added a new Column "Permission" to this Library. So now I want to color the cell or the entire row when e.g. the value "Owner" appears in this row. For this I found a little JS file:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        colorCellsByStatus();
    });
    var colorCellsByStatus = function() {
        $Text = $("td.ms-cellstyle.ms-vb2:contains('Owner')");
        $Text.parent().css("background-color", "#01DF3A");
    }
</script>

So When I put this in a script editor it colors the whole row when the value is inserted. But when i have more rows and I want to filter the library this coloring does not appear. Is there any possibility to rerender or call the script when a filter is created? Many thanks. BR Michael

Answer 1

Since you have already tagged the question with client-side-rendering tag, I would recommend you to consider a slightly different approach.

As you might guess the solution described below allows to highlight the row in List View using Client-Side Rendering (CSR) approach.

Highlighting the row using CSR

Template code:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {

      var permissionName = (rows[i]["Permission"].length > 0 ? rows[i]["Permission"][0].title : "");
      if (permissionName == "Approvers")
      {
        var rowId = GenerateIIDForListItem(ctx, rows[i]);
        var row = document.getElementById(rowId);
        row.style.backgroundColor = "#01DF3A";
      }
    }
  }
});

Note: you have to specify the proper group name since in my case I am using group named Approvers

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

References

• SharePoint 2013 Client Side Rendering: List Views