How to add persistence to Dash AG grid?

Dash Python
1

Could someone point out where to find persistence in Dash AG grid docs? Thank you

2

Hi @Paichui

Great question - there is one example of using persistence in docs, but it’s not easy to find. I’ll add a section on persistence in the next update.

Persistence works with AG Grid the same way as in other Dash components.

This is from the reference section of the docs:

persisted_props (list of strings; default ['selectedRows']): Properties whose user interactions will persist after refreshing the component or the page.

persistence (boolean | string | number; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If persisted is truthy and hasn’t changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

persistence_type (a value equal to: ‘local’, ‘session’, ‘memory’; default 'local'): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

In this example, we set the filterModel prop for persistence:

        dag.AgGrid(         
            persistence=True,
            persisted_props=["filterModel"]
            # other props
        ),

Here’s another example with persisted selectedRows (The default)

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

app = Dash(__name__)

columnDefs = [
    {
        "headerName": "Make",
        "field": "make",
        "checkboxSelection": True,
        "headerCheckboxSelection": True,
    },
    {"headerName": "Model", "field": "model"},
    {"headerName": "Price", "field": "price"},
]

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
]


app.layout = html.Div(
    [
        dcc.Markdown(
            "Selections support persistence. Note `persistence=True` in this example. Try selecting rows here and then refresh the page:"
        ),
        dag.AgGrid(
            id="grid",
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={"rowSelection": "multiple"},
            persistence=True,
            columnDefs=columnDefs,
        ),

    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)
3 Likes
3

Thanks, Ann. That helps a lot.

However, it seems not working when applying persistence to edit the cell value. (as the example below)

"""
Enable column editing on all columns
"""

import dash_ag_grid as dag
from dash import Dash, html, dcc
import plotly.express as px

app = Dash(__name__)

df = px.data.medals_wide()

app.layout = html.Div(
    [
        dcc.Markdown("This grid has editing enabled on all columns"),
        dag.AgGrid(
            id = 'my-ag',
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
            persistence=True,
            persisted_props=["rowData"],
        ),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run_server(debug=False)
4

Hi @Paichui - Yes, I can confirm that the rowData is not getting persisted. Looks like we should open an issue in GitHub to track this.

5

Thanks for the confirmation, Ann.

I have logged an issue and created a workaround using dcc.Store(). The example is at: [Bug] persistence does not work when editing cell · Issue #180 · plotly/dash-ag-grid · GitHub

6

Hey:

I just tried with the latest Ag grid but still see the “rowData” cannot be persistent.
was reading here:

Does this workaround reasonable? Sorry I didn’t understand the last comment “For now, this work around for persistence will need to mainstream.”

Thanks

1 Like
7

Correct, rowData cannot persist due to how the underlying AG grid component functions.

8

Thanks. We should be using the workaround method now right? Thank you!!

9

Yes. That is correct.

1 Like
10

Thank you so much!

I feel the persistency for table seems a very important feature, as Excel also have that feature. Thank you.

11

There isn’t much we can do about it, AG grid manipulates the rowData in place. This means that Dash never receives that it was adjusted, because the base object has been modified.

If you have ever tried to alter a figure in a callback, you would also encounter this issue.

1 Like
12

Thank you for confirming this. Appreciate your reply for all my questions today!