Question

33

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

rated 0 times [ 35] [ 2] / answers: 1 / hits: 20719 / 6 Years ago, mon, july 16, 2018, 12:00:00

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 .

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

louiemarvinm

Add To Favorites

Follow

Total Points: 473

Total Questions: 103

Total Answers: 94

Location: Samoa

Member since Mon, Nov 8, 2021

3 Years ago

answered 6 Years ago kinsley · Accepted Answer

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

      }

    ....

  };