CODEWITHSUNDEEP
angularag-grid
Ahmed Ghrib
Ahmed Ghrib

Reputation: 757

How to colorize rows in ag-grid/angular using gridOptions?

I am trying to colorize rows based on their rank. I found-out that I have to use gridOptions. But, I have failed to use it propertly.
This is what I've done so far:
In the html file: 

<ag-grid-angular
  style="width: 5000px ; height: 1000px;"
  class="ag-theme-balham"
  [rowData]="rowDataBia"
  [columnDefs]="columnDefsBia"
  [gridOptions]="gridOptions"
>
</ag-grid-angular>

In the component, this is the relevant code: 

 private gridOptions: GridOptions;

  gridOptions.getRowStyle = function(params) {
    if (params.node.rowIndex % 2 === 0) {
        return { background: 'red' }
    }
}

As I said this doesn't work.
Can someone please tell me what am I doing wrong and maybe how to fix it?
Thank you.

Upvotes: 0

Views: 90

Answers (2)

Ahmed Ghrib
Ahmed Ghrib

Reputation: 757

I just found out a simple solution:
In the grid definition in the html file add this: 

[getRowStyle]="getRowStyle"

In the typescript file add this: 

    public getRowStyle = function(params){
    if (params.node.rowIndex % 2 === 0) {
      return { background: 'red' }
  }
  }

Upvotes: 0

Alexander Zbinden
Alexander Zbinden

Reputation: 2541

Try this:

 gridOptions: GridOptions;

  this.gridOptions.getRowStyle = (params) => {
    if (params.node.rowIndex % 2 === 0) {
        return { background: 'red' }
    }
}

Upvotes: 1

Related Questions