Attribute "aggFunc" of ColumnState not update when ColumnState change

Dash Python
, ,
1

Hi every one,
I encountered an issue; I believe it is a bug in dash.
Please help me resolve this issue. Thank you.
a) This is example to debug this error. To replicate error We will proceed as follows.

  1. Drag one column, then drop it to group.
  2. For the “Age” column, we will set the Value Aggregation to “avg” .
  3. Below, in the “Age” column, the “aggFunc” attribute has the value “avg”.
  4. Next, we will set up the Value Aggregation as “count” again. However, we will see below that the “aggFunc” is not updated; it still shows “avg”. That is a fault.
import json
import dash_ag_grid as dag
from dash import Dash, html, Input, Output, callback, State
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

# columnDefs = [{"field": i} for i in ["country", "year", "athlete", "age", "sport", "total"]]
columnDefs = [
    {'field': 'country'}, 
    {'field': 'year'}, 
    {'field': 'athlete'}, 
    {'field': 'age'}, 
    {'field': 'sport'}, 
    {'field': 'total'}
]

app.layout = html.Div(
    [    html.Button('Click',id="btn_click"),
        dag.AgGrid(
            id="column-state-retrival",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            columnSize="sizeToFit",
            dashGridOptions={"rowSelection": "multiple", "enableCharts": True, "animateRows": False, "sideBar": True, "enableRangeSelection": True, "rowDragManaged": True, "rowGroupPanelShow": 'always',},
                    defaultColDef={"editable": True, "enableRowGroup": True,"enableValue": True},
            enableEnterpriseModules=True,
        ),
        html.Pre(id="pre-col-state",
                 style={'border': 'thin lightgrey solid', 'display': 'inline-block'}),
        html.Div(id="column"),
       
    ]
)

@callback(
    Output("pre-col-state", "children"),
    Input("column-state-retrival", "columnState"),
    prevent_initial_call=True,
)
def display_state(col_state):
    return json.dumps(col_state, indent=2)

app.clientside_callback(
        """
            function (state ,n_clicks) {
                const gridApi =  dash_ag_grid.getApi("column-state-retrival")
                let colState = gridApi.getColumnState();
                console.log('columnState from API AGRID', colState);
            
                console.log('columnState from INPUT', state)
      
            }
        """,
        Output("column", "children"),
        Input("column-state-retrival", "columnState"),
        Input("btn_click", "n_clicks"),
        prevent_initial_call=True
    )

if __name__ == "__main__":
    app.run(debug=True)