How to get callback triggered by ag grid filter change?

Dash Python
1

I am trying to convert from datatable to ag grid. One of the things I have in datatable is a button to clear all filters. I have the button disabled if no filter is on and enable it when a filter is on. How do I get a callback to trigger in ag grid when a filter is changed(i.e. added or removed). I tried Input(“dag-datatable”, ‘filterModel’) but it does not trigger.

2

Hello @Brent,

Could you please provide an example app we can run?

3

Here is what I have using DataTable. The button to clear all filters at once is much easier than clearing each column one at a time. I have not been able to figure out how to do it in dash ag grid.

#!/usr/bin/env python3
"""Minimal dash program."""

from dash import callback, Dash, dash_table, html, Input, Output
import dash_bootstrap_components as dbc
import pandas as pd

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True)

dataframe = pd.DataFrame({'x': [1, 3, 5], 'y': [2, 4, 6]})

datatable = dash_table.DataTable(id='datatable',
                                 data=dataframe.to_dict('records'),
                                 columns=[{'name': col, 'id': col} for col in dataframe.columns],
                                 filter_action='native')
app.layout = dbc.Container(dbc.Card(dbc.CardBody([html.Button(id='clear-filter', children='Clear Filter', disabled=True), datatable])))

@callback(Output('clear-filter', 'disabled'),
          Input('datatable', 'filter_query'),
          prevent_initial_call=True)
def enable_clear_filter(filter_query):
    """enable/disable the clear filter buttion."""
    return filter_query == ''

@callback(Output('datatable', 'filter_query'),
          Input('clear-filter', 'n_clicks'),
          prevent_initial_call=True)
def clear_filter(_):
    """Clear all filters."""
    return ''

if __name__ == '__main__':
    app.run_server(debug=True, threaded=False, use_reloader=False)
4

Here you go:

#!/usr/bin/env python3
"""Minimal dash program."""

from dash import callback, Dash, dash_table, html, Input, Output
import dash_ag_grid as dag
import dash_bootstrap_components as dbc
import pandas as pd

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True)

dataframe = pd.DataFrame({'x': [1, 3, 5], 'y': [2, 4, 6]})

datatable = dag.AgGrid(id='grid',
                                 rowData=dataframe.to_dict('records'),
                                 columnDefs=[{'field': col} for col in dataframe.columns],
                            defaultColDef={'filter': True}
                        )
app.layout = dbc.Container(dbc.Card(dbc.CardBody([html.Button(id='clear-filter', children='Clear Filter', disabled=True), datatable])))

@callback(Output('clear-filter', 'disabled'),
          Input('grid', 'filterModel'),
          prevent_initial_call=True)
def enable_clear_filter(filter_query):
    """Disabled if no filters."""
    return filter_query == {}

@callback(Output('grid', 'filterModel'),
          Input('clear-filter', 'n_clicks'),
          prevent_initial_call=True)
def clear_filter(_):
    """Clear all filters."""
    return {}

if __name__ == '__main__':
    app.run_server(debug=True, threaded=False, use_reloader=False)
5

Thank you. That is what I tried in the first place but I had a typo in my id in my callback. Maybe someone else will find this useful.

1 Like