Vaadin Table columns autosize/autoscale without horizontal scrollbar - vaadin

I have a vaadin table, with say 5 columns.
In the last column (right-most) we have the edit/delete buttons which always take up the same amount of width.
When I set the width of the last column to a specific width, and all other columns to a specific setColumnExpandRation(10); then everything is ok, with the exception that the normal columns are not autoscaled.
When I the the last column to a specific width, and all other columns to autoscale, (setColumnWidht(-1)), then the normal columns are sized depending the content, but the whole table width is too large and shows a horizontal scrollbar.
Example of such a case in the picture below
And the java code:
Table tb= new Table();
tb.setWidth(100, Unit.PERCENTAGE);
tb.setHeight(100, Unit.PERCENTAGE);
layout.addComponent(tb);
BeanItemContainer<Person> pList =
new BeanItemContainer<>(Person.class);
for (int i=0; i < 20; i++)
{
Person p1= new Person("******", "++++++++++", "--++--++--++--++--++--++", "????", "3333 "+i, new Date());
pList.addBean(p1);
}
tb.setContainerDataSource(pList);
tb.setColumnWidth("zip", 20);
tb.setColumnExpandRatio("firstName", 1);
Is there a way to have the last column with a fixed width, but still have the other columns auto sized, to have widths depending the content?

The solution is to set table to be 100% width.
Then to set last column to have fixed widht.
Set the only one of the other columns to have expand ratio 1, to force other columns to get proper space.
Container which contains table must have 100% width.
If you get scrollbars then you must wrap text inside table.

Related

Custom UICollection view layout

I'm trying to configure a collection view to have the following custom layout shown in the attached image:
. Essentially, I want to be able to configure my collection view so it appears to be based off rows instead of columns. For example:
Row 1: 3 equally sized squares, each 1/3 the width of the screen
Row 2: 1 square that's 2/3 the width of the screen, and then 2 squares stacked on
top of each other that are each 1/3 the width of the screen.
Row 3: 1 rectangle that fills the width of the screen
Row 4: 2 equally sized squares, each 1/2 the width of the screen
I've gone through multiple UICollectionViewLayout and UICollectionViewDelegateFlowLayout tutorials, but have been unable to find the information I need.
You need to implement a custom UICollectionViewLayout.
Precompute the location of all of the squares in your repeat in prepareLayout
Return the height of your content by using the (repeat height) * (number of items in collection) / (number of items in repeat) + the height at the remainder in collectionViewContentSize (this means you should cache the content height for each item in step 1, but the height is not the height of that square (its the height of the tallest element in that row)
In layoutAttributesForElementsInRect you need to figure out what repeat row your rect starts in and what row of the repeat it ends in. You then return all of the cached layout attributes for those rows from step 1, but you have to add back a y value equal to (repeat count) / (first item index) * (repeat height).
basically its a bunch of math but when you divide it into repeating sections, the problem becomes which repeat am I in (divide) and what element within that repeat do I need (modulus), and it's much easier to solve.
I did something similar to this but with multiple repeats that could be arranged in different orders and it took a few hours to get it working without any bugs. Its a lot of math and very tedious.

(Auto Fit All Columns) of ListGrid's Context Menu stretches the Row number in SmartGWT

I'm not sure whether this should be the expected behaviour or is a bug.
When the Row Number column is set to be shown, selection of (Auto Fit All Columns) from context menu stretches the column
to the end of the ListGrid.
I though there is an issue in our app but the ShowCase has (Grids > Appearance > Row Numbering)
the same problem.
final ListGrid countryGrid = new ListGrid();
countryGrid.setWidth(500);
countryGrid.setHeight(224);
countryGrid.setShowAllRecords(true);
countryGrid.setShowRowNumbers(true);
If you change the width of a column before applying the Auto fit it behaves normally.
Has someone had the same issue ever?
Is there any workaround?
Without looking further at your code (for instance, other width and autofit related configurations applied to the list grid, field types and expected contents) it's difficult to know if this is expected behavior. Although I agree, by looking at the demo, that it is at least strange behavior.
But this is what I do in my ListGrids to keep the row numbers at the size I want:
// this field is created only as a way to define the row number field properties
ListGridField rowNumberFieldProps = new ListGridField();
rowNumberFieldProps.setWidth(50);
rowNumberFieldProps.setCanAutoFitWidth(true);
rowNumberFieldProps.setAutoFitWidthApproach(AutoFitWidthApproach.VALUE);
grid.setRowNumberFieldProperties(rowNumberFieldProps);
grid.setShowRowNumbers(true);
Some notes:
Since I expect a lot of records to be displayed (and in consequence, large row numbers), I use a row number column width that fits properly my numbers (50 in my case).
Notice that setCanAutoFitWidth(false) will leave your row number field fixed in size, even when 'Auto Fit All Columns' is used. This is probably a good approach in your case. If you do that, you can simply remove the line with setAutoFitWidthApproach.
setCanAutoFitWidth(true) and setAutoFitWidthApproach help me control what happens when I use the 'Auto Fit All Columns' context menu. In my case I do want autofitting to apply to extend the column width when I have row numbers beyond 99.999 (not the most common case for me, but possible).

Custom width of Vaadin GridLayout

I'm working with a 2x2 GridLayout in Vaadin.
gridLayout = new GridLayout(2, 2);
gridLayout.setWidth(100, Unit.PERCENTAGE);
gridLayout.setMargin(true);
gridLayout.setSpacing(true);
The cell in the upper-left corner contains a simple label aligned to the right. Upper-right cell contains a textfield aligned to the left. The second row simply contains a label below the textfield.
gridLayout.addComponent(captionLabel, 0, 0);
gridLayout.addComponent(inputField, 1, 0);
gridLayout.setComponentAlignment(captionLabel, Alignment.MIDDLE_RIGHT);
gridLayout.setComponentAlignment(inputField, Alignment.MIDDLE_LEFT);
Now I want to have both columns within the grid to have size set to 50% to have the whole layout aligned in the middle of my page - now it is slightly shifted to the left side and I can not figure out why...
Vaadin's wiki-page shows a related article, but I can not figure out how to work with it. Seems to be deprecated, because I can not access #getColumn(); - method?! https://vaadin.com/wiki/-/wiki/10674/Configuring+Grid+column+widths
For further info: The GridLayout is added as a separate component to a VerticalLayout.
You can influence the column width's with the grid.setColumnExpandRatio(1, 1); method.
If you wish to have both use 50% of the total width, just set the expand ration to the same value on both columns.
Please also note this:
A layout that contains components with percentual size must have a defined size!
If a layout has undefined size and a contained component has, say, 100% size, the component would fill the space given by the layout, while the layout would shrink to fit the space taken by the component, which is a paradox. This requirement holds for height and width separately.
Book of Vaadin
Solved it by adding a HorizontalLayout-wrapper for the left column containing the label. The right colum contains a VerticalLayout with all other components.
Label captionLabel = new Label(localized);
captionLabel.setSizeUndefined();
HorizontalLayout wrapper = new HorizontalLayout();
wrapper.setSizeFull();
wrapper.addComponent(captionLabel);
wrapper.setComponentAlignment(captionLabel, Alignment.TOP_RIGHT);
[...]
gridLayout.addComponent(wrapper, 0, 0);
gridLayout.addComponent(inputLayout, 1, 0);
gridLayout.setColumnExpandRatio(0, (float)0.5);
gridLayout.setColumnExpandRatio(1, (float)0.5);

Highcharts Columnrange Questions (multiple y-axes and column widths)

I'm in the process of evaluating Highcharts as a replacement for our current platform, and have some questions about how we can replicate one of our existing charts:
I've been able to recreate the basic floating stacked column chart, but need help with some of our specific features.
1) Is is possible to replicate the multiple y-axes with the columns displayed to the right of each within a single chart? If not, I suppose we could do 3 charts next to one another - and draw our own titles above (and data table below). If we go this route, is there a way to group all these elements in a single "container"? We need to export these charts to images and need to end up with a single image that looks like the one attached.
2) How would I create the inner box within each column? Do I need to draw it myself, or can I create another column series with a border and transparent fill and somehow set the width of the column to be less than the width of the main columns (note that the number of columns on each chart is dynamic, so the column widths can't be a fixed size. i.e. the inner box width needs to be a percentage of the main column width)?
3) Assuming #2 is possible, I could probably use the same technique to plot the horizontal line - just make the height 0 (or very small) and make the bar wider instead of smaller. Is there a better way?
4) How do I get the x coordinates of the columns so we can align our data table under each column?
5) Can I separate the individual points within the column. You'll notice in my jsfiddle, product 1 and product 2 are vertically aligned in the center of the column. Can I spread them out within each column as the 2 points are in the screenshot?
Thanks in advance for advice on all or any of the above.
Mike
1) You can use multiple yAxis, see the example
2) You can use renderer or mix column/column range and border parameter, example
plotOptions: {
columnrange: {
pointPadding:0.2,
color: 'rgba(255,255,255,0)',
borderColor: '#303030'
}
},
3) Use renderer, as above or scatter series with customied marker
4) Column is shape in point.element.graphic, so you can extract it.
5) as far as I know, it is not possible

How do I make a TCheckListBox scroll vertically?

I've got a TCheckListBox on a form. Its Columns property is set to 2, and if there are more items than can fit on-screen in two columns, it puts a horizontal scrollbar across the bottom of the control.
Thing is, the way this form it laid out, it would be much more convenient to scroll vertically. But I can't seem to figure out how to make the box do that. I thought setting Columns to 1 should work, but it doesn't.
Anyone know how to make a TCheckListBox scroll vertically instead of horizontally?
You need to set Columns to 0.
For all positive values the VCL sends a LB_SETCOLUMNWIDTH message to the underlying native list box control, with the width parameter set to the list box client width divided by the number of columns. Items that don't fit will start a new column with the same column width, so the horizontal scrollbar becomes visible.
If Columns is 0 then there is a single column that spans the entire client width of the list box, and items that don't fit will make the vertical scrollbar visible, and hide the horizontal scrollbar.
Edit:
There seems to be genuine interest what happens when a negative value is used for the Columns property.
The method TCustomListBox.CreateParams() sets the LBS_MULTICOLUMN list box style depending on the Columns property being different from 0. For negative values the style flag is set, but the VCL doesn't send the LB_SETCOLUMNWIDTH message, so the native control uses the default column width. It is documented to be:
15 times the average character width for the font used by the list box.
(Search for "The LBS_MULTICOLUMN style specifies" to find the relevant passage of text.)

Resources