[ help ] Vaadin 8: Grid sizing dynamically to the rows it has in the given

Hi,
I’m looking for an solution to scale the size of my Grid (component) according to the amount of columns and rows it has at the given moment. You know, to have it scale dynamically so there would be no “empty space” and it would look slim and neat.

https://cdn.vaadin.com/vaadin-grid/2.0.0-alpha3/demo/data.html#dynamic-height That is basically the thing I want to achieve, but I’d like to get that result with java. I’m working with Eclipse which has the vaadin plugin installed. and I can give you a reference of how I make the grid:

Grid gridM = new Grid<>(“an example grid”);

gridM.addColumn(Metaclass::getNimike).setCaption(“1”);
gridM.addColumn(Metaclass::getTyyppi).setCaption(“2”);
gridM.addColumn(Metaclass::getId).setCaption(“3”);
gridM.setItems(DBcore.getInstance().getMetaClassList());
gridM.setSelectionMode(SelectionMode.SINGLE);

I’ve tried gridM.setHeight(“100%”); and numerous other ways but I’ve failed to change the height in any way. Unless I change it directly with .setHeight(“px”); of course. I’m sure it is a simple trick but for some reason I haven’t been able to find the answer.

I’ve contacted support and I’ve got information that you actually have to make an extension for this. Unfortunately I’m not able to give you guys an working example to do so, because I’m fairly new at programming so I’ll leave this post up if someone can actually come up with a helpful example or point to the right direction.

Try to nest your grid inside a VerticalLayout o HorizontalLayout or CssLayout. For this one, do setSizeFull().
My grids work good structure like this.
If you add/remove column at runtime, maybe you should call grid.getDataProvider().refreshAll() to start a GUI refresh.

Are you saying that I should set the setSizeFull() for the layout or for the grid? I got the Grid inside a layout to have it all nicely lined up with my control buttons. Should I add another layout inside the layout where the Grid is placed? And what comes to the getdataprovider function, I’m using it already and it refreshes the grid datawise, but the size is unaffected hence leaving the whitespace if I set my grid to a certain height.

Thank you for your reply tho! I will try out the setsizefull on the layout I have at the moment and if it doesn’t work, I’ll add even one layer of layouts more just to check if that would do the trick! :slight_smile:

It’s often a matter of layout nesting… one strecth the other.

I can’t see how layout nesting would affect the grid in a way that it would be dynamic according to the rows of data it has inside it? In case there is a misunderstandment; my Grid is working just fine and it is in the size I set it to be, but I’d like to manipulate the size according to the amount of data (rows) it has inside it in different states, so it would look all slim and cool without the “extra” whitespace when, lets say you have only 2 rows of data and your height is set to 500px.

Ok, so try to set undefined width and height to the grid. This should auto-adapt the grid.
Take a look to Grid API. Grid.setWidthUndefined(), Grid.setHeightUndefined() and Grid.setHeightByRows().
I hope these can help you.

Thanks again for you effort to help me, but unfortunately I’ve tested the methods you mentioned and they have no effect. getHeightByRows() does return the amount of rows it shows in the grid’s body, so if I implement a way to keep in track how many rows I’ve got in the grid I could potentially then use setHeightByRows() to set the correct amount of rows. However, the documentation says the following when you use setHeightByRows() :“If Grid doesn’t contain enough rows, white space is displayed instead.” Bummer. Dead end there again. And if I use .setHeightMode(HeightMode.ROW), which I do need to use in order to use set and getHeightByRows() properly, setWidthUndefined() and setHeightUndefined() are totally useless, since they work only if you have .setHeightMode(HeightMode.CSS) active.

Sorry I don’t have any more ideas. I hope Vaadin team can help with new release.

Thank you for your time and effort mate :slight_smile: Guess I’ll just have to keep looking and try to make that extension of my own. It sure seems a struggle now but pretty sure that it will teach me a thing or two regardless if I get it to work or not. ^^

As a matter of fact, I managed to solve my problem. I have a list where I store the data I wish to display on Grid, so by using getExampleList().size() I was able to get the number of items in the list and set that to the grid.setHeightByRows(getExampleList().size()); When I add items to the list I just call the method again at the end and the Grid expands itself to the desired size. And it works vise versa when deleting data, to make the Grid smaller. Hopefully this method can help people with the same issue as I did. If you didn’t quite understand the way I implemented it or it just doesn’t just work for you, give me a heads up and lets see if we can find a solution! :slight_smile:

Hi Santtu,

At least the Grid.setHeightUndefined() should work in the more reccent versions of Vaadin. There was a bug in the client-side implementation that cause it to behave unexpectedly before and do exactly the same as your workaround in the last post.

// Teemu

Thanks Teemu,
I’m actually more seeking being able to adapt the width to the existing columns. Is there any way to do that?

You could try GridScrollExtension add-on, it has Grid width autoresizer

https://vaadin.com/directory/component/gridscrollextension-add-on