Setting focused cell when creating a Dash AG Grid table

Dash Python
1

Hi everyone,

I’d like to set the focused cell when creating a Dash AG Grid table. I noticed that there is a setFocusedCell from the AG Grid docs (link), but I’m not sure how to use this.

I’ve tried setting

"dashGridOptions": {
  "setFocusedCell": {"rowIndex": 1, "colKey": "my_col_name"}
}

which didn’t work and I’m not sure if this is the correct usage of “dashGridOptions”. Any help appreciated :slight_smile:

2

Hello @spicycactus,

If you are using dag v 31.2, you have access to add eventListeners directly to the props, this is where you’d want to use it, something like this:

...otherprops
"eventListeners": {'firstDataRendered': ['params.api.setFocusedCell({rowIndex: 1, colKey: "my_col_name"})']}
...otherprops

This might need some tweaking, but will get you most of the way there. :slight_smile:

eventListeners are added to the grid upon the gridReady event. :smiley:

2 Likes
3

Hi @jinnyzor, thanks for all your help so far :slight_smile:

I think I’m missing something, because I can’t get it to work. I tried

"eventListeners": {'firstDataRendered': ['params.api.setFocusedCell({rowIndex: 1, colKey: "my_col_name"})']}

and

"eventListeners": {'firstDataRendered': ['params.api.setFocusedCell(1, "my_col_name")']}

and I also found the v31.2 announcement post with an example, so I tried something similar to the example:

AgGrid(
  ...
  eventListeners={"firstDataRendered": ['testFunc(params, cell_clicked)']},
)

"""
This js code in assets/dashAgGridFunctions.js

---------

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.testFunc = (e, cellClicked) => {
  console.log("HERE IN TEST FUNC");
  console.log(cellClicked);

  e.api.setFocusedCell(cellClicked["rowIndex"], cellClicked["colId"]);
  let focusedCell = e.api.getFocusedCell();

  console.log("focused cell:");
  console.log(focusedCell);
}

"""

which yields no print statements

I’ve verified that I’m on v31.0 as well

4

This was released in v31.2. :slight_smile:

5

Sorry that was a typo, I’ve verified that I’m on 31.2.0 now :slight_smile:

6

Give this a shot:

from dash import Dash, dcc, Input, Output, State, callback, clientside_callback
import dash_ag_grid as dag
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv('https://git.io/Juf1t')

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dcc.Store(id="focused_cell_store", data={}),
    dbc.Label('Click on cell or use keyboard to navigate'),
    dag.AgGrid(
            # rowData=df.to_dict('records'),
               columnDefs=[{"field": i} for i in df.columns],
               id='focused_cell_grid',
                dashGridOptions={'rowSelection': 'single'},
               eventListeners={'firstDataRendered': ['params.api.setFocusedCell(1, "State")']},
    className='ag-theme-alpine ag-theme-custom'),
])

@app.callback(
    Output('focused_cell_grid', 'rowData'),
    Input('focused_cell_grid', 'id')
)
def setRowData(n):
    import time
    time.sleep(1)
    return df.to_dict('records')



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

I had to split the rowData out into a callback that will load upon being added to the dom, then when the grid is ready, it will add the listener for firstDataRendered and the rowData will populate setting the focused cell.

I have tested this with this basic data. :slight_smile:

1 Like