Ag-grid + Angular 2: Dynamically change cellClass of a column in row node

Question

I have a requirement where I need to update the background color of cells if the value of a column is different two adjacent rows. Also, I want to be able to do this for some columns only of the grid and not all the columns. (Refer Image)

What I did is:

1. I fetched all row nodes in the grid using forEachNode method of the gridApi.
2. I compared the value of the column with next value in my data array.

3. If the values are different, I update the cellClass property of that particular column in the node.

    this.gridApi.forEachNode(function (node) { if (node.rowIndex + 1 < currDetailGridData.length) { if (node.data['ColumnKey'] != currDetailGridData[node.rowIndex + 1]['ColumnKey']) { var nodeToHighlight = node.columnController.gridColumns.find(x => x.colId = 'ColumnKey'); nodeToHighlight.colDef.cellClass += 'bgColorRed'; } } }); 

However, this doesn't seem to be working. Need your help on identifying, what wrong am I doing here?

Answer 1

Might be you are executing it exactly after rowData binding inside onGridReady . If so, grid need to finalize the data-rendering process, so you can use the hack for it wrapping method in setTimeout , but I do not recommend to use this case.

setTimeout(() => {
    this.gridApi.forEachNode(node =>{
        ...
    })
}, 100);

Another way is to prepare columnDef first, and then use setColumnDefs API method to inform the grid , to avoid a loop check.

And the last one, I recommend using cellClass binding as function in columnDef

cellClass: this.handleCellClass.bind(this)
...
handleCellClass(params){
    if (params.node.rowIndex + 1 < this.rowData.length) {
        if (params.node.data['...'] != this.rowData[params.node.rowIndex + 1]['...']) 
            return  'bgColorRed';
    }
}