Click even on the grouped row in Ag Grid

Dash Python
1

Hi Dash Community:

We have the example here to demonstrate the click event for the cells in the aggrid table:

How should we handle the grouped rows? For information from the “cellClicked” on the grouped row shows little information of what the actual group row is. I searched around but didn’t find any close answers.

image
image968×596 10.6 KB

Thank you

2

wonder if anyone can provide any suggest? thanks.

3

Hi @entropy_l

There isn’t a dash prop defined for that, but you can access it through the grid’s api and rowClicked

I might be able to help with an example - what do you want to happen when you click on a row group?

4

Thank you so much @AnnMarieW .

I am familiar with the behavior when using “rowClicked” when the row is clicked. When that happens, we see all the fields in this clicked row.

Hence, to answer your question, it is to “click the row group” — the rowClicked field wasn’t very informative, at least not able to allow me to extract information to identify which grouped row is clicked. Thank you again.

5

There is no rowClicked prop in Dash, however it is available clientside in the grid’s api. In Dash, there is rowSelected or cellClicked, and I don’t think those have the data you are looking for.

1 Like
6

Thank you.
Do you mind giving an example, for instance, if we click the “grouped row”, we can print out the row content in the callback? if you can point me to some examples, it would be great as well. Thank you so much.

7

Also my apologies that I used the terms wrong as not reading the code while replying. Indeed, when I said “rowClicked”, it (mistakenly) means the “cellClicked” in the example below.

The issue here is that, if we use the “cellClicked” callback input in “grouped row”, it indeed doesn’t have too much info. Ideally, I wish to be able to “click” the grouped row and prints out the row content. Thank you!

8

Hi @entropy_l

Sorry, I’m also having trouble understanding exactly what you are looking for. So when you click on a group row, are you trying to get all the children rows of the group? What if there are multiple group columns? Have you found any examples either in the AG Grid docs or anywhere else that demos what you are trying to do?

1 Like
9

Hi @AnnMarieW:

Thanks for your reply.

  • So when you click on a group row, are you trying to get all the children rows of the group?:
    No. I am trying to get the grouped information on the clicked grouped row. For instance, if I click the group row ( in light blue ), I am trying to get from the callback input information related to: count = 6, color is red, the name of the first entry is “Grouped”. ( Same behavior as when we click the individual row ).

image

  • Have you found any examples either in the AG Grid docs or anywhere else that demos what you are trying to do?
    I have tried the callback multiple times and searched through the ag grid documentation https://www.ag-grid.com/javascript-data-grid/grouping/and dash ag gird. Wasn’t table to find an example on firing callback when clicking the grouped row.
10

Alrighty, I think I finally get what you are looking for. :sweat_smile:

This example uses the aggFunc to calculate the summaries.

The callback is just something to get you started. It uses the cellClicked prop to trigger the callback. It used the row id (included with the cellClicked data) to get the row node.


from dash import Dash, html, clientside_callback, Input, Output
import dash_ag_grid as dag
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": "country",
        "rowGroup": True,
        "hide": True,
        "suppressColumnsToolPanel": True,
    },
    {
        "field": "sport",
        "rowGroup": True,
        "hide": True,
        "suppressColumnsToolPanel": True,
    },
    {
        "field": "year",
        "pivot": True,
        "hide": True,
        "suppressColumnsToolPanel": True,
    },
    {"field": "gold", "sortable": True, "filter": True, "aggFunc": "sum"},
    {"field": "silver", "sortable": True, "filter": True, "aggFunc": "sum"},
    {"field": "bronze", "sortable": True, "filter": True, "aggFunc": "sum"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            enableEnterpriseModules=True,
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef={"resizable":True},
            dashGridOptions={
                "suppressAggFuncInHeader": True,
            }
        ),
        html.Div(id="output-container")
    ]
)


clientside_callback(
    """function (cellClicked) {
        if (cellClicked) {           
                    
            const api = dash_ag_grid.getApi("grid");
            const node =  api.getRowNode(cellClicked.rowId);
            
            console.log("row", node)
            return node.groupData["ag-Grid-AutoColumn"] + JSON.stringify(node.aggData)
        }
        return dash_clientside.no_update
    }""",
    Output("output-container", "children"),
    Input("grid", "cellClicked"),
    prevent_initial_call=True
)


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

Thank you so much @AnnMarieW.
I will be more clear and provide better example next time. Appreciate your help. I am not very familiar with clientside_callback but will try best to learn from this example. Thank you.

1 Like