How to provide a background color for an entire row in ag grid based on a certain value in a column?

I need to provide a background color for an entire row in ag grid based on a condition in a column. I found no such examples where entire row is colored based on a certain value in a column..

The previous answer is somewhat outdated (although still correct and working) and now we have some more control over the styling of the grid. You could use getRowStyle(params) for this job, just like this:

gridOptions.getRowStyle(params) {
    if (params.data.myColumnToCheck === myValueToCheck) {
        return {'background-color': 'yellow'}
    }
    return null;
}

Obviously, myColumnToCheck would be the column you're checking your value against (the same name you input in the id/field property of the colDef object), and myValueToCheck would be the value you want said column to have to make the row all yellow.

Answer 2 is correct, but the syntax used is wrong, and caused me several problems trying to sort it out. Trying to minify the answer 2 code barfed, for example. It did work, but it's not proper syntax as far as I can see.

Note, this can be done inline, or with an external function, 2 different ways:

SEPARATE FUNCTION:

vm.gridOptions = {
    columnDefs: columnDefs,
    getRowStyle: getRowStyleScheduled
}

function getRowStyleScheduled(params) {
    if (params.selected && params.data.status === 'SCHEDULED') {
        return {
            'background-color': '#455A64',
            'color': '#9AA3A8'
    }
    } else if (params.data.status === 'SCHEDULED') {
        return {
            'background-color': '#4CAF50',
            'color': '#F4F8F5'
        };
    }
    return null;
};

INLINE:

vm.gridOptions = {
    columnDefs: columnDefs,
    getRowStyle: function(params) {
        if (params.selected && params.data.status === 'SCHEDULED') {
            return {
                'background-color': '#455A64',
                'color': '#9AA3A8'
            };
        } else if (params.data.status === 'SCHEDULED') {
            return {
                'background-color': '#4CAF50',
                'color': '#F4F8F5'
            };
        }
        return null;
    }
}

Jatin Kakkar

I set different color for even and odd rows you can do it in any way..

    $scope.gridOptions.getRowStyle = function getRowStyleScheduled(params){      
       if(parseInt(params.node.id)%2==0) {
          return {'background-color': 'rgb(87, 90, 90)'}
       }else {
          return {'background-color': 'rgb(74, 72, 72)'}
       }
    };

You can't change the background color of an entire row in one command. You need to do it through the cellStyle callback setup in the columnDefs. This callback will be called per each cell in the row. You need to change the color of the row by changing the color of all the cells.

See the following column definition

{
   headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor
}

You need to do this for all your columns.

Here is your changeRowColor function.

function changeRowColor(params) {

   if(params.node.data[4] === 100){
      return {'background-color': 'yellow'};    
   } 

}

It changes the color of a row if the value of the third cell is 100.

来源：https://stackoverflow.com/questions/34200358/how-to-provide-a-background-color-for-an-entire-row-in-ag-grid-based-on-a-certai

标签

ag-grid