Rendered rows(<divs> in DOM) in Angular UI Grid equal to the number of items(gridOptions.data.length)?

Question

I'm using Angular UI Grid and my situation is next. I have 100 items, items = [{}, {}, ..., {}] and I wanna display all these items in the grid but I wanna 100 for each item in DOM at same time too. Is this possible?

As I've understood ui.grid just adds to DOM the necessary number of divs based in viewport height and the height of each row. I mean ui.grid just maintain in DOM a few necessary divs to fill the grid area.

What I need is one div for each item and no changes in DOM while I'm doing scroll.

Thanks in advance!

Answer 1

I found "excessRows' grid option to do this, setting an equal or bigger number of items that I wanna display. It works for me!!!

$scope.gridOptions.excessRows = 100;

@Documentation: Extra rows to to render outside of the viewport, which helps with smoothness of scrolling.

Thanks!