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 
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. 
eventListeners
are added to the grid upon the gridReady
event. 
2 Likes
Hi @jinnyzor, thanks for all your help so far 
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
This was released in v31.2. 
Sorry that was a typo, I’ve verified that I’m on 31.2.0 now 
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. 
1 Like