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

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 clicked 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 position.

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));
      }
    ....
  };