how to force the ag-grid to scroll to the selected/highlighted row position

Question

We are using ag-grid and I need to display the scrollbar in child window as per selected row position in ag-grid. Please find the below plunkr and click on source_id which is an edit page and I need to show the scroll bar as per selected/highlighted row on window popup screen.

In my code scroll bar is working but it is not showing exact scroll bar position as per selected/highlighted row in child window. And please provide inputs for to show the scrollbar in child window as per selected/highlighted row position using ag-grid.

Plunkr url

Note: It has to scroll automatically like selected row position in 'ag-body-viewport' div class.

Follow the below steps:

1)In plunker click on preview button.
2)Click on any source_id in ag-grid.
3)Once click the source_id popup window will be displayed.
4)In popup window another grid will be displayed with highlighted row with respective of   source_id.
5)My query is like in this particular window ,how to scroll the scroll bar automatically as per highlighted/selected row postition .

Answer 1

If you take a look at the scrolling section of ag-grid api you'll get an idea how to get about it.

You could update your getRowStyle function to something like this:

  function getRowStyle(params) {
    ....
      if (params.data.source_id.trim() === $scope.source_id.trim()) {
        colorToReturn = {
          'background-color': 'orange'
        };
        $scope.gridOption.api.ensureIndexVisible(Number(params.data.source_id));
      }
    ....
  };

Answer 2

Another Approach with Angular 8 and ag-grid 20.2(enterprise)-

scrollToSelectedRow(){
this.gridApi.ensureIndexVisible(this.gridApi.getSelectedNodes()[0].rowIndex,null);}

ensureIndexVisible takes 2 parameters i.e. rowIndex(integer) and position('top','bottom',null etc). https://www.ag-grid.com/javascript-grid-api/#scrolling