How to focus to AG-Grid row component to use the keyboard navigation

Question

Keyboard Navigation for Ag-Grid not functioning if i focus on element other than Ag-Grid Row.

In order to solve the issue, i need to re-focus back to the Ag-Grid row element after i perform button click.

I have try the following approach to focus ag-grid row but still not working

this.elElement.nativeElement.querySelectorAll('.ag-row').attr('tabindex', -1).focus();

I should able to focus back to AG-Grid after i perform a button click in order to use the keyboard navigation in Ag-Grid

Answer 1

You can focus a cell using setFocusedCell() api of ag-grid.

// scrolls to the first row
gridOptions.api.ensureIndexVisible(0);

// scrolls to the first column
var firstCol = gridOptions.columnApi.getAllDisplayedColumns()[0];
gridOptions.api.ensureColumnVisible(firstCol);

// sets focus into the first grid cell
gridOptions.api.setFocusedCell(0, firstCol);

Read more in the documentation here - https://www.ag-grid.com/javascript-grid-api/#navigation and https://www.ag-grid.com/javascript-grid-keyboard-navigation/