Grid footer doesn't work inside Grid details generator

Vaadin 6 / 7 / 8
1

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)
31005.jpg

2

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.

3

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?

4

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.