Vaadin 14 - Grid not Displaying/Populating When Used in Nested Layout

问题

I am attempting to build a Vaadin/Spring app. I am using Spring Security and have based the security portions of the app around the samples and information in this tutorial. My main/home view is a very simple one with a Vaadin Grid:

@SpringComponent
@UIScope
@Route(value = "", layout = MainLayout.class)
public class MainView extends HorizontalLayout {

    private ItemService itemService;

    private Grid<ItemDTO> itemGrid;

    @Autowired
    public MainView(ItemService itemService) {
        this.itemService = itemService;
        var items = this.itemService.getItems();
        this.itemGrid = new Grid<>(ItemDTO.class);
        this.itemGrid.addColumn(ItemDTO::getName).setHeader("Name");
        this.itemGrid.addColumn(ItemDTO::getUnitId).setHeader("Unit");
        this.itemGrid.setItems(items);
        add(itemGrid);
    }

}

The MainLayout class referenced above is also very simple:

@SpringComponent
@UIScope
public class MainLayout extends VerticalLayout implements RouterLayout, HasComponents {
    private Div childWrapper = new Div();

    public MainLayout() {
        H1 heading = new H1("Price List");
        MenuBar menu = new MenuBar();
        MenuItem vendor = menu.addItem("Vendor");
        vendor.getSubMenu().addItem(new RouterLink("Wal-Mart", VendorView.class, "WMRT"));
        HorizontalLayout header = new HorizontalLayout(heading, menu);
        header.setSizeFull();
        add(header);
        add(childWrapper);

    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
        childWrapper.getElement().appendChild(content.getElement());
    }
}

However, after logging in and being redirected to MainView, the Grid simply does not load:

However, if I remove layout = MainLayout.class from MainView, it loads fines. Another view in the project, which similarly uses a Vaadin Grid and references MainView, loads just fine:

@SpringComponent
@UIScope
@Route(value = "vendor", layout = MainLayout.class)
public class VendorView extends VerticalLayout implements HasUrlParameter<String> {

    private String prop;
    private Grid<VendorItemDTO> itemGrid;
    private VendorItemService vendorService;

    public VendorView(VendorItemService vendorService) {
        this.vendorService = vendorService;

    }

    @Override
    public void setParameter(BeforeEvent event, String parameter) {
        this.prop = parameter;
        this.setUpUI();
    }

    private void setUpUI() {
        var items = this.vendorService.findByVendor(prop);
        var h2 = new H2("Items for " + this.prop);

        this.itemGrid = new Grid<>();
        this.itemGrid.addColumn(VendorItemDTO::getItemName).setHeader("Item");
        this.itemGrid.addColumn(VendorItemDTO::getTotalPrice).setHeader("Total Price");
        this.itemGrid.addColumn(VendorItemDTO::getUnitString).setHeader("Units");
        this.itemGrid.setItems(items);

        add(h2, itemGrid);
    }

}

This is my first time using Vaadin, so I apologize if it is an obvious mistake, but I referenced the project's documentation and videos and have yet to resolve the issue.

Thanks.

回答1:

I have faced almost the same problem with just a bit different setting, here is the link to the answer with proper code examples, thanks to @Erik Lumme - Vaadin 14 - grid disappearing when using nested layout

In my case i had grid which disappeared since i started to use nested layout engine. Usage of browser tools showed that the grid was present in html but had style parameter 'position:relative' and was overflowed by bottom element of layout.

The solution was almost the same - i added .setFullSize() to the "container" element which contained the grid. After that i made maven:clean and then rebuilt the project to make it work.

Here is code quotation (full example can be found by the link provided):

MainLayout:

@Theme(value = Material.class, variant = Material.DARK)
public class MainLayout extends Composite<VerticalLayout> implements RouterLayout {

    //Component to delegate content through.
    private Div mainContent = new Div();           //**!!!the "conteiner" element**

    public MainLayout() {
        getContent().add(
                new Span("from MainLayout top"),
                mainContent,
                new Span("from MainLayout bottom"));
        mainContent.setSizeFull();                  //**!!!.setFullSize applied**
    }

    @Override
    public void showRouterLayoutContent(HasElement hasElement) {
        Objects.requireNonNull(hasElement);
        Objects.requireNonNull(hasElement.getElement());
        mainContent.removeAll();
        mainContent.getElement().appendChild(hasElement.getElement());
    }
}

LayoutWithMenuBar:

@ParentLayout(value = MainLayout.class)
public class LayoutWithMenuBar extends Composite<VerticalLayout> implements RouterLayout {

    private Div mainContent = new Div();   //**!!! the container element**

    private HorizontalLayout menuBar = new HorizontalLayout(
            new RouterLink("Tprojects", TProjectDashboard.class));

    public LayoutWithMenuBar() {
        getContent().add(menuBar, mainContent);
        mainContent.setSizeFull();              //**!!! .setFullSize() applied**
    }

    @Override
    public void showRouterLayoutContent(HasElement hasElement) {
        Objects.requireNonNull(hasElement);
        Objects.requireNonNull(hasElement.getElement());
        mainContent.removeAll();
        mainContent.getElement().appendChild(hasElement.getElement());
    }
}

finally the grid itself:

@Route(value = "dashboard/tproject", layout = LayoutWithMenuBar.class)
public class TProjectDashboard extends VerticalLayout {

    private Grid<TProject> tprojectGrid = new Grid<>(TProject.class);

    public TProjectDashboard() {

        tprojectGrid.setItems(
                new TProject("Erik", "Software Engineer"),
                new TProject("Fia", "Kindergarden teacher"),
                new TProject("Jack", "All trades")
        );

        add(tprojectGrid);
    }
}

The solution was provided by @Erik Lumme here - Vaadin 14 - grid disappearing when using nested layout

来源：https://stackoverflow.com/questions/57797262/vaadin-14-grid-not-displaying-populating-when-used-in-nested-layout