CODEWITHSUNDEEP
angularjsangular-ui-gridui-grid
Nimchip
Nimchip

Reputation: 1735

What could I do to obtain the rows that are displayed on screen using UI-Grid

I'm using UI-Grid with Infinite Scrolling and I would like to obtain only the rows that are displayed on the screen of a user in order to send them to a modal window for editing (as requested by the user, they want to do this outside of the current view).

How could I achieve this? Let's say in a 1920x1080 screen, the screen is able to show 25 rows, I would like to get those 25 displayed rows. Obviously this number varies according to screen size and/or resolution, so I would like to capture depending on these two and if not, then at least assign a standard 25.

Is this possible somehow?

Edit: I looked into rowTemplates and implemeting angular-in-viewport like so:

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'm lost as to where I could flag a something as visible using this method. Furthermore, this puts angular-in-viewport tags on every cell in the row, and upon inspection in some questions in the UI-Grid support group I found that I cannot modify the viewport template (where I could add viewport properties to the rows instead of the cells) to include these tags.

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

Upvotes: 4

Views: 358

Answers (1)

huan feng
huan feng

Reputation: 8623

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

Way 1:

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

Way 2:

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

        gridApi = api;

    }
}

//In you code you can get renderedRows via:

gridApi.grid.renderContainers.body.renderedRows

Upvotes: 1

Related Questions