How should I change the orientation of table or a grid? I want the headers to be on the left hand-side. Just 2 columns with header on the left side and value on the right side.
You cannot achieve such functionality with Table, but you can use Frozen Columns feature of Grid to emulate columns as first cells in each row like here http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features
Related
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 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.
I have 20 columns in a vaadin 7 table, I want to freeze 4 columns so that whenever we scroll horizontally we should be able to see those frozen columns always.
There is no freeze columns feature in Vaadin 7 Table. But in newer Grid component you can set the X left most columns to be frozen with Grid.setFrozenColumnCount(..) methdod, see more here:
https://vaadin.com/api/framework/7.7.14/com/vaadin/ui/Grid.html#setFrozenColumnCount-int-
If you want to do something similar with Vaadin 7 Table, you probably need to do the following
Use two tables with the same data source Container
Wrap them inside e.g. CssLayout
Give z-index to other Table so that it is placed on top of the other in your theme CSS styles (Table.addStyleName("frozen-columns-table"))
Set the Table on top have only the "frozen" columns with setVisibleColumns(..) method
Set/style column widths etc. accordingly. The Table on top needs to be narrower than the bottom Table.
The above approach has its limitations and performance impacts, but could be a solution in some cases.
I am not sure if I need to change the grid templates or if there is a regular way:
I want a horizontal grid with 20 items.
The grid dont need horizontal scrollig because the pagination is below.
Each item should have the same fix size.
Each item should have a top down order (and not left to right).
Its my first time with ui grid and I tried a bit but the result is "crap" :/ An working example will be so nice :)
I have a view containing 3 items. They are in a 2 column format so if all 3 items were visible you would have 2 on the top row and 1 on its own in the second row. This is fine but these items are going to be dynamically turned on or off in code.
How can I lay them out so that they flow correctly. i.e. the 3rd item moves onto the first row if the second item is turned off. Can it be achieved through auto layout constraints? I also need the outer view to collapse in height if one or all of the items are hidden. Can this be achieved in the interface builder of xcode or does it have to be done in code?
Diagram below of the variations that could happen:
use something like this for your collection view
https://github.com/steipete/PSTCollectionView