Row colouring based on cell value

Similar to other people in this forum, I have the requirement to display the grid with rows highlighted if a column has a particular value. Using the example given, I've been able to produce a grid, which is highlighted when the page is loaded.

However as the grid is editable, if the user changes the value in this column, it would be expected that the row colouring would be updated according.

I created a refreshColour function within my version of the grid. This is called when the grid is created and subsequently when the selected row is changed. However when the value is changed to a value with a colour associated with it, the row does not change colour.

Anyone with any suggestions?
Thanks in advance

obj.refreshColours = function() {
    var keys = this.getColouringKeys();
    var colours = this.getColouringColours();
    var column = this.getColouringColumn();
    var rowIndices = this.getRowIndices();
    
    for (var i=0; i<rowIndices.length; i++) {
        // Get the value from the monitored column for the current row
        var row = rowIndices[i];
        var cellValue = this.getCellText(column, row);
        // Check if the current cell value is one with a colour attached. If not, indexOf will return -1
        var colourIndex = indexOf(keys, cellValue);
        
        // If the current row isn't selected ..
        if (indexOf(this.getSelectedRows(), row) == -1) {        
            // Set the text colour to black
            this.getRowTemplate(row).setStyle("color", "black");
            // If a colour needs to be applied, apply it. Otherwise apply white
            if (colourIndex != -1)
                this.getRowTemplate(row).setStyle("background-color", colours[colourIndex]);
            else
                this.getRowTemplate(row).setStyle("background-color", "white");
        }
        // Otherwise the row is selected, so apply the selected row settings
        else {
            this.getRowTemplate(row).setStyle("color", "white");
            this.getRowTemplate(row).setStyle("background-color", "#316ac5");
        }        
    }
}
 

The color functionality is somewhat funky. I have a grid with rows that I am changing besed on a cell value and I see the column set to the correct color but I only see two rows with the proper colors. If I move the scrollbar then I see the proper color for all the other columns. Your code looks fine but I think we are both fighting with a strange quirk of AW.UI.Grid.