I've recently been messing around with CSR for highlighting sharepoint rows based on the text that they contain (used http://www.c-sharpcorner.com/UploadFile/sagarp/sharepoint-2013-list-column-status-wise-change-row-color-usi/ as a reference).

I've gotten this to work pretty well, although I noticed that when I enable groups for the list webpart, the colors no longer appear. Would there be a way to do this?

enter image description here

I'm trying to get it so that the "Completed" tab will show up as one color (green for example) while the other tab will show up as another color (yellow).

Here is a rough example of what I'm describing

enter image description here

  • That is not CSR. That is just plain jQuery.
    – Akhoy
    Oct 15, 2015 at 13:11

2 Answers 2


You need to adjust the CSS for the new HTML introduced by the grouping. Your revised code should now include something like:

$("td.ms-gb:contains('Approved')").css("background-color", "lightgreen")


$("td.ms-gb:contains('In Progress')").css("background-color", "yellow")

Basically you will see something like this in your code of the page

<td class="ms-gb <b>1</b>" nowrap="nowrap" colspan="100 <b>style="background-color:green"</b>>
/** the other tag **/
<td class="ms-gb <b>2</b>" nowrap="nowrap" colspan="100 <b>style="background-color:yellow"</b>>

NOTE: Bolded parts are what you should add to the code.

EDIT: Create css document or add script webpart and add those classes in it, ms-gb 1 and ms-gb 2. In printscreen I just showed example.

So what you should put in your css file is


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.