Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Grid footer doesn't work inside Grid details generator
Dear Vaadin Devs / users
I am new to Vaadin and really love the way things work. There is one issue that is just driving me nuts. Perhaps it is a bug otherwise please let me know what am doing wrong.
If I declare a grid footer it is added fine. However, if I define a grid within the scope of details generator of another grid the footer stops functioning. I see an empty row as a footer but nothing inside.
Is there a special magic to the grid footer when applied to a grid inside another grids details generator
final VerticalLayout layout = new VerticalLayout();
Grid grid = new Grid();
grid.addColumn("name");
grid.addColumn("address");
grid.addRow("John", "Melbourne");
grid.addRow("David", "Sydney");
grid.addRow("Alex", "Singapore");
FooterRow footer = grid.prependFooterRow();
footer.getCell("name").setText("NameFooter");
footer.getCell("address").setText("AddressFooter");
grid.setDetailsGenerator(rowReference -> {
Grid gridInternal = new Grid();
gridInternal.addColumn("name");
gridInternal.addColumn("address");
gridInternal.addRow("Sally", "Adelaide");
gridInternal.addRow("Noks", "Perth");
FooterRow footerInternal = gridInternal.prependFooterRow();
footerInternal.getCell("name").setText("NameFooter");
footerInternal.getCell("address").setText("AddressFooter");
// Wrap up all the parts into a vertical layout
VerticalLayout layoutInternal = new VerticalLayout(gridInternal);
layoutInternal.setSpacing(true);
layoutInternal.setMargin(true);
return layoutInternal;
});
grid.addItemClickListener(event -> {
if (event.isDoubleClick()) {
Object itemId = event.getItemId();
grid.setDetailsVisible(itemId, !grid.isDetailsVisible(itemId));
}
});
layout.addComponents(grid);
layout.setMargin(true);
layout.setSpacing(true);
setContent(layout);
See attached (the footer is not present even if you scroll down)
Could you add this finding to GitHub issues. There are number of corner cases reported already concerning when Grid is being used inside Grid details row, like these ones
https://github.com/vaadin/framework/issues/7674
https://github.com/vaadin/framework/issues/7604
Although Grid inside Grid is syntactically correct pattern, and eventually should work, I would like to advice to avoid it. It is not the most elegant way to do master detail patern in more complex UI's. I would open popup panel with the sub Grid instead or using other layout components for subview containing the another Grid. That is more manageable and also more pleasant UX.
Thanks Tatu,
I stripped out the unnecessary layering components to present this example. We actually use Tabsheet inside the grid detail which in turn uses grid.
Nevertheless, would you suggest using Table instead?
I think using Table would not help you much. I think pattern you are trying to create will be a burden with the browser and should be avoided. I mean it will hinder the user experience. For complex master detail patterns I would not use details generator. If you have a simple form of few fields and buttons, that is a good scenario for using details generator, or showing extra information of the item in order to reduce number of columns, to make Grid perform more snappy. As I mentioned before, it would be advisable to consider opening the TabSheet in to sub window, new view or something like that.