CODEWITHSUNDEEP
javascriptag-grid
Blake
Blake

Reputation: 374

Dynamic change of cell color with Ag Grid

We are trying to dynamically change the cell color of a column in Ag Grid. Here is the code. I didn't include the code that pulls the data from the database since that works just fine.

HTML (to define the grid):

<ag-grid-angular
   #eventsGrid2
   style="width: 1200px; height:300px;"
   class="ag-theme-balham"
   [rowData]="myEventsGrid"
   [columnDefs]="eventsCols"
   (gridReady)="onGridReady($event)">
</ag-grid-angular>

JS:

export class DataVis {
  @ViewChild('eventsGrid2') eventsGridComponent2: agGridNg2;
  selectedRows = [];
  eventsCols = [
    {headerName: '', field: 'colorId', colId: 'colorId'},
    {headerName: 'Id', field: 'id'},
    {headerName: 'File Id', cellClass: this.setColor.bind(this), field: 'fileId'}
  ]

  setColor(params) {
    this.selectedRows = [];
    this.eventsGridComponent2.api.forEachNode(node => this.selectedRows.push(node.data));
    console.log("SelectedRows:"+JSON.stringify(this.selectedRows));
    //I can see that it printed out the rows that show up in the grid
    this.selectedRows.forEach(function(element) {
      if(element.fileId == "1") {
         //trying to set the cellStyle in case that would work
         element.cellStyle = 'blue';
         //returning color to calling function
         return 'blue';
      } else {
         return 'red';
      }
      return 'green';

  }
}

If I put log statements in the color block I can see it hit blue where it should be blue and red where it should be red. However, it only logs out once for green but all rows in that column are now green! If I remove the return of green all rows are white background - no color. After the cellStyle change I tried this in case it needed to be refreshed:

element.cellStyle = 'blue';
this.eventsGridComponent2.api.redrawRows();

But it returned the following error:

Error: ag-grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout

I tried the timeout it suggested but that didn't seem to work.

I would have thought returning the colors where I return them would have worked, like it does for green... but I guess not.

Anyone have any thoughts?

I have created a Stackblitz to try and show what I am trying to do. I coudnt get my data to show up so I just forked another project...but it still shows what I am trying to do. In this case, I want Colombia to show up in blue - everything else red. However, it appears to loop through Colombia for every row and still doesnt set it to blue.

https://stackblitz.com/edit/ag-grid-template-renderer-example-3anbbx

Upvotes: 1

Views: 12616

Answers (1)

Blake
Blake

Reputation: 374

The working solution is in the Stackblitz in the question but here is what did it. Instead of looping through the rows in the grid and trying to grab what I thought I needed, I just used the params coming in from the grid itself.

ColDefs:

 ngAfterViewInit(): void {
    this.gridOptions.api.setColumnDefs([
      {headerName: '', field: 'colorId', colId: 'colorId', checkboxSelection: true, cellStyle: this.cellStyling},

Function:

cellStyling(params:any){   
   if (params.data.country == 'Colombia') {
     return {'background-color': 'blue'};
    } else {
         return {'background-color': 'green'};
   }

}

Upvotes: 1

Related Questions