I attempt to styles an edited cell by taking advantage of onCellValueChanged in colDef props but It does not work as attended. I am still new using Ag Grid and nothing about styling an edited cell is documented or maybe I missed it.
The code looks like this
const defaultColDef = useMemo<ColDef>(() => {
return {
resizable: true,
headerComponent: "customHeader",
onCellValueChanged: ({ colDef, api, node, column, columnApi }) => {
colDef.cellClass = p => {
return (p.colDef.field ?? p.colDef.colId) === (colDef.field ?? colDef.colId) && p.rowIndex === node?.rowIndex
? "dirty-cell"
: "";
};
api.refreshCells({ rowNodes: [node!], force: true });
}
};
}, []);
<AgGridReact
ref={gridRef}
defaultColDef={defaultColDef}
onCellValueChanged={onCellChange}
rowData={rows}
columnDefs={columns}
getRowId={param => param.data.id ?? param.data.virtual_id}
components={{ customHeader: CustomHeaderCell }}
onCellDoubleClicked={onCellDoubleClicked}
onCellKeyDown={onCellKeyDown}
rowClassRules={rowClassRules}
gridOptions={{ tooltipShowDelay: 0 }}
onDragStopped={onDragStopped}
/>
Hope my question is clear ! Thanks
I used cellStyle in my code. It compares old and new value, if value is changed the css style is applied to that cell
onCellValueChanged = (params) => {
if (params.oldValue !== params.newValue) {
params.column.colDef.cellStyle = (value) => {
return value.rowIndex.toString() === params.node.id
? { 'backgroundColor': '#9ac1fc' } : {}
};
params.api.refreshCells({
force: true,
columns: [params.column.getId()],
rowNodes: [params.node]
});
}
}
The code is in JS and you may need to convert in TypeScript, if some syntax error occured.