ag Grid change cell color on Cell Value Change
Ag-grid does not have a built in feature to highlight edited cells. you can solve this in 2 ways.
Dynamically updating cell Style -
onCellValueChanged(params) {
if (params.oldValue !== params.newValue) {
var column = params.column.colDef.field;
params.column.colDef.cellStyle = { 'background-color': 'cyan' };
params.api.refreshCells({
force: true,
columns: [column],
rowNodes: [params.node]
});
}}Using a combination of
cellClassRules
, an edit flag andonCellValueChanged
-Define a css class for edited cell.
.green-bg {background-color: olivedrab;}
Define cellClassRules for the column which applies style based on flag you update on edit.
cellClassRules: {
'green-bg': (params) => { return params.data.isEdited}
}- Then you set the flag in your
onCellValueChanged
something like this -
onCellValueChanged(params) {
if (params.oldValue !== params.newValue) {
params.data.isEdited = true; // set the flag
}
params.api.refreshCells(); //causes styles to be reapplied based on cellClassRules
}
Dynamic change of cell color with Ag Grid
The working solution is in the Stackblitz in the question but here is what did it. Instead of looping through the rows in the grid and trying to grab what I thought I needed, I just used the params coming in from the grid itself.
ColDefs:
ngAfterViewInit(): void {
this.gridOptions.api.setColumnDefs([
{headerName: '', field: 'colorId', colId: 'colorId', checkboxSelection: true, cellStyle: this.cellStyling},
Function:
cellStyling(params:any){
if (params.data.country == 'Colombia') {
return {'background-color': 'blue'};
} else {
return {'background-color': 'green'};
}
}
AG-Grid: How to change color of cell based on value in other cell in the same row
The ag-grids document on cell styling says that you can define a cellStyle
in the column definition. Either you can define the style object manually or can use a function that will return a object of css styles.
For your case you can use a function to access the row nodes data and compute your styles based on that. In sort you want to do this:
var columnDef = [{ headerName: "Player Id", field: "id" }, { headerName: "Player Name", field: "playerName", cellClass: "playerNameClass",
// Defining the cell style by using a function
cellStyle: function(params) {
/* Params give assess to the row node from which we can get the node data. So you can get the data for another column and style your column based on that. */
var goals = params.node.data.goalsScored; console.log({ "params": params, "data": params.data, "goals": goals });
// Some Logic to style your components
if (goals === 0) { background = "#B70000" } else if (goals === 1 || goals === 2) { background = "#FF8400" } else if (goals === 3 || goals === 4) { background = "#FFF700" } else if (goals === 5 || goals === 6) { background = "#CEFF00" } else if (goals === 7) { background = "#05CC00" } else { background = "#fff" }
// Return the style object
return { background: background }; } }, { headerName: "Goals Scored", field: "goalsScored" }];
Change AG grid previous cellStyle dynamically based on condition of other nodes or row value
Check out cellClassRules
cellClassRules = {
'your-css-class': params => {
if (params.colDef.field === "myCurrentField" &&
params.data["previousField"] === "value") {
return true;
} else {
return false;
}
},
'your-other-css-class': params => {return false}
}
You can define as many class rules as you need, just separate by comma and the function should return true/false.
AG grid dynamic color value for cellstyle
@Basavaraj Thanks for the hint.
columnDefs = [
{ headerName: "Status", field: "statusCode",cellStyle: this.cellStyling},
]
Call this method to display style dynamically
cellStyling(params:any){
return {'background-color': params.data.colourCode};
}
Ag-grid conditional formatting
Write a function for the cellStyle
and have this function look at each and every value in the table, determine it's ranking, then have it return the relevant colour for the cell, i.e. the lower it is, return a more "reddish" colour, the higher it is, return a "greener" colour. Something like this:
function myCellStyleFunction(params) {
const totalCellCount = params.api.getDisplayedRowCount() * columnsCount;
let allValuesInTable = [];
rowData.forEach((x) => {
const valuesForRow = Object.keys(x).map(function (k) {
return x[k];
});
allValuesInTable = allValuesInTable.concat(valuesForRow);
});
const valuesForTableOrdered = allValuesInTable.sort(function (a, b) {
return a - b;
});
const valueIndex = valuesForTableOrdered.indexOf(params.value);
console.log(valueIndex)
debugger;
const bgColour = generateColor('#FF0000','#00FF00',totalCellCount,valueIndex)
return { backgroundColor: '#' + bgColour };
}
And apply this cellStyle
in defaultColDef
so it is applied to every cell.
Demo.
Related Topics
Input Date Format With Dd/Mm/Yyyy in the Input Field
How to Correctly Use Axios Params With Arrays
Remove Whitespace Inside Json Object Key Value Pair
How to Hide Select Options With Javascript (Cross Browser)
Onclick JavaScript to Make Browser Go Back to Previous Page
Webpack: Module Not Found: Error: Can't Resolve (With Relative Path)
Convert JavaScript Date Format to Yyyy-Mm-Ddthh:Mm:Ss
Javascript File Not Updating No Matter What I Do
How to Prevent Form to Reload Page After Onsubmit
How to Reload a Page With React-Router
React Router - Stay At the Same Page After Refresh
How to Manipulate a Select Options Based on Another Select Option in HTML
How to Get Checkbox Value in Angular
How to Display an Iframe on Button Click