Dash AG Grid V32 Custom Filter Component error cant access doesFilterPass param

Dash Python
1

Hey everyone,

I use dash ag grid community, and am trying to make a custom filter component for my grid. I am using dash version 2.15.0 and dash ag grid version 32.3.0, which should be using ag grid version 32.3.4.

I have a custom component defined in /assets/dashAgGridComponentFunctions.js. However, no matter what I try, I cant get it to find the doesFilterPass hook used my the actual ag grid. Is anyone able to assist?

2

this is the error in the developer console:

index.esm.mjs:632 Uncaught TypeError: Cannot read properties of undefined (reading ‘doesFilterPass’)

3

Hi @nsledford

Just cross posting from the solution in the GitHub issue. See the full discussion and another example:

Note this is for AG Grid version 32. For anyone upgrading from V31, you can use the custom component defined for V31 by setting dashGridOptions={"reactiveCustomComponents": False}

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

app = Dash(__name__)

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

rowData = df.to_dict('records')

columnDefs = [
    { 'field': 'age', 'filter': 'agNumberColumnFilter' },
    { 'field': 'country', 'minWidth': 150 },
    { 'field': 'year', 'filter': {'function': 'YearFilter'}},
    {
      'field': 'date',
      'minWidth': 130,
      'filter': 'agDateColumnFilter',
      'filterParams': {
        'comparator': {'function':'dateComparator'},
      },
    },
    { 'field': 'sport' },
    { 'field': 'gold', 'filter': 'agNumberColumnFilter' },
    { 'field': 'silver', 'filter': 'agNumberColumnFilter' },
    { 'field': 'bronze', 'filter': 'agNumberColumnFilter' },
    { 'field': 'total', 'filter': 'agNumberColumnFilter' },
]

defaultColDef = {
    'editable': True,
    'sortable': True,
    'flex': 1,
    'minWidth': 100,
    'filter': True,
    'resizable': True,
}


app.layout = html.Div(
    [
        html.H3("See the custom filter component in the Year column"),
        dag.AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=rowData,
            defaultColDef=defaultColDef,          
        ),
    ]
)


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



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

const {useImperativeHandle, useState, useEffect, forwardRef} = React;
dagfuncs.YearFilter = forwardRef((props, ref) => {
    const [year, setYear] = useState('All');

    dash_ag_grid.useGridFilter({
           doesFilterPass(params) {
               return params.data.year >= 2010;
           },          
   });

   useEffect(() => {
       props.onModelChange(year === "All" ? null : year)
   }, [year]);

    setProps = ({value}) => {
        if (value) {
            setYear(value)
        }
    }

    return React.createElement(
        window.dash_core_components.RadioItems,
        {
            options: [
                {'label': 'All', 'value': 'All'},
                {'label': 'Since 2010', 'value': '2010'},
            ],
            value: year,
            setProps
        }
    )
});

See the two examples on PyCafe:

And here is an example with the custom Autocomplete component in the filter

Ag-Grid Custom Filtering
4

Hi! @AnnMarieW , I migrated from dash 2.15 to dash 2.18, and now the useGridFilter hook is not available to use. Would you mind walking me through what changes between these dash versions so i can still use this hook? I am still using dash ag grid 31.3.0. Everything else should be the same. Thank you!

p.s. when i checked the chrome dev console, i could see the useGridFilter hook in the version of the app running dash 2.15, but not in the version of the app running 2.18.

5

Hi @nsledford the useGridFilter hook is an AG Grid hook. It’s independent of the the dash version. Can you confirm what version of the grid you are using? There were some changes in hooks, but in later versions

6

Hi! I am using the following:

dash 2.18.0
dash_ag_grid 31.3.0

7

@AnnMarieW I just checked both versions of my venv’s and they are both using dash_ag_grid = 31.3.0

8

disregard. Upgrading to 32.3.2 resolved the issue. Thanks!

1 Like