Dash-ag-grid row grouping breaks date filter

Dash Python
1

Hi,

I am trying to follow these examples to set up a date filter:

The examples work fine except if I try to enable row grouping in the dash grid options:

"rowGroupPanelShow": 'always',

Then if I try to group any rows I get a bunch of undefined errors:

error2
error21419×636 70.4 KB

I assume it is something simple that needs to be changed with the valueGetter or valueFormatter, but I can’t figure it out. Or I think I read something about registering functions (maybe that was only for the sideBar? I can’t remember.)

Any help would be appreciated. Thanks!

Full code below:

python

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

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

# basic columns definition with column defaults
columnDefs = [
    {"field": "athlete", "filter": False},
    {"field": "country", "filter": False},
    {
        "headerName": "Date",
        "filter": "agDateColumnFilter",
        # "valueGetter": {"function": "params.data.date ? d3.timeParse('%d/%m/%Y')(params.data.date)"},
        # "valueFormatter": {"function": "params.data.date ? params.data.date"},
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        # "valueFormatter": {"function": "params.data.date"},
        "valueFormatter": {"function": "handle_na(params.value)"},
        "filterParams": {
            "browserDatePicker": True,
            "minValidYear": 2000,
            "maxValidYear": 2021,
        },
    },
]

defaultColDef = {
    "flex": 1,
    "minWidth": 150,
    "filter": True,
    "floatingFilter": True,

    "enableRowGroup": True,
}

dashGridOptions = {
        # Grouping / Sidebar
        "sideBar": True,
        "rowGroupPanelShow": 'always',
        # Tooltip
        "tooltipShowDelay": 0,
        "tooltipHideDelay": 2000,
        # Other
        "animateRows": True,
        "rowSelection": "multiple",
        "suppressAggFuncInHeader": True,
}

app.layout = html.Div(
    [
        dcc.Markdown("Date Filter Example"),
        dag.AgGrid(
            id="date-filter-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,

            dashGridOptions=dashGridOptions,
            enableEnterpriseModules=True,
        ),
    ],
    style={"margin": 20},
)

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

tried writing this function js didn’t work

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.handle_na = function(value, filna="") {
    if (isNaN(value)){
        return filna
    }
    return value
}
2

Hi @daflamingpotato

Can you include a complete minimal example that reproduces the issue?

3

@daflamingpotato

You might find this post helpful:

4

Updated original post with the full code

Versions:
dash 2.14.2
dash-ag-grid 2.4.0

5

I think I’ve almost got it now.

"valueGetter": {"function": "params.data ? d3.timeParse('%d/%m/%Y')(params.data.date) : d3.timeParse("
                                    "'%d/%m/%Y')('01/01/1900')"},
        "valueFormatter": {"function": "d3.timeParse('%d/%m/%Y')(params.value)"},

The issue is the value formatter can’t access the params.data.date in grouping because the date cells for the grouping are null.

Is there a built-in locale, like with number format, that works with d3 timeParse / timeFormat? And would replace NaN with ‘’?

Thanks

6

Managed to get it working. Somehow I was using timeParse instead of timeFormat on the formatter.

"valueGetter": {"function": "params.data ? d3.timeParse('%d/%m/%Y')(params.data.date) : ''"},
"valueFormatter": {"function": "params.value !== '' ? d3.timeFormat('%d/%m/%Y')(params.value) : ''"},
1 Like