How can i set background color column based on value in AG Grid Angular

Question

I am running into an issue being able to set a row background color based on a value in that row. In my case it is called updateFlag and if the value for this row is true i want to set the row background to something other then the default white. What makes this a bit harder for me to figure out is that we use ag grid in a very modular approach. I have a ag-grid-base.component which does the basic setup of each grid via @inputs and has a few @outputs like onRowClickAction etc. then the component which actually wants to use the grid implements the ag-grid-base.component. In the component i have a function which loads the column definitions from a backend and then adds a Action column which has icons.

createColumnDefs(columnsList: IGridColumnAgGrid[] = this.columnsList) {

        this.supplementaryColumnDefs = [
            {
                headerName: 'Actions',
                width: 70,
                sortable: false,
                suppressMenu: true,
                cellRendererFramework: ActionsRendererComponent,
                pinned: 'right',
            },
        ];
    }

So what i am looking for is where and how would i specify the background color of a row based on a value of a given row like in my case updateFlag = true

LuDeveloper LuDeveloper · Accepted Answer · 2020-04-15T18:33:06

There is a grid option as a function, named getRowStyle, as follows:

in HTML:

<ag-grid-angular
[gridOptions]="gridOptions"
....></ag-grid-angular>

in .ts:

import { 
  GridOptions,
} from '@ag-grid-enterprise/all-modules';

and inside of class:

gridOptions: GridOptions;

in the constructor:

constructor(){
  this.gridOptions = {

    getRowStyle: (params: any) => {
      if (params.data){
        if(params.data.flag) {
          return { background: '#eee', 'font-weight': 750 };
        }
      }
    }
  }// end of gridoptions
}// end of constructor

This is applying style what you return as a response of getRowStyle function

I always use this method in our project, like this:

If total ('Toplam') row's value in each column is not matched with another table's totals, then total row's background color changes into red color.

How can i set background color column based on value in AG Grid Angular

1 Answers