streamlit AgGrid deleting row doesnt refresh data in the backend

user_5509319 0
Viewed 187

I have two AgGrid's in python streamlit application. Two AgGrid's are connected and GridUpdateMode.MANUAL . I have to select rows in first grid and click on update so that second grid will get selected rows from first grid. the rows in second grid should be process and saved. but, I have to also delete rows from second grid. deletion of rows from second grid is implemented with onRowSelected.

Problem:

The javascript code which is injected with onRowSelected works and removes the row from UI but, the python variable which has the data is not update or the rows which are removed from UI are not removed from actual variable.

Please help me in how to remove the row when selected from UI and also in backend variable.

Code:

js = JsCode(
"""
function(e) {
    let api = e.api;        
    let sel = api.getSelectedRows();

    const res = api.updateRowData({remove: sel});
    api.refreshCells({force : true});

    };
"""
)


    col1, col2 = st.columns(2)
    with st.container():
    with col1:
        smoke_gd = GridOptionsBuilder.from_dataframe(
            df_alternatives[["article", "number"]]
        )
        smoke_gd.configure_default_column(
            editable=False, resizable=True, sorteable=True
        )
        smoke_gd.configure_pagination(enabled=True)
        smoke_gd.configure_side_bar()
        smoke_gd.configure_selection(
            selection_mode="multiple", use_checkbox=True
        )
        smoke_gd_gridoptions = smoke_gd.build()
        smoke_grid_table = AgGrid(
            df_alternatieven[["article", "number"]],
            fit_columns_on_grid_load=True,
            update_mode=GridUpdateMode.MANUAL,
            gridOptions=smoke_gd_gridoptions,
            enable_enterprise_modules=True,
            allow_unsafe_jscode=True,
            theme="fresh",
            key="smoke_col1_gd",

        )
    selected_rows = smoke_grid_table["selected_rows"]

    with col2:
        smoke_col2_gd = GridOptionsBuilder.from_dataframe(
            df_alternatives[["article", "number"]]
        )
        smoke_col2_gd.configure_default_column(
            editable=False, resizable=True, sorteable=True
        )
        smoke_col2_gd.configure_pagination(enabled=True)

        smoke_col2_gd.configure_grid_options(onRowSelected=js)
        smoke_col2_gd.configure_side_bar()
        smoke_col2_gd.configure_selection(
            selection_mode="multiple", use_checkbox=True
        )
        smoke_col2_gd_gridoptions = smoke_col2_gd.build()
        smoke_grid_table_filtered = AgGrid(
            pd.DataFrame(selected_rows),
            update_mode=GridUpdateMode.MANUAL,
            gridOptions=smoke_col2_gd_gridoptions,
            allow_unsafe_jscode=True,
            reload_data=True,
            key="smoke_col2_gd",
        )
ag-grid streamlit python-3.x python
1 Answers

How about letting JS do the deletion for you at the server-side directly and the forced refresh will follow suit with the latest naturally at the client side?

Your JS code can become:

js = JsCode(
"""
function(e) {
    let api = e.api;
    let sel = api.getSelectedRows();
    const tx = {remove: rowsToRemove,};
    gridOptions.api.applyServerSideTransaction(tx);
    api.refreshCells({force : true});
};
"""
)
user_115896670
Related