Add color to specifc list cells after grouping

Question

Faced a simple task. But I can’t find a solution. There is a regular list with 6 columns. But the list has been grouped according to one of the fields. (it is assumed that the list will be updated and you need to structure it somehow). There is code that works on this list without grouping the elements.

OnPostRender: function(ctx) {
        var statusColors =  {
  'W' : '#fc6a6a',  
  'R' : '#FFD800',
  'Y' : '#01DF3A' 

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

But it does not work when you enable grouping.

as I vizhk to the moment of expansion of group, the data is not loaded yet. Which direction to look ?? I tried to use the CSR, but then an error immediately appears. I can’t do anything with her.

I tried solutions where they change the color of the lines. But it does not work in my case

Answer 1

I solved this problem differently. Maybe someone will find my way useful. So CSR is not working or there is a problem with my code. I used the .xsl file. It did not have a lot of code (it differs for each page. I chose for my page from the list what to be in the folder with styles. I took as a basis one of the working files in the "Style Library" folder). I copied to the Style Library folder, renamed and started the experiments. Here is the code that helped me.

Code that changes the color of a field (after tag: <xsl:attribute name="style">):

<xsl:if test="normalize-space($thisNode/@flag) = 'W'" ddwrt:cf_explicit="1">background-color: #FFFFFF;</xsl:if> 
<xsl:if test="normalize-space($thisNode/@flag) = 'Y'" ddwrt:cf_explicit="1">background-color: #FA6E07;</xsl:if> 
<xsl:if test="normalize-space($thisNode/@flag) = 'G'" ddwrt:cf_explicit="1">background-color: #06F91D;</xsl:if> 
<xsl:if test="normalize-space($thisNode/@flag) = 'R'" ddwrt:cf_explicit="1">background-color: #FA7805;</xsl:if>

And also (maybe someone will need it) HIDE this column (BACKGROUND COLOR will stay !!!!). And this part before the last closing tag (</xsl:stylesheet>):

    <xsl:template name="FieldRef_header.flag" ddwrt:dvt_mode="header" match="FieldRef[@Name='flag']" mode="header" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
    <th nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)"></th>
  </xsl:template>
<xsl:template name="FieldRef_printTableCell_EcbAllowed.flag" match="FieldRef[@Name='flag']" mode="printTableCellEcbAllowed" ddwrt:dvt_mode="body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
        <xsl:param name="thisNode" select="."/>
        <xsl:param name="class" />
    <td></td>
  </xsl:template>