Ag Grid highlighting duplicated cell values

Redhotmoons · September 13, 2023, 2:36pm

I was wondering if there was a way I could highlight duplicated cell values for a given column.
I’ve tried:

columnDefs = [ {
“field”: “sample_id”,
“cellClassRules”: {“duplicate-sample-id”: ‘isDuplicateSampleID(params)’},
}]

Then in assets/dashAgGrudFunctions.js

dagfuncs.isDuplicateSampleID = function(params) {
let count = 0;
params.api.forEachNode((node) => {
if (node.data.sample_id === params.value) {
count++;
}
});
return count > 1; // Return true if duplicate is found
}

and assets/some_css.css

.duplicate-sample-id {
background-color: red !important;
color: white !important;
}

jinnyzor · September 13, 2023, 3:31pm

Hello @Redhotmoons,

This looks like it could work. Did you give it a test?

Redhotmoons · September 13, 2023, 3:34pm

It doesn’t seem to

Perhaps the grid I’m testing with is a little complex, I’ll create an simplified example and re-test

jinnyzor · September 13, 2023, 3:35pm

Can you provide an example set?

I’d like to test too.

Redhotmoons · September 13, 2023, 3:53pm

@jinnyzor

Ah it seems there was something funky happening using my application, I’ve reproduced it using a simplfied version:

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/wind_dataset.csv")


app = Dash(__name__)

columnDefs = [
    {"field": "direction"},
    {"field": "strength"},
    {"field": "frequency", "cellClassRules": {"duplicate-sample-id": "isDuplicate(params)"}},
]

grid = dag.AgGrid(
    id="get-started-example-basic",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
)

app.layout = html.Div([grid])

if __name__ == "__main__":
    app.run(debug=True)

/assets/dashAgGridFunctions.js

 dagfuncs.isDuplicate = function(params) {
            let count = 0;
            const targetFrequency = params.value;
            const currentRowNodeId = params.node.id;

            params.api.forEachNode((node) => {
                if (node.id !== currentRowNodeId && node.data.frequency === targetFrequency) {
                    count++;
                }
            });

            return count >= 1;  // True if another row with the same frequency is found
}

assets/some_css.css

.duplicate-sample-id {
    background-color: red !important;
    color: white !important;
}

Redhotmoons · September 13, 2023, 3:56pm

I think it’s not working in my application due to a valueGetter on the same column, I’ll have a play around and see if I can get an example set up

jinnyzor · September 13, 2023, 3:59pm

Hmm, you were able to get the above version to work?

You could always use the params.data.frequency instead of your params.value

Redhotmoons · September 13, 2023, 4:02pm

The above example seems to work fine:

example_1

It doesn’t currently work in the application I’m working on, I think because I’m using a valueGetter at the same time.

jinnyzor · September 13, 2023, 4:03pm

Try this instead.

Redhotmoons · September 13, 2023, 4:12pm

Ah yes!

dagfuncs.isDuplicateSampleID = function(params) {
    let count = 0;
    const targetSampleID = params.data.frequency;
    const currentRowNodeId = params.node.id;

    params.api.forEachNode((node) => {
        // Check if the node being examined isn't the current node
        if (node.id !== currentRowNodeId && node.data.sample_id === targetSampleID) {
            count++;
        }
    });

    return count >= 1;  // True if another row with the same sample_id is found
}

seems to have worked nicely

Redhotmoons · September 13, 2023, 4:32pm

@jinnyzor

Actually, it does not

from dash import Dash, html
import dash_ag_grid as dag

app = Dash(__name__)

columnDefs = [
    {"headerName": "Column A", "field": "columnA"},
    {"headerName": "Column B", "field": "columnB"},
    {
        "headerName": "Column C",
        "field": "columnC",
    },
    {
        "headerName": "Generated ID",
        "field": "generatedID",
        "valueGetter": {"function": "getGeneratedID(params)"},
        "cellClassRules": {"duplicate-id": "isDuplicateID(params)"},
    },
]

rowData = [
    {"columnA": "A1", "columnB": "B1", "columnC": "C1"},
    {"columnA": "A2", "columnB": "B2", "columnC": "C2"},
    {"columnA": "A1", "columnB": "B1", "columnC": "C3"},
    {"columnA": "A3", "columnB": "B3", "columnC": "C4"},
    {"columnA": "A4", "columnB": "B4", "columnC": "C5"},
    {"columnA": "A1", "columnB": "B1", "columnC": "C6"},
    {"columnA": "A5", "columnB": "B5", "columnC": "C7"},
    {"columnA": "A6", "columnB": "B2", "columnC": "C8"},
    {"columnA": "A7", "columnB": "B7", "columnC": "C9"},
]


grid = dag.AgGrid(
    id="get-started-example-basic",
    rowData=rowData,
    columnDefs=columnDefs,
)

app.layout = html.Div([grid])

if __name__ == "__main__":
    app.run(debug=True)

assets/dashAgGridFunctions.js

dagfuncs.getGeneratedID = function(params) {
    // Placeholder logic to generate an ID, adapt as needed
    return params.data.columnA + "-" + params.data.columnB;
}

dagfuncs.isDuplicateID = function(params) {
    let count = 0;
    const targetID = params.data.generatedID;
    const currentRowNodeId = params.node.id;

    params.api.forEachNode((node) => {
        if (node.id !== currentRowNodeId && node.data.generatedID === targetID) {
            count++;
        }
    });

    return count >= 1;  // True if another row with the same ID is found
}

assets/some_css.css

.duplicate-id {
    background-color: red !important;
    color: white !important;
}

jinnyzor · September 13, 2023, 4:36pm

Undefined always equals undefined:

dagfuncs.isDuplicateID = function(params) {
    let count = 0;
    const targetID = dagfuncs.getGeneratedID(params);
    const currentRowNodeId = params.node.id;

    params.api.forEachNode((node) => {
        if (node.id !== currentRowNodeId && dagfuncs.getGeneratedID(node) === targetID) {
            count++;
        }
    });

    return count >= 1;  // True if another row with the same ID is found
}

You have to apply the formulas together…

Redhotmoons · September 13, 2023, 4:46pm

arrggh

my apologies <3

jinnyzor · September 13, 2023, 4:48pm

Haha, no worries.

params.data is only what data you pass to the grid. Since you are making the column GeneratedID, it doesnt exist in the data.

Redhotmoons · September 13, 2023, 7:27pm

@jinnyzor

I’ve noticed that the data in the generated_id column is not contained in the rowData property of the grid when I try to access it via a callback.

I don’t suppose you know if there’s a way to retrieve the data?

Best wishes
-D

import dash_ag_grid as dag
import dash_mantine_components as dmc
from dash import Dash, html, Output, Input, no_update, dcc

app = Dash(__name__)

columnDefs = [
    {"headerName": "Column A", "field": "columnA"},
    {"headerName": "Column B", "field": "columnB"},
    {
        "headerName": "Column C",
        "field": "columnC",
    },
    {
        "headerName": "Generated ID",
        "field": "generatedID",
        "valueGetter": {"function": "getGeneratedID(params)"},
        "cellClassRules": {"duplicate-id": "isDuplicateID(params)"},
    },
]

rowData = [
    {"columnA": "A1", "columnB": "B1", "columnC": "C1"},
    {"columnA": "A2", "columnB": "B2", "columnC": "C2"},
    {"columnA": "A1", "columnB": "B1", "columnC": "C3"},
    {"columnA": "A3", "columnB": "B3", "columnC": "C4"},
    {"columnA": "A4", "columnB": "B4", "columnC": "C5"},
    {"columnA": "A1", "columnB": "B1", "columnC": "C6"},
    {"columnA": "A5", "columnB": "B5", "columnC": "C7"},
    {"columnA": "A6", "columnB": "B2", "columnC": "C8"},
    {"columnA": "A7", "columnB": "B7", "columnC": "C9"},
]


grid = dag.AgGrid(
    id="get-started-example-basic",
    rowData=rowData,
    columnDefs=columnDefs,
)

app.layout = html.Div([dmc.Button("test", id="test_button"), grid, dcc.Store(id="test_store")])


@app.callback(
    Output("test_store", "data"), Input("get-started-example-basic", "rowData"), Input("test_button", "n_clicks")
)
def get_rowdata(rowData, n_clicks):
    print(f"rowData = {rowData}")
    return no_update


if __name__ == "__main__":
    app.run(debug=True)

jinnyzor · September 13, 2023, 7:32pm

Not unless you set the data to a blank field in the data, which you could do that I guess, during the function…

Redhotmoons · September 13, 2023, 8:04pm

Seems to have done the trick

example updating sample_id column:

dagfuncs.isDuplicateSampleID = function(params) {
    let count = 0;
    const targetSampleID = dagfuncs.getSampleID(params);  // Use the getSampleID function here
    const currentRowNodeId = params.node.id;

    params.api.forEachNode((node) => {
        // Check if the node being examined isn't the current node
        if (node.id !== currentRowNodeId && dagfuncs.getSampleID(node) === targetSampleID) {
            count++;
        }
    });

    if (count === 0) {
        params.node.setDataValue('sample_id', targetSampleID);
    }

    return count >= 1;  // True if another row with the same sample_id is found
}

Topic		Replies	Views
Is there a way to highlight multiple cells in Dash AG-GRID and it will display the total Dash Python question	1	363	October 5, 2023
Ag Grid Conditionnal Row Styling from Python callback Dash Python question	4	359	September 7, 2023
Dash table - highlight cell(s) with different value than in previous row Dash Python	3	531	March 9, 2023
Dash AG Grid single cell styling after cell edit Dash Python question	10	2986	April 28, 2024
Dash ag grid: highlighting the max on each row Dash Python	4	670	May 31, 2023

Ag Grid highlighting duplicated cell values

Related topics