Grid + Lazy Loading full height and setHeightByRows(true) loads all rows

Flow
1

I’m using Vaadin Flow 14.1 Grid to display data that has thousands of rows. I have it working with a lazy loading DataProvider except I can’t get the Grid height to work. I want the Grid to be the full height of the screen (at least in terms of the layout which holds it). If I grid.setHeightByRows(true) then the grid fills the screen but it loads all rows from DataProvider which takes forever when there are thousands of rows of course.

Below is what I’ve tried. Each of the “CONFIG X” sections I tried with all the other CONFIG X items disabled.

Grid grid = new Grid();

/*
 * CONFIG 1
 * Causes double scrollbars
 */
grid.setHeight("2000px");

/*
 * CONFIG 2
 * Grid is not displayed AT all.  No header row, no data rows.
 */
grid.setHeight("auto");

/*
 * CONFIG 3
 * This shows 9 data rows but overall size is not full height of page (containing layout)
 */
grid.setHeightByRows(false);
grid.setHeight("auto !important");

/*
 * CONFIG 4
 * This causes a hang forever.  Probably because grid is expecting to load all
 * rows but only #PageSize rows are returned.
 */
grid.setHeightByRows(true);
grid.setPageSize(100);

/*
 * CONFIG 5
 * Grid is not displayed AT all.  No header row, no data rows.
 */
grid.setHeight("100%");

/*
 * Configure provider
 */
grid.setDataProvider( new MyRepositoryService() );

The CONFIG 3 is the best I can do. The attached screenshot shows that example. As you can see below the grid is empty space. I’m try to get grid to fill the full height of the containing layout.

I’m using Chrome mostly for test/dev at this point.

18267801.jpg

2

Note, you need to set height / size of the layout containing the Grid as well. If you have VerticalLayout of no size of course Grid of height 100% in it wont have size either.

3

In my understanding
grid.setHeightByRows(true)
must load all items because it must determine how much height the table needs. Also it renders them immediately. So that feature won’t work for you. It is used if you have a limited item count which should not scroll inside the grid (but eg. with the page).

You’d better look at the parent layout. If the parent layout is a VerticalLayout then you can flex grow the grid to use all of the possible space. But that is not a grid problem but a layouting one.

4

Thank you Tatu and Chris! The problem was indeed my parent layout (VerticalLayout). It was not properly sized which caused all the various problems I mentioned with Grid.

I also have changed my code to avoid grid.setHeightByRows(true) whenever I use a lazy loading data provider.