What can I do to get rows displayed on screen using UI-Grid

Question

I use a UI-Grid with infinite scrolling, and I would like to get only the lines that are displayed on the user's screen to send them to the modal window for editing (at the request of the user, they want to do this outside the current view).

How could I achieve this? Say the screen can display 25 lines on a 1920x1080 screen, I would like to get these 25 displayed lines. Obviously, this number varies depending on the screen size and / or resolution, so I would like to capture depending on these two, and if not, at least assign a standard of 25.

Is it possible somehow?

---

Edit: I looked at rowTemplates and ran angular -in-viewport like this:

rowTemplate: '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell viewport-enter="" viewport-leave=""></div>'

But I got lost as to where I could mark something visible with this method. In addition, this puts the angular -in-viewport tags in each cell in the row, and after checking on some issues in the UI-Grid support group, I found that I cannot change the viewport template (where I could add viewport properties to rows instead of cells) to include these tags.

Any ideas? And is this a step in the right direction?

Answer 1

Have you tried gridScope.renderedRows or event.targetScope.renderedRows?

Method 1:

$scope.$on('ngGridEventData', function (event) {
    console.log(event.targetScope.renderedRows);
});

Method 2:

var gridApi;
gridOptions = {
    //...
    onRegisterApi: function (api) {

        gridApi = api;

    }
}

// In your code, you can get renderedRows with:

gridApi.grid.renderContainers.body.renderedRows