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

Question

I need to specify the background color for the entire row in the ag grid based on the condition in the column. I have not found such examples where an entire row is colored based on a specific value in a column.

Answer 1

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

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

Obviously, myColumnToCheck will be the column in which you check your value (the same name that you enter in the id / field property of the colDef object), and myValueToCheck will be the value that you want the specified column to make the row yellow.

Answer 2

Answer 2 is correct, but the syntax used is incorrect and caused several problems related to its sorting. For example, try to minimize the response of 2 codes. This did work, but it is not the correct syntax as far as I can see.

Please 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; } } 

Answer 3

You cannot change the background color of the entire line in one command. You need to do this by setting the cellStyle in columnDefs . This callback will be called for each cell in the row. You need to change the color of the row by changing the color of all 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 the row if the value of the third cell is 100.

Answer 4

I set a different color for even and odd lines, 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)'} } };