Grid setHeightByRows vs lazy loading

So I have expanded a grid inside my view and I am using lazy loading from backend.

The expanding with grid.setHeightByRows(true) works as expected but lazy loading unfortunately results in the client asking the server for 100% of the data.

If I set a fixed height for the grid the lazy loading works as expected meaning when I scroll the client asks the server for more and more data.

Question for Vaadin

Should this maybe be considered to be a bug or am I not grasping how this is supposed to work?

Question for anybody

With help from @Hawk on Discord he showed me another way to expand the grid fully and at the same time have lazy loading working as expected. However this works fine in isolation without much more than a outer layout with setSizeFull() and just the one grid component inside it also with setSizeFull(). When I try this in combination with horizontal Tabs I get this ugly outer scrollbar in addition to the grids own scrollbar. Seems that tabs height comes on top of a 100% expanded grid resulting in a overflow.

I do want the tabs in place but I also want both fully expanded grid and working lazy loading.

Any tips how to achieve this?

*) I am sorry I do not have any graphics or examples to show for. The code is on a LAN without WAN (closed of from Internet). I can do some printouts combined with scans if visualization or code samples is needed.


From the documentation setHeightByRows(true):
If true, the grid’s height is defined by its rows. All items are fetched from the DataProvider, and the Grid shows no vertical scroll bar.

Note: setHeightByRows disables the grid’s virtual scrolling so that all the rows are rendered in the DOM at once. If the grid has a large number of items, using the feature is discouraged to avoid performance issues.

So it’s not a bug.

Can you describe/sumamrize the behavior you want? I read the discord conversation but I’m not sure if I understand.

I’d also like to point out that setHeightByRows(true) with a fixed height is a kind of a contradiction: either you want the Grid to be as high as its rows require, or you want the Grid to be a specific height (either absolute in e.g. pixels or relative to its parent).

One way to display the grid full size is to use a verticallayout and addAndExpand(grid).

You can check the result here:

And the code here:

Thanks for any clarification. setHeightByRows(true) came as a blessing earlier when I wanted to expand the grid, but did not make sense together with lazy loading. I assumed the grid hight would expand the view and not go virtual also.

Olli I have not done both setHeightByRows(true) and fixed height at the same time. Only one or the other.

With psudo html I have this

<vaadin-vertical-layout> <!-- The view -->
  <vaadin-tabs />
    <vaadin-vertical-layout> <!-- visible tab page -->
	  <vaadin-grid-pro />
	<vaadin-vertical-layout hidden="true" /> <!-- hidden tab page -->

Resulting in a “fixed” 400px high grid below the tab row.

Still cannot seem to find a way to expand the grid properly unless I drop the tabs.

Are you using javascript view or Java code to build your view?

By default the grid height is 400px. If you don’t change it (like set a different size or expand explicitly the layout) it’s normal.

Thanks Jean-Christophe. It works now. I am using Java.

I have setSizeFull() on outer layout and I now use addAndExpand on the tab pages layout

This is the result (psudo html).

<vaadin-vertical-layout style="height: 100%;width: 100%;"> <!-- The view -->
  <vaadin-tabs />
  <vaadin-vertical-layout >
    <vaadin-vertical-layout style="flex-grow: 1"> 
	  <vaadin-grid-pro />
	<vaadin-vertical-layout hidden="true" />