1

I've seen examples ( same ones but in different places ) mostly using tasks as a basis and I've seen examples that only change the cell color background.

But how do you change the row color if a value of a column is "true" or if a choice values is either "A", "B" or "C"?

Tried using this, but it was a bit more complex than I needed it to be where "Color" was the column name and value...and somehow used a gif as well. Couldn't figure it out.

="<DIV><IMG onload='GetSelectedElement(this,""TR"").style.backgroundColor="""&Color&"""' src='/_layouts/images/blank.gif' ></IMG></DIV>"

I'd be so grateful for your help. Thank you in advance.

3
  • There is a detailed explanation for this IMG trick at ViewMaster365.com/#/How CSR as mentioned below is the 'real' programmers solution.. but that only applies to SP2013, the IMG trick works in 2010 as well.. and can do much more Commented Apr 20, 2015 at 12:58
  • Hello Danny it seems it requires the purchase of ViewMaster? Commented Apr 23, 2015 at 1:47
  • No, just copy/paste the code from the site to color a row. The ViewMaster Tasks App does much more. Commented Apr 23, 2015 at 8:00

1 Answer 1

0

The best solution is to use Client Side Rendering

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {
        //your logic
        var isApproved = rows[i]["yourField"] == "someValue";
        if (isApproved)
        {
            var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
            var tr = document.getElementById(rowElementId);
            //change the row color
            tr.style.backgroundColor = "#ada";
        }
    }
  }
});

Copy this code to a .js file and add the reference to this file to the JSLink property of the webpart that you want to customize with row colors.

The net is full of examples:
Client-side rendering (JS Link) code samples
Introduction to Client-Side Rendering in SharePoint 2013
SharePoint 2013 Client Side Rendering: List Views
Highlight an entire row in a list

5
  • Hello nK and thank you. I tried the last link, the one to the code project page and followed through embedding a script editor web part. Testing it out with the footer example <script type = "text/javascript"> SPClientTemplates.TemplateManager.RegisterTemplateOverrides({....... But nothing shows up. Am I missing a step? Is there something ai need to do first? Thank you for your help. Commented Apr 20, 2015 at 21:32
  • Link the js script on tje jslink property of the web part
    – Nk SP
    Commented Apr 21, 2015 at 5:27
  • Nk, I am sorry but there is nothing from the code I used above taken from to color rows from "codeproject.com/Articles/620110/…" that refers to any JS Links. What am I missing? Commented Apr 22, 2015 at 8:32
  • OK geeze, it was the noobie quotes !! Commented Apr 23, 2015 at 19:59
  • @MikeRooker updated my anwser
    – Nk SP
    Commented Apr 23, 2015 at 20:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.