Ag-grid reset grouped rows to initial state (collapsed)

Hi all, I have an ag-grid with multiple columns, the first three being “drilldown” columns that have “rowGroup” set to True allowing the user to “expand”/“collapse” the rows in the table, as needed, for more granular detail.

Now, I’m trying to provide users a reset button to reset table to initial state. The problem is I can get this to work for a few things (sorted and rearranged column order back to default) using the “resetColumnState” property as shown below; however, I’m unable to collapse the “drilldown” columns back to original state (if they were expanded, they remain expanded after hitting reset button) and clear floating filters (not shown in pic). Any ideas on how I can fix this? Maybe this is an issue with enterprise features only?

@callback(
    Output("grid", "resetColumnState"),
    Input("grid-reset-button", "n_clicks"),
)
def reset_column_state(_):
    return True

Side note, I also tried setting “initialRowGroup” to False along with “rowGroup” set to True in the column definitions (hoping this would “reset” row grouping when I hit reset button) but that didn’t work. My guess is, if I’m to stick with Dash (and not have to write JS scripts), I may have to save column state (in my main callback that returns the data and columnDefs) and then reload it with the reset button however I’m afraid it’ll behave the same (reset everything but not collapse back the grouped rows).

HI @Neil_H
Have you tried adding the Row Group Panel? It’s pretty slick!

Appreciate the suggestion @AnnMarieW, it gave me the idea of using the expandAll() / collapseAll() grid API’s which are perfect for my use case.

However, I am new to using custom JS for Dash and having some issues. I keep getting an “dash_ag_grid.getApiAsync is not a function” error with the following code (gleaned from other posts). Any help appreciated.

Dash 2.14.2 | Ag Grid 2.1.0

Callback tied to Expand/Collapse button:

clienside_function = clientside_callback(
    ClientsideFunction('customFunctionNamespace', 'customFunctionExpandCollapse'),
    Output('grid', 'rowData'),
    Input('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)  
    return f"{'Collapse' if expand_ON else 'Expand'} All"

JS file in Assets folder:

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
    },
}

Hi @Neil_H

What version of dash-ag-grid are you running? The getApiAsync was added fairly recently.

You can also find lots of examples of using the grid’s API in this post: Dash AG-Grid: Export Data As Excel

Sorry was editing my post to add this info right as you were replying: Dash 2.14.2 | Ag Grid 2.1.0

Updating dash ag grid version fixed the issue :sweat_smile: