apply row template class when data changed in ui-grid

Question

I do an application using angular ui-grid, when user try to input a negative number then the row will turn to red. I am trying validate input value in cellFilter, if input is negative then I set a flag to tell rowTemplate that this row must turn to red but nothing happend.

scope.gridOptions = {
    data: myData,
    rowTemplate: 
        '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell ng-class="{\'new-grid-row\': row.entity.is_new, \'row-error\': row.entity.is_error_unit_price}" ></div>',
    columnDefs:[
        {
          field: 'unit_price',
          displayName: label.unit_price,
          width: 100,
          cellFilter: 'mapUnitPrice:row',
          type: 'number',
        }
    ],
}

cellFilter is something like

.filter('mapUnitPrice', function() {
    return function(input, row) {
        if (input < 0) {
            row.entity.is_error_unit_price = true;
            return input;
        }

        row.entity.is_error_unit_price = false;
        return input;            
    }
})

Answer 1

I found my own solution The reason why is when edit a cell, that row will turn to dirty and dirty row css has override my 'row-error' css. So just put !important and I solved it

.row-error {
    color: red !important;
}