Vaadin 8 grid: How to render two components in one grid cell

Hi,

I need to render HTML text and a button in one Vaadin 8 grid cell with the button shown only in some of the cells from the grid column. I know there is a component renderer but I can only set one component. If I would write a custom renderer, I could only return one component too.

Is it possible to render two components in one cell?
If yes, how to best implement it?

My idea is to use a component renderer to return a layout containing a label and a button. What would be the correct way?

Thanks for your help!

Natalie

Your idea of a layout sounds ok.

Thank you!

I tried the ComponentRenderer first just for a Label. But I have the problem that only the text in the last row of the grid is shown. All above cells of the column are empty. I don’t get an error. When I debug I can see the correct text for each row. What am I doing wrong?

My code:

grid.addComponentColumn(overviewdata -> {				
						return new Label(data.getResult(), ContentMode.HTML);					
				}).setCaption("").setExpandRatio(1);

The same with:

grid.addColumn(data -> {			
						return new Label(data.getResult(), ContentMode.HTML);					
				}, new ComponentRenderer()).setCaption("").setExpandRatio(1);

That seems to work ok for me. Note that those two code snippets should be functionally identical. Maybe there’s something the way your data’s HTML representation that doesn’t fit into the row? You might want to increase the row height, perhaps, or edit styles to make it so that the content fits.

Thank you very much for your help!

I need to adjust the style (CSS). But the row height is already big. Since I can see text and buttons in the last row I don’t think that is the cause of the problem.

I attached an image of the look of the grid. If I sort the columns by clicking the header I can always see text in the last row. So the text is there but invisible for all rows except for the last one. The problem is due to the use of the ComponentRenderer since all is fine when I use the HtmlRenderer. Is this a Vaadin 8 bug? I just updated to 8.6.3. But this did not help. Please point me to the cause of the problem! Thanks!

17454951.png

Hard to say based on the picture if this is a bug in Vaadin 8 or if there’s something weird going on in your app. If you can create a minimal sample project that reproduces this behavior, you should create a ticket at https://github.com/vaadin/framework/issues

-Olli

Natalie Schneider:
Thank you!

I tried the ComponentRenderer first just for a Label. But I have the problem that only the text in the last row of the grid is shown. All above cells of the column are empty. I don’t get an error. When I debug I can see the correct text for each row. What am I doing wrong?

My code:

grid.addComponentColumn(overviewdata -> {				
						return new Label(data.getResult(), ContentMode.HTML);					
				}).setCaption("").setExpandRatio(1);

The same with:

grid.addColumn(data -> {			
						return new Label(data.getResult(), ContentMode.HTML);					
				}, new ComponentRenderer()).setCaption("").setExpandRatio(1);

Your grid.addComponentColumn helped me. Thanks