CODEWITHSUNDEEP
navigationkeyboardfocusag-grid
Wong Hung Lui
Wong Hung Lui

Reputation: 31

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

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

Upvotes: 3

Views: 7497

Answers (1)

abd995
abd995

Reputation: 1839

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/

Upvotes: 4

Related Questions