CODEWITHSUNDEEP
javagridvaadin
Glory to Russia
Glory to Russia

Reputation: 18760

Why is the grid not shown in this Vaadin 11.0.0 application?

I want to display two tabs (Providers and Products) in a Vaadin page. The Providers should contain a grid with one record.

I wrote the following code for this:

import java.util.ArrayList;
import java.util.List;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        final Text header = new Text("Header");
        add(header);

        final Tab productsTab = new Tab("Products");
        final Tab providersTab = new Tab("Providers");
        final Grid<LoanProvider> providersGrid = new Grid<>();
        providersGrid.addColumn(LoanProvider::getName).setHeader("Name");
        providersGrid.addColumn(LoanProvider::getRegions).setHeader("Regions");
        providersGrid.addColumn(LoanProvider::getUrl).setHeader("URL");
        providersGrid.setSizeFull();
        providersTab.add(providersGrid);
        final Tabs tabs = new Tabs(providersTab, productsTab);
        add(tabs);
        providersGrid.setItems(getLoanProviders());
    }

    private List<LoanProvider> getLoanProviders() {
        final List<LoanProvider> coll = new ArrayList<>();
        final LoanProvider sample = new LoanProvider();
        sample.setName("Provider name");
        sample.setRegions("Region1");
        sample.setUrl("http://www.someserver.com");
        coll.add(sample);
        return coll;
    }
}

public class LoanProvider {
    private String name;
    private String regions;
    private String url;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getRegions() {
        return regions;
    }

    public void setRegions(String regions) {
        this.regions = regions;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

When I run the application, I don't see any data in the Products tab:

Screenshot

How can I change the code in order for the grid contents to be displayed?

Calling setSizeFull and setting height didn't help.

Upvotes: 0

Views: 405

Answers (1)

Erik Lumme
Erik Lumme

Reputation: 5352

Tabs in Flow should not contain the page content, what you are doing now is adding the grid to the tab itself (right after the Providers text).

On this page there's an example Tabs with pages
https://vaadin.com/components/vaadin-tabs/java-examples

Basically you should add a SelectedChangeListener to the tabs component, and depending on which tab was clicked, show or hide the grid (either by setVisible or by removing it and re-adding it to the parent).

There is also an addon in Vaadin Directory that wraps similar logic of the above example https://vaadin.com/directory/component/paged-tabs

Upvotes: 3

Related Questions