Menu
I created an editable grid using ag-grid and I need to highlight the cells that were changed. I added the following code:
(cellValueChanged)="onDemandsCellValueChanged($event)"
And the method:
onDemandsCellValueChanged(params): void {
if (params.oldValue === params.newValue) {
return;
}
params.data.modified = true; // add modified property so it can be filtered on save
const column = params.column.colDef.field;
params.column.colDef.cellStyle = { 'background-color': '#e1f9e8' }; // highlight modified cells
params.api.refreshCells({
force: true,
columns: [column],
rowNodes: [params.node],
});
}
The cell is highlighted but when I scroll up and down all the cell from that column are highlighted.
You can check the behavior on stackblitz.
Also if you have a better way of doing this I'm open to new solutions.
956
Rows highlight by default as this is a common requirement. Column highlighting is less common and as such needs to be opted it. Row Highlighting works by the grid adding the CSS class ag-row-hover to the row's getting hovered.
I believe that you use cellStyle callback of the columnDefs to make the font bold. If you need to do it for the whole row, create a common callback function and use it in cellStyle of all columnDefs . There is no single command to change the style of a row.
To handle refresh, implement logic inside the refresh() method inside your component and return true. If you do not want to handle refresh, just return false from the refresh method (which will tell the grid you do not handle refresh and your component will be destroyed and recreated if the underlying data changes).
If you are using cellStyle to highlight changing data, then please take note that grid will not remove styles. For example if you are setting text color to 'red' for a condition, then you should explicitly set it back to default eg 'black' when the condition is not met. Otherwise the highlight will remain once it's first applied.
In order to modify the style of the selected rows and cell range we wrap ag-Grid in a div with a class name that will be used to target the ag-Grid row and cell styles. This way we can target different CSS rules based on the wrapping div's class name.
If you are using cellStyle to highlight changing data, then please take note that grid will not remove styles. For example if you are setting text color to 'red' for a condition, then you should explicitly set it back to default eg 'black' when the condition is not met.
When you update a cell value, the cellClassRules are refreshed automatically and the correct CSS classes are applied according to the styling conditions set. This means you don't need to write any extra code to support style updates when grid values are updated. See this in action in the GIF below where we are performing two actions:
I understand your problem You can achieve what you want like this - you should use cellStyle in your column definition as showing in docs and for this code is below
cellStyle: params => {
if (
params.data["modifiedRow" +
params.node.rowIndex +"andCellKey"+
params.column.colDef.field]
) {
return { backgroundColor: "#e1f9e8" };
} else {
return null;
}
},
and after that in this function onDemandsCellValueChanged please add and modify this property modified as true and change your function like this as shown below
onDemandsCellValueChanged(params): void {
if (params.oldValue === params.newValue) {
return;
}
const column = params.column.colDef.field;
params.data["modifiedRow" + params.rowIndex + "andCellKey" + column] = true;
params.api.refreshCells({
force: true,
columns: [column],
rowNodes: [params.node]
});
}
Now it should work even when you scroll. Here is complete working Example on stackblitz
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
