Grid recalculateColumnWidths in Vaadin 24+

Why does this behavior occur? The grid recalculates the width only for the first displayed data; when I scroll down, it does not calculate the widths for the remaining records. I have attached an image for reference.

Vaadin Flow Version : 24.6.0

Continuously changing the widths would be bad for performance and also give a very flakey appearance to the user.

I want to understand why the grid does not recalculate the column width for all rows when I call the recalculateColumnWidth function. It should adjust the widths uniformly for all rows.

I though you wanted the column widths to be recalculated automatically as the user scrolls.

When do you run recalculateColumnWidths()?

If you want to get column widths recalculated after scrolling pauses, there is an example of that in my gist collection

It is columns x rows complexity function, which means that if all data is taken into account it will be very costly. Also Grid is lazy loading, so it does not have all the data in the Browser unless you have used setAllRowsVisible(true).

grid.setItems(lstGenealogyDataBean);
grid.recalculateColumnWidths();

after set items @Leif

I have implemented the code above, but I am unable to reach the last row in the grid. @Tatu2

Yes, there seems to be a glitch that recalculate column widths call causes Grid to jump few pixels, it is seen also in the live demo of the code you tried

https://v-herd.eu/tatulund-addons/column-autowidth

The problem is not in that code but something in column widths re-calculation I think.

Then it’s run only when the view is initially rendered which is redundant since it’s anyways automatically recaluclating then. If you want to it to be run at some specific point in time after the initial render, then you need to put it in a listener so that it’s run when that listener is run.

image

you can see in the image that there is one last row, but I cannot scroll to it; the grid jumps back up when I try to scroll to the last row. @Tatu2 @Leif

I added bottom detection into the JavaScript in my demo https://v-herd.eu/tatulund-addons/column-autowidth

I think the Grid jumping at bottom when when recalculateColumnWidths is called, is somewhat related to this issue: [grid] Calling `recalculateColumnWidths` method automatically scrolls the grid horizontally to the starting position · Issue #1273 · vaadin/web-components · GitHub

1 Like