Dash ag grid click away cell/row deselect

Dash Python
1

Hi everyone, I am using Dash Ag Grid to develop a Microsoft Excel like application for my users, and they really appreciate the excel feature to deselect all rows from a selected range when the user deactivates it (i.e. clicks away, clicking on something else instead etc.). Does Dash AgGrid support such a behavior?

Thank you.

2

Hello @grant_r_chan,

Welcome to the community!

By default, the grid will lose focus on the current selected cell.

For removing selections, you’d need to make a new event listener.

3

Hi jinnyzor, thank you so much for your response. I am not familiar with how I could write such an event listener. I presume this must be done in Javascript? Could you kindly point me to the documentation or any examples that does something similar? I have more than one Ag Grid on my webpage, and the idea is to deselect rows from all of them when I click away. Thanks!

4

Hi @grant_r_chan

Can you explain a little more about what you are looking for?

You can see in this example, if you have text selected, when you click somewhere else and the grid loses focus, it is de-selected:

However, are you talking about when you are selecting rows? If so, I would recommend having a button to deselect the rows because typically users do not expect selected rows to be deselected when the grid loses focus.

1 Like
5

Hi @AnnMarieW , my apologies for the late response. I’m actually referring to row selection. Please see the attached picture for a simple example of what I am trying to do:

2024-10-16_12-39-37
2024-10-16_12-39-372560Ă—1249 28.9 KB

I have several rows selected across two AG Grids as an example, but the logic could be extended to more AG Grids on the page. I would like to build a feature that allows users to deselect all rows from all AG grids with either a left mouse click when the mouse cursor is not located in any of the grids (the whitespace in the picture is an example of such a region for the mouse cursor), or with a right mouse click at any location on the page. Is this something that can be done?

Thanks so much for the help!

6

You can probably do something with an event listener Dash AG Grid Event Listeners (v 31.2)

7

Thank you so much for that. I looked at the documentation and figured that the event listener I need is probably “contextMenuVisibleChanged”, meaning that the event that triggers deselection should be when the context menu is visible i.e. a right-click has occurred. I tried to define my Ag Grid the following way using the sample provided by @jinnyzor :

AgGrid(
            id=f"{label}-grid",
            columnDefs=[{"children": [{"field": i} for i in df.columns]}],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            dashGridOptions={
                "animateRows": False,
                "columnHoverHighlight": False,
                "rowHeight": 14,
                "groupHeaderHeight": 0,
                "headerHeight": 0,
                "floatingFiltersHeight": 0,
            },
            eventListeners={'contextMenuVisibleChanged': ["params.api.deselectAll();"]},
            style={"height": "100%"},
        )

However, I am stil not getting something quite right and would greatly appreciate some guidance. Thank you.

8

What version of the grid are you using?

Also, your columnDefs look weird, can you confirm that you have defined it correctly?