How can i programmatically select or set focus to specific row in AG Grid?

Question

I am using AG Grid to display data retrieved from my back end. When a user clicks on the view / edit icon in the grid i route the call to the Detail Page so user can edit the Record.

Once he is completed i want him to be able to go back in the grid and return to same position as before. I would like either put the cursor or selection and the row user just clicked and is returning from.

Question is what is the best way to achieve this ? I assume is to use the row(node) id

I am currently already using the grid filters etc so only the previous shown data will be shown on return. But there could also be the issue of the item being outside the current scroll range. Lets say its the 125 row but my default i only load 100 at a time so the record would not be even in the grid loaded yet.

Never destroy the "grid page", just hide/show it. Show the "detail page" over it, etc. Similar to how a modal works. This way, the grid will always be as the user left it. — thirtydot
My data mode is server based and as the user can change the data of the selected item, i need to refresh to ensure the user has the most current data in grid. — NoSoup4you

un.spike un.spike · Accepted Answer · 2020-04-07T22:36:26

First, take a look at possible API methods for Infinite row model

You need to ensure that your row is not existed yet (to decide to what to do, just scroll or preload + scroll), you can check that via getInfiniteRowCount

like:

if (this.gridApi.getInfiniteRowCount() < IndexOfYourRowHere)

and then if it doesn't exist (yet), preload data via setInfiniteRowCount method:

this.gridApi.setInfiniteRowCount(IndexOfYourRowHere, false);

and then scroll it via ensureIndexVisible (same scenario when the row already exists)

this.gridApi.ensureIndexVisible(IndexOfYourRowHere);

and here would be your logic:

if (this.gridApi.getInfiniteRowCount() < IndexOfYourRowHere) {
  this.gridApi.setInfiniteRowCount(IndexOfYourRowHere, false);
}
this.gridApi.ensureIndexVisible(IndexOfYourRowHere);

Demo

Its official demo from this page

P.S. yes, here only Indexes are possible, cuz this is how grid understand what do to, so you need to carefully sort the results (or just prepare) to achieve your goal.

UPDATE

 let node = this.gridApi.getDisplayedRowAtIndex(YourIndex);
 node.setSelected(true)

How can i programmatically select or set focus to specific row in AG Grid?

1 Answers