Dash AG Grid valueFormatter not working properly

Dash Python
1

Hi guys, I have two dropdowns in my dashboard, one for report name and one for report date. I’m using a basic callback to update ag grid’s column definitions and row data props based on user selected input from these dropdowns.

The funny thing is when the dashboard loads, I select a report and date in the dropdown, the ag grid will show the correct row data and column definitions including “cellStyle” color etc., but it will not apply the valueFormatter for my numeric fields. However, when I change the date in the dropdown, the valueFormatter will somehow start working as well (shows negative values in parenthesis with correct decimal places etc.).

Any idea what could be causing this? Here’s an example of a colDef I’m using for one of the numeric fields:

{ “field”: “Up”, “aggFunc”: “sum”, “maxWidth”: 80, “type”: “rightAligned”, “valueFormatter”:{“function”: “d3.format(‘(,.0f’)(params.value)”}, “cellStyle”: { “styleConditions”: [{“condition”: “params.value < 0”, “style”: {“color”: “salmon”}}] }},

2

Hello @Neil_H,

Is the messed up formatting only on the aggregated data and proper on the individual rows?

3

Great question actually, I only have aggregated data in the table at the moment.

4

My guess is this is correct.

To use aggData, you need to adjust your formulas and conditions as such:

"valueFormatter":{"function": "params.group ? d3.format('(,.0f')(params.node.aggData[params.column.colId]) : params.value ? d3.format('(,.0f')(params.value) : null"},
"cellStyle": { "styleConditions": [{"condition": "params.value ? params.value < 0 : false", "style": {"color": "salmon"}},
{"condition": "params.group ? params.node.aggData[params.column.colId] < 0 : false", "style": {"color": "salmon"}}] }}

Give this a try, I might be off a little bit on some of the stuff.

5

Humm, I think I’m close but haven’t got this working yet, I am using “field” instead of “colId” but playing around with that didn’t work…

6

If you could provide some test data, I’d be able to help out more. :stuck_out_tongue:

7

Here’s some test data, hope this works:

Inventory Id Up
322 (244.97)
191 (584.96)
106 (406.67)
455 (379.43)
210 (493.94)
275 (906.55)
473 106.70
58 4.63
176 62.28
312 0.00
312 0.00
422 0.00
262 47.23
8

Hmm, my code seems to work?

image

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

app = Dash(
        __name__
    )

df = pd.read_csv('Book1.csv')

columnDefs = [{'field': i} for i in df.columns]

for i in range(1):
    columnDefs[i]['rowGroup'] = True
    columnDefs[i]['hide'] = True

columnDefs[-1]['aggFunc'] = 'sum'
columnDefs[-1]['valueFormatter'] = {"function": "params.group ? d3.format('(,.0f')(params.node.aggData[params.column.colId]) : (params.value ? d3.format('(,.0f')(params.value) : null)"}
columnDefs[-1]['cellStyle'] = { "styleConditions": [{"condition": "params.value ? params.value < 0 : false", "style": {"color": "salmon"}},
{"condition": "params.group ? params.node.aggData[params.column.colId] < 0 : false", "style": {"color": "salmon"}}] }

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=df.to_dict('records'),
            enableEnterpriseModules=True,
            dashGridOptions={"suppressAggFuncInHeader": True,}
        ),
    ]
)

app.run(debug=True)
2 Likes
9

Thanks so much for your help - the issue of not working on initial loading still is still present, you know going back to the original question - the formatting does work for the aggregated fields, the issue is that it does not work on initial loading, it only works when I change the date in the dropdown (which will refresh my dashboard with a new set of ag grid column defs and row data and other charts).

I have one callback in the dashboard that includes multiple inputs/outputs since I’m taking both report name and data from user input and updating my ag grid and other visualizations.

It seems to be some sort of issue with not applying the valueFormatter specifically on initial loading (the style / colors still work even on initial load). Your solution of applying the valueFormatter to the grouped data makes sense but not sure why it doesn’t work…

10

The code I provided demonstrates that the columnDefs and formatting load properly, as I have no callbacks.

It seems to me that you have an issue somewhere else.

What version of the grid are you using? You should be using 2.1.

11

That’s what it was!!! Needed to update ag grid, I didn’t realize 2.1 was out now :man_facepalming:t4:

Thanks a bunch, hoping someone else gets some value out of the valueFormatter code here

2 Likes
12

Haha, yup.

2.1 was a major step to how columnDefs work, they trump the existing columnState, which was the battle you were fighting. :slight_smile:

1 Like