I am using Vaadin Flow 14.6.2, the material theme, and custom CSS styling in my application. When loading a grid that has a cell that has content that wraps 5 times, when the grid initially loads the grid rows overlap, truncating the information in the cell that contains wrapped data. Looking at the CSS this is due to CSS "transform: translateY(#px)" setting that is too small onto the Grid's TR (row) tags. As a point of reference, the grid places a translateY of 76 pixels on the second row.
Screen shot of grid with overlapping rows
Selecting a row in the table or resizing the browser will cause the grid to refresh and the translationY value will be recalculated, increasing the translateY value to 118 pixels, and the grid will display all rows with the appropriate spacing.
Screen shot of grid after selecting a row
Is this a defect in the grid where the row offsets are not initially calculated to the correct height?
I am not sure how to debug this further or if there are any workarounds to trigger the grid to recalculate row sizes so that it may display correctly from the start. I tried programmatically selecting the first row and the result was that the first row displayed correctly but subsequent rows were truncated.
I'd try adding a Div element inside the cell using a ComponentRenderer, and put the white-space: normal and word-break: break-word on that element. Since the grid supports adding components of any size, and should adjust row height according to the heighest component, this may trigger initial calculation.
I was able to work around this issue by changing how this page is navigated to. A change was made to a parent view to trigger navigation using an anchor instead of a button. With an anchor a new UI is created and then the grid is added to it, but with the button the existing UI is reused. There is something in the display of the grid on a new UI or something related to the difference in navigation that triggers this problem. Reverting back to using a button is a superior solution as it solves this problem and does not trigger creation of a new UI.
Related
Vaadin Version: 23.3.3
I have a fairly complex Vaadin table, ~100 rows, each of which contains ~12 columns, each column containing a layout with ~10 elements. The table is not lazy in any way, and is configured to show all rows at once.
It takes the browser 5+ seconds just to render the table after the request is complete (a topic for a different question) but even once the table is rendered I experience some weirdness when scrolling.
When holding the mouse outside the table, or using the scroll bar, the page always scrolls as expected. But when I hold the mouse inside the table I get inconsistent results. If I have first scrolled the page all the way to the bottom then there appears to be no issue regardless of mouse position. But If I have yet to scroll to the bottom, then the table scrolls in place, pushing rows underneath the header (see screenshot). It's as if the browser/vaadin is not yet completely aware of the size of the table?
Is there something I need to be doing to force vaadin to render the entire page?
Edit: Upon some further testing I noticed even stranger inconsistencies. My table cells have two possible layouts depending on user actions. One is simple, containing: div > span > span. The other is more complex, containing a div > span > span + vaadin-icon + tooltip. The issue only appears when the table is rendered with the "simple" layout. Something about the added vaadin-icon and tooltip seems to make vaadin draw the table without scroll issues.
After I setup the a Grid with all the columns with setAutoWidth(true) and I execute grid.recalculateColumnWidths() this will auto-adapt the columns width with the content of the columns but only for the rows that are visible in the grid.
What happen is that scrolling rows in the grid I can find some cells with content larger than the content on the first visible rows and they were not auto-adapted and so the content is truncated (es FOO...)
Considering that I am using ListDataProvider, so all the rows are loaded into memory when I build the grid, why it is not calculating the right width for every column considering all the rows?
Is this a normal behaviour? It is possible to change it to consider all the rows when it is calculating the columns width?
I am using Vaadin version 14.
Thanks for the help
Yes,
this is the normal behaviour of the vaadin grid and is (at least for the 23.x) documented that way
https://vaadin.com/api/platform/23.2.6/com/vaadin/flow/component/grid/Grid.Column.html#setAutoWidth(boolean)
The relevant part, why it's not looking at all items in the grid is here:
For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore.
You can however "retrigger" a width calculation
You can manually trigger the auto sizing behavior again by calling Grid.recalculateColumnWidths().
I am using the VirtualTreeView together with the OnMeasureItem event to display rows of variable size. The problem is that the event seems to be called only if a row is painted (following the virtual paradigm). But this leads to the scrollbar being displayed incorrectly. If I scroll to the bottom (by dragging the scrollbox with the mouse, not clicking the scroll buttons at the top or bottom), not the last row is displayed (which is what I would expect), but some row in the middle. After that, the scrollbar is updated and I can scroll further down. It seems as if the component uses the DefaultNodeHeight for its scrolling calculations. But since my rows have variable height, I cannot specify a DefaultNodeHeight that would lead to correct results. Option toVariableNodeHeight is enabled.
Has anyone experienced this before and maybe found a workaround? Or am I doing it wrong?
You need to set DefaultNodeHeight to the maximum value you will be using and OnMeasureItem event set custom height value for the current node. Similar issue was described here.
I have a DBGrid on a form. The DBGrid has many columns, so an horizontal scroller is displayed. I scroll the DBGrid view to the right to see more columns. If I select a row, the DBGrid view is automatically reset to view the first column (As if I scroll back to the left most position).
Is there a way to prevent that?
I assume you have goRowSelect in the grid options. This forces the selected col to be the first non-fixed column, so whenever the row changes the code to scroll the selected cell into view forces the first non-fixed column to be visible.
Since goRowSelect also effectively disables the horizontal scrolling with the keyboard I try to live without it. You can use custom drawing of the grid cells to show all cells of the current row with the proper colours for selected cells, even though only one cell is really selected. I use this also to show different colours depending on whether the grid is focused or not, similar to what a standard tree control does. For this to work properly you do however need to handle not only grid cell navigation events, but some other events too, like OnEnter and OnExit of the grid, OnActivate and OnDeactivate of the Application, and so on.
You might be able to ask for the scrollbar position
GetScrollInfo(Self.Handle, SB_VERT, SIOld);
and use SetScrollInfo( ) to put it back. There's probably a better way. SelectedField is another way (get/set it as needed).
I have a DBGrid on a form. The DBGrid has many columns, so an horizontal scroller is displayed. I scroll the DBGrid view to the right to see more columns. If I select a row, the DBGrid view is automatically reset to view the first column (As if I scroll back to the left most position).
Is there a way to prevent that?
I assume you have goRowSelect in the grid options. This forces the selected col to be the first non-fixed column, so whenever the row changes the code to scroll the selected cell into view forces the first non-fixed column to be visible.
Since goRowSelect also effectively disables the horizontal scrolling with the keyboard I try to live without it. You can use custom drawing of the grid cells to show all cells of the current row with the proper colours for selected cells, even though only one cell is really selected. I use this also to show different colours depending on whether the grid is focused or not, similar to what a standard tree control does. For this to work properly you do however need to handle not only grid cell navigation events, but some other events too, like OnEnter and OnExit of the grid, OnActivate and OnDeactivate of the Application, and so on.
You might be able to ask for the scrollbar position
GetScrollInfo(Self.Handle, SB_VERT, SIOld);
and use SetScrollInfo( ) to put it back. There's probably a better way. SelectedField is another way (get/set it as needed).