Ag-Grid editing behavior when using 'key' and 'reload_data'

Hi everyone,

I am trying the ag-grid component with a key (st.session_state.aggrid_key) and reload_data=True, to get the data to reload without redrawing (I want to avoid it disappearing for a fraction of a second). See my code below.

The button I am using works normally but after making an edit in ag-grid it stops working. Do you know why? Thanks in advance!

import pandas as pd
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder

st.title('Football goals for each player')

if 'aggrid_key' not in st.session_state:
    st.session_state.aggrid_key = True
    st.session_state.df = pd.DataFrame({'players':['A', 'B', 'C', 'D'], 'goals':[20, 23, 19, 41]})

st.markdown('When you load the app the button works normally')

if st.button('Add one goal to each player'):
    st.session_state.df['goals'] = st.session_state.df['goals'] + 1

gb = GridOptionsBuilder.from_dataframe(st.session_state.df)       
     
gb.configure_column(field='players',editable=False)

gb.configure_column(field='goals',editable=True)

gb.configure_grid_options(stopEditingWhenCellsLoseFocus=True,headerHeight=30,rowHeight=30)

go = gb.build()

st.markdown('But if later you edit the ag-grid, the button stops working')

ag = AgGrid(
    dataframe=st.session_state.df,
    key=st.session_state.aggrid_key,
    reload_data=True,
    height=180,
    gridOptions=go,
    enable_enterprise_modules=True)

if (st.session_state.df['goals'] != ag['data'].iloc[:,1]).any():
    st.session_state.df['goals'] = ag['data'].iloc[:,1].values
    st.experimental_rerun()

Hi there @thunderbug1,

Tagging you to ask if you know how to get around this one :slight_smile: Thanks in advance!

Hi there,
well sadly i don’t really have a solution here either.

to get the data to reload without redrawing (I want to avoid it disappearing for a fraction of a second)

I think the Agrid library itself does make this possible to change data with some javascript, but I am not sure if the react component does make it possible to do this from the python side of things.

The button I am using works normally but after making an edit in ag-grid it stops working. Do you know why?

I haven’t used the edit functionality myself yet, what exactly stops working?

1 Like

Thanks. With regards to what stops working:

  • The button modifies the input dataframe.

  • The final three lines of code ensure that, if user edits Ag-Grid, the input dataframe is modified too.

  • If user edits Ag-Grid, the button above stops working.

Maybe the issue is with my code’s structure or the last three lines of code?

Anyways, here is the same example but maybe easier to understand:

import pandas as pd
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder,GridUpdateMode,DataReturnMode

st.set_page_config(layout="wide")
st.title('Football goals for each player')
st.write('')

def add_goals():
    st.session_state.df['goals'] = st.session_state.df['goals'] + 1
    st.session_state.counter += 1

if 'aggrid_key' not in st.session_state:
    st.session_state.aggrid_key = 0
    st.session_state.counter = 0
    st.session_state.df = pd.DataFrame({'players':['A', 'B', 'C', 'D'], 'goals':[20, 23, 19, 41]})

col1,col2,col3,col4 = st.columns(4)
reload_data = False

with col1:
    st.markdown('When you load the app the button works normally:')
    bootoon = st.button('Add one goal to each player')
    if bootoon:
        add_goals()
        reload_data = True
    st.markdown('Count of times button was clicked:')
    st.write(st.session_state.counter)

with col2:
    st.markdown('Input dataframe before ag-grid:')
    st.dataframe(st.session_state.df)

with col3:
    st.markdown('But if later you edit the ag-grid, the button stops working')
    gb = GridOptionsBuilder.from_dataframe(st.session_state.df)
    gb.configure_column(field='players',editable=False)
    gb.configure_column(field='goals',editable=True)
    gb.configure_grid_options(stopEditingWhenCellsLoseFocus=True,headerHeight=30,rowHeight=30)
    go = gb.build()
    ag = AgGrid(
        dataframe=st.session_state.df,
        key=st.session_state.aggrid_key,
        reload_data=reload_data,
        height=180,
        gridOptions=go,
        enable_enterprise_modules=True)

with col4:
    st.markdown('Input dataframe after ag-grid:')
    st.dataframe(st.session_state.df)

if (st.session_state.df['goals'] != ag['data'].iloc[:,1]).any():
    st.session_state.df['goals'] = ag['data'].iloc[:,1].values
    st.experimental_rerun()

The only workarounds I found are either (a) changing the value of the key, or (b) not using a key at all, but both options make the Ag-Grid redraw and disappear for a fraction of a second, which is what I want to avoid that.

I am facing the same issue any solution yet?
When I set a key for aggrid function, grid does not update if i change the df externally ( other than using grid).
When I do not set key grid disappears for a short time after edit.

Unfortunately I am still looking for a solution to this too. :face_with_diagonal_mouth:

“When I do not set key grid disappears for a short time after edit.”
I am facing the same problem.
@PablocFonseca, is there any possible way to solve it?
Thank you very much!!

I’m working on a more intuitive way for this behaviour. In the past I used reload_data parameter to reload grid’s data without redrawing it. But I agree it is confusing.

1 Like

Thank you very much Pablo for this answer and for the great library you´ve made!

I’ve updated the fixed key example to better explain how the key and reload_data parameters work:
https://share.streamlit.io/pablocfonseca/streamlit-aggrid/main/examples/example.py?example=Controling%20AgGrid%20redraw

let me know if its not clear enough.

2 Likes

This is a fantastic sample app! Thank you