CODEWITHSUNDEEP
javascripthtmlag-grid
shek
shek

Reputation: 297

How to change color of ag-grid cells for dynamically changing data

I have a table that loads from dynamically changing data. It refreshes every 5 secs. I'm using ag-grid for it using this example: https://www.ag-grid.com/javascript-grid-sorting/index.php

Is it possible to change color of the cells whose values have changes, like suppose a cell value is 100 and it becomes (less than this i.e. <100) so make the cell red color, id it becomes greater, make it green color. I'm trying to do it using this example: https://www.ag-grid.com/javascript-grid-cell-styling/index.php

But I can't understand how to do this.

UPDATE: I'm doing it this way, but it's not changing the color:

var columnDefs = [
    {headerName: "Arr Px Slippage", field: "total_wt_arr_slp", width: 100, newValueHandler: compareValues},
    {headerName: "IVWAP Slippage", field: "total_wt_ivwap_slp", width: 100}


];

function compareValues(params) {
    if (params.oldValue > params.newValue){ 
    return {color: 'green', backgroundColor: 'black'};
    console.log(params.newValue);

    }
    if (params.oldValue < params.newValue){ 
    return {color: 'red', backgroundColor: 'black'};
    }
}

Upvotes: 15

Views: 79548

Answers (5)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20158

We can write logic something below and change the color of the cell

const cellRender = params => {
    const filterInput = params.api.getFilterModel().Name?.filter
    const value = params.value

    if (filterInput && value) {
        return <Name name={String(value)} highlight={String(filterInput)} /> // here you can write you logic to change color
    }
    return value
}


export default [
    {
        cellRenderer: cellRender,
        field: 'name',
        headerName: 'Name',
        headerTooltip: 'Name',
        tooltipField: 'name'
    }
]

Upvotes: 0

Rajanikanta Pradhan
Rajanikanta Pradhan

Reputation: 660

Here is the snippet of code where you can change the color of the ag grid cell text and background color.

 var colDef = {
            name: 'Dynamic Styles',
            field' 'dummyfield',
            cellStyle: function(params) {
                if (params.node.value=='Police') {
        //Here you can check the value and based on that you can change the color
                    //mark police cells as red
                    return {color: 'red', backgroundColor: 'green'};
                } else {
                    return null;
                }
            }
        }

Upvotes: 11

jsmtslch
jsmtslch

Reputation: 718

Actually I just got mine working. You need "cellClassRules" attribute on each column where you want to change the color. Something like:

{headerName: "header", field:"field",suppressMenu: true, volatile: true, suppressMovable: true, cellClassRules: {'bold-and-red': 'x>1'} }

Here 'x' in the rule is the value of the column. Also, you need to mark your column as voaltile: true.
For volatile fields to dynamically change, you need api.softRefreshView() while you are refreshing the data.
The css class 'bold-and-red'can be defined in your html file like: .bold-and-red { color: darkred; font-weight: bold; }

Upvotes: 3

JohnR
JohnR

Reputation: 51

What you have written is mostly correct: 

function compareValues(params) {
if (params.oldValue > params.newValue){ 
return {color: 'green', backgroundColor: 'black'};
console.log(params.newValue);

}
if (params.oldValue < params.newValue){ 
return {color: 'red', backgroundColor: 'black'};
}

And the info Jarod Moser gave you about the params object for this callback is spot on and important.

The issue you are having is that you are trying to return {style} but you can't do that. You need to have access to the html element (the containing <div>) and set a class on it (having the class defined with the style you desire). I have done this in ag-grid where I have access to params.eGridCell but within this particular callback eGridCell is not available. If I find a good way to get to the <div> I'll edit this post with what I found.

EDIT - Additional Information

I don't think I would use the newValueHandler for what you are trying to do.

You don't say how you are updating the data, but you do say it is possibly updated every 5 seconds.

However you are deciding to update a cell, you could add to the rowData object a property 'origValue', and before updating the cell value, set the current value to 'origValue' and then set the new value to value. THEN... you could use the cellClass column property, using a callback function, and compare the new value to the 'origValue' and return the desired style.

Examples from the Documentation: 

// return class based on function
var colDef3 = {
    name: 'Function Returns String',
    field' 'field3',
    cellClass: function(params) { return (params.value==='something'?'my-class-1':'my-class-2'); }
}


// return array of classes based on function
var colDef4 = {
    name: 'Function Returns Array',
    field' 'field4',
    cellClass: function(params) { return ['my-class-1','my-class-2']; }
}

The params object for cellClass has access to the row data, and will be able to compare the new and orig values.

There are many options once you get digging. Choose what you think is best.

Upvotes: 2

Jarod Moser
Jarod Moser

Reputation: 7348

Looks like you should be able to use the newValueHandler which is an attribute of each column.

From the docs:

If you want to use the simple text editing, but want to format the result in some way before inserting into the row, then you can provide a newValueHandler to the column. This will allow you to add additional validation or conversation to the value.

newValueHandler is provided a params object with attributes:

  • node: The grid node in question.
  • data: The row data in question.
  • oldValue: If 'field' is in the column definition, contains the value in the data before the edit.
  • newValue: The string value entered into the default editor.
  • rowIndex: The index of the virtualised row.
  • colDef: The column definition.
  • context: The context as set in the gridOptions. api: A reference to the ag-Grid API.

So something along the lines of:

var colDefs = [{
    header: 'comparing to previous val'
    newValueHandler: compareValues
}]

function compareValues(params){
    if (params.oldValue > params.newValue){ //make it red}
    if (params.oldValue < params.newValue){ //make it green}
}

Upvotes: 1

Related Questions