Color rows when "group by" sharepoint 2013 - sharepoint-2013

Question

I need some help. I'm trying to set color when group by in a sharepoint list.
I'm using the following code
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
var statusColors = {
'Liberada' : '#FFF1AD',
'Cancelada' : '#FFD800',
'Créditos' : '#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];
}
}
});
});
Can someone give a hint?

Answer 1

As I can see in my local Sharepoint 2013 environment, when I create a view with a group by, Sharepoint add a CSS class named « ms-gb » on the table cell that contains the group name.
Knowing this, a solution would be to edit the page of the view.
Then you can add to the page a Script Editor Webpart.
Inside this Script Editor Webpart you can add some JavaScript code to add the background-color.
Something like this for example :
<script>
$(document).ready(function(){
var statusNames = ['Liberada', 'Cancelada', 'Créditos'];
var statusColors = {
'Liberada' : '#FFF1AD',
'Cancelada' : '#FFD800',
'Créditos' : '#01DF3A'
};
$('td.ms-gb').each(function(){
for (var x=0;x<statusNames.length;x++) {
if ($(this).text().indexOf(statusNames[x]) > -1) {
$(this).css('background-color',statusColors[statusNames[x]]);
}
}
});
});
</script>
If you try this script and you don't already have a reference to JQuery in your masterpage or page layout, you will need to add one inside the script editor webpart.
You can download a local copy of JQuery or use one hosted like :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Hope this help.