CODEWITHSUNDEEP
angulartypescriptasynchronousag-gridag-grid-angular
Nathan Clement
Nathan Clement

Reputation: 1195

How do I change cell styles in Ag Grid before and after completion of async method triggered by cell edit?

I'm making a data request when users update values in a grid. I would like the cell background to turn orange when I initiate the request. When the request completes, I would like the cell to flash green, and then turn back to it's default background color.

This is a simplified version of my current onCellValueChanged method.

onCellValueChanged(params) {
    // I thought this would change the background to orange, 
    // but strangely, it does nothing the first time, 
    // then permanently changes the background to orange if I edit the cell again.
    params.colDef.cellStyle = {backgroundColor: 'orange'};
    // This is my data request (works)
    this.queryService.getData().then(data => {
        const cellLocation = {
            rowNodes: [this.gridApi.getDisplayedRowAtIndex(params.rowIndex)],
            columns: [params.colDef['field']]
        };
        // The cells flash correctly
        this.gridApi.flashCells(cellLocation);
        // This seems to do nothing. I thought it would clear the orange background.
        params.colDef.cellStyle = undefined;
        // I thought refreshing the grid api might make cell Styles apply, but it doesn't seem to have an impact
        this.gridApi.refreshCells(cellLocation);
        }
    }).catch(err =>
    { 
        // This error check works if my data request fails
        console.warn(err);
    });
}

Per the code snippet comments, the getData request is working and the cells are flashing, but the background color of the cell does not change until the second edit, after which it permanently changes to orange. Is this the right approach? If so, how can I make this work? If not, does anyone have any recommendations?

Upvotes: 1

Views: 3718

Answers (1)

Nathan Clement
Nathan Clement

Reputation: 1195

Turns out the issues was with the refreshCells function. I needed to use the redrawRows function instead.

First, I needed to the get the current row:

const row = this.gridApi.getDisplayedRowAtIndex(params.rowIndex);

Then I needed to refresh that row after changing the cell style:

params.colDef.cellStyle = {backgroundColor: 'orange'};
this.gridApi.redrawRows({rowNodes: [row]});

Then I needed to do the same thing when removing the style:

params.colDef.cellStyle = undefined;
this.gridApi.redrawRows({rowNodes: [row]});

Upvotes: 1

Related Questions