ag-grid colDef appears inconsistent between events

Question

according to documentation ag-grid column definitions can be used to update cell css class. colDef object is available in column events, i.e. newValueHandler and cellValueChanged. I am trying to use this to add/remove css classes.

It works in newValueHandler but does not work in onCellValueChanged. I can see both of these events args expose a colDef object, but the following works only in newValueHandler:

dropdownValueUpdateHandler(p, key) {
        this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code)
            .catch(err => {
                p.colDef.cellClass = 'ag-etp-cell-failed'; // <---- updating cell to show error

the last line works in first event, but on cell value changed event it does nothing.

update: attempting to use dynamic function but that's not working correctly either (or im doing it wrong)

getCellClass(p){
    console.debug('getCellClass ', p);
    return p.data.Status == 'saved'
        ? 'ag-etp-cell-saved'
        : p.data.Status == 'failed'
            ? 'ag-etp-cell-failed'
            : '';

}

in my valueUpdatedHanler on success:

e.data.Status = 'saved';
e.api.refreshCells([ e.node] , [e.colDef.field]); // this has a weird lag, doesn't refresh correct, doesn't seem to call getCellClass function
e.api.refreshView(); // this works but refreshes the whole grid which can be costly

the updates sort of work, but subsequent events seem to lag behind, i.e. if previous event was a fail, the next success still comes back as fail style

if i refresh the whole grid, it works. but i was hoping to avoid doing that since it's a big grid..

Anthony C Anthony C · Accepted Answer · 2016-11-30T21:25:43

When you update the column definition, You have to tell ag-grid to refresh to pick up the changes. You can do it by calling gridAPI.refreshView() to refresh the entire grid or gridAPI.refreshCells(rowNodes, colIds) to just refresh that cell.

CellClass will just add classes to the cell without removing previously added.

You may want to use cellClassRules to handle more complex rule

cellClassRules : {
    'ag-etp-cell-failed': function(params) { return params.data.Status === 'failed' },
//etc
},

ag-grid colDef appears inconsistent between events

1 Answers