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

ag-grid
Akshay picture Akshay · Dec 10, 2015 · Viewed 35.7k times · Source

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..

Answer

tfrascaroli picture tfrascaroli · Mar 11, 2016

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.

Related questions

How to upgrade/refresh the ag-grid after row delete?

I have an ag grid where i am trying to delete a row...I am able to remove the row from data source using "splice" technique,after that i want to refresh the table.But it is showing error.This …

Read More
Angular Grid ag-grid columnDefs Dynamically change

I have a problem about columnDefs change dynamically. Here is my gridOptions: $scope.gridOptions = { columnDefs: [], enableFilter: true, rowData: null, rowSelection: 'multiple', rowDeselection: true }; And when I retrieve data from server: $scope.customColumns = []; $http.post('/Home/GetProducts', { tableName: 'TABLE_PRODUCT' }).…

Read More
How to get the data of selected row in ag grid in angular2?

I have setup ag-grid in angular2 which works fine but i am not able to get the value of selected row...There are no errors in my console window...This is how i am initialising the grid... import {Component} from …

Read More