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,
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?
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.
“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.
Thanks in advance!