How to Implemente Middle-Mouse Button Functionality in Dash AG Grid for Cell Selection

Dash Python
1

Hi,

The link above shows how to retrieve cell data via callbacks when a cell is clicked with a simple or double click.

However, my specific need is to implement a similar functionality but with the middle-mouse button click (the button between the left and right mouse buttons) instead of a simple or double click.
I’ve noticed that the AgGrid component doesn’t seem to have argument for this.

I believe this might require the use of dash_clientside.callback and JavaScript, but I am unsure how to proceed. If anyone has experience or knowledge about implementing middle-mouse click functionality in Dash AG Grid, your advice would be immensely appreciated.

Thank you in advance for your assistance!

2

Hello @wowwwn,

Yes, you will need to add an event listener for mousedown and check if the mouse button(?) is number 3.

I haven’t checked, but this should get you somewhere. Haha.

1 Like
3

Thanks for the response.

As I’m not familiar with JavaScript, SO I used ChatGPT and received the following code. However, I’m encountering an issue where clicking a cell with the middle mouse button doesn’t trigger any event. I would greatly appreciate any guidance on how to correct this.

// assets/dashAgGridFunctions.js
window.dash_clientside = Object.assign({}, window.dash_clientside, {
    dashAgGridFunctions: {
        onMiddleClick: function(gridId) {
            document.addEventListener('DOMContentLoaded', function() {
                const gridDiv = document.getElementById(gridId);
                if (gridDiv) {
                    gridDiv.addEventListener('mouseup', function(event) {
                        if (event.button === 1) { // Detect middle mouse button click
                            const cellData = event.target.getAttribute('data'); // Retrieve cell data
                            if (cellData) {
                                return cellData;
                            }
                        }
                        return null;
                    });
                }
            });
        }
    }
});

# app.py
from dash import Dash, html, dcc, Input, Output, callback

import dash_ag_grid as dag
import pandas as pd
import json

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/iris.csv")
df["index"] = df.index

app = Dash(__name__)
# Configuring AG Grid
grid = dag.AgGrid(
    id="cell-selection-grid",
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
    defaultColDef={"resizable": True, "sortable": True, "filter": True},
    columnSize="sizeToFit",
    getRowId="params.data.index",
)

app.layout = html.Div(
    [
        grid,
        html.Pre(id="output-cell-data"),
    ]
)

# Connecting clientside callback
app.clientside_callback(
    """
    function(gridId) {
        return dash_clientside.dashAgGridFunctions.onMiddleClick(gridId);
    }
    """,
    Output("output-cell-data", "children"),
    Input("cell-selection-grid", "id"),
)

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

Could someone please help me understand what needs to be modified in this code to make the middle mouse button click work as intended?

Thank you for your time and assistance.

4

Here you are, this should get you close to what you want to do:

# app.py
from dash import Dash, html, dcc, Input, Output, callback

import dash_ag_grid as dag
import pandas as pd
import json

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/iris.csv")
df["index"] = df.index

app = Dash(__name__)
# Configuring AG Grid
grid = dag.AgGrid(
    id="cell-selection-grid",
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
    defaultColDef={"resizable": True, "sortable": True, "filter": True},
    dashGridOptions={'rowSelection': 'multiple'},
    columnSize="sizeToFit",
    getRowId="params.data.index",
)

app.layout = html.Div(
    [
        grid,
        html.Pre(id="output-cell-data"),
    ]
)

# Connecting clientside callback
app.clientside_callback(
    """
    function(gridId) {
        dash_ag_grid.getApiAsync(gridId).then((grid) => {
            grid.addEventListener('cellMouseDown', (e) => {
                if (e.event.button == 1) {
                    e.api.setNodesSelected({nodes: [e.node], newValue: true})
                } 
            })
        })
        return dash_clientside.no_update
    }
    """,
    Output("cell-selection-grid", "id"),
    Input("cell-selection-grid", "id"),
)

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