Dash-ag-grid Expand / Collapse Groups via API

Dash Python
1

The javascript docs contain methods for expanding and collapsing grouped rows:

My question is how can I utilize this functionality with the dash wrapper?
I already have a javascript file with “dagfuncs” in it used in the column defs, example:
“valueFormatter”: {“function”: “MoneyFilna(params.value)”}

But how can I use these functions outside of the valueFormatter?
Thank you.

2

Hello @daflamingpotato,

You can use the grid’s api to access all the APIs that the grid has available. You need to do this clientside.

There are quite a few examples on the forums for doing this. :grin:

3

Thank you. It still took me a while but I was able to figure it out eventually from this example:

For anyone looking for a solution:

clienside_function = clientside_callback(
    ClientsideFunction('customFunctionNamespace', 'customFunctionExpandCollapse'),
    Output('grouped-grid', 'rowData'),
    Input('grouped-grid', 'id'),
    Input('btn-expand', "n_clicks"),
    prevent_initial_call=True,
)
@callback(
    Output("btn-expand", "children"),
    Input('btn-expand', "n_clicks"),
    prevent_initial_call=True,
)
def update_expand(n):
    expand_ON = (n % 2 == 0)  # even
    return f"{'Collapse' if expand_ON else 'Expand'} All"

Javascript:

var dagclient = window.dash_clientside = window.dash_clientside || {};

dagclient.customFunctionNamespace = {
    customFunctionExpandCollapse: async function (gridId, n) {
        const gridAPI = await dash_ag_grid.getApiAsync(gridId)
        if (n % 2 == 0)
            gridAPI.expandAll();
        else
            gridAPI.collapseAll();
        return window.dash_clientside.no_update
    },
}

Thanks

2 Likes
4

As a note, you only need the async api if you expect the grid to be spinning up when you are triggering the callback.