How to capture 'viewportChanged' or 'modelUpdated' events in the AG Grid

Dash Python
1

Dear community,

Since AG Grid is now open sourced I decided to give it a try and refactor my DataTable components.

Most of the built-in features are better than DataTable and it was easy to replace. But I could not get along with its events much. I would like to get callback when a filter is applied. I could not find a proper documentation for python and I checked its original JS documentation. There, I saw there are events like called viewportChanged and modelUpdated which occurs after data displayed in the grid is changed. But unfortunately I could not find a way to get those events as inputs.

You can find my prototype code below.

@app.callback(  Output("chart", "figure"),
                Input("details-table", "modelUpdated"),
                Input("details-table", "viewportChanged"))
def model_updated(data, vp):
    print(data, vp)
    return go.Figure()

Can anyone help me on that one ?

2

Hello @mkaanerkoc,

Welcome to the community!

Please keep in mind that this is an alpha release, and not all the available features of the original have been ported over.

However, for these, it looks like the props are available. Could you please make an issue for it on the GitHub? It’s easier to track over there. :grin:

3

Hi @mkaanerkoc

If you need the filtered data, try using the virtualRowData prop in the callback. You can see an example if you clone the dash-ag-grid repo and run /docs/app.py You will find this in the “Other Examples” section.

You will notice that this app has a similar structure to the official AG Grid docs, but it not complete - for example the “Filtering” section is not yet included. If you or anyone here on the forum would like to contribute to the Dash AG Grid project, but don’t know much JavaScript, then helping with this documentation app is a great way to start!

ag_grid_crossfilter

From the README.md in the repo:

Dash AG Grid is currently a prerelease

We’re working hard to get it ready for its initial v2.0.0 open-source release on PyPI. In the meantime if you’d like to try it out, you can clone this repo and follow the instructions in Developing in this repo below to build the component and install it in development mode. At that point you can use import dash_ag_grid as dag in your own app. There are two apps in the docs/ folder that you can run to learn about the component. To run these, first install the docs requirements:

cd docs/
pip install -r requirements.txt

Then you can run the apps there:

  • demo_stock_portfolio.py and demo_stock_portfolio_simple.py are small apps demonstrating some key features of Dash AG Grid, such as calculated columns, conditional formatting, and connecting its data and selected rows to graphs.
  • app.py runs a comprehensive documentation app. After we complete the open-source release, this will be merged into the main dash docs at https://dash.plotly.com/ but right now this app is the best way to explore Dash AG Grid.
1 Like