How to Change Color of Ag-Grid Cells for Dynamically Changing Data

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.

  1. 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]
    });
    }}
  2. Using a combination of cellClassRules, an edit flag and onCellValueChanged -

    • 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



Leave a reply



Submit