How to create / destroy dynamic grid?

Vaadin 6 / 7 / 8
1

In Vaadin 8 I have a home page with several buttons. When a button is clicked I want to create and display a grid based on the selected button.

I am unsure how to get that grid to display on the existing home page as well has how to remove any previously displayed grid.

For example, when the home page opens the grid is blank and not displayed. The user clicks show companies button the grid should display below the buttons a listof companies. If the user selects a company and clicks show contacts the grid should be cleared and populated with the contacts for the selected company. If the user clicks the home page button it should clear and hide the grid and display the buttons.

I suspect this is simple but I’m new to Vaadin and looking for a best practice solution. Lastly, I am using the designer tool to create the basic home page design and I have a grid on the home page called gridGeneric. Can I use that grid somehow so it shows where I want it in the design?

2

Grid is generic, it sound like different Grids would be a good way :slight_smile:

Grid<Company> companyGrid  for showing the Companys
Grid<Contact> contactGrid  for showing the Contacts.

on click you could simply create/show different Grids

Imho it is better then create a super Generic Grid, where you check the Generic types before adding the Columns, Casting the Beans/Values e.t.c.

3

How do I remove then display the different grids on the same page when the different buttons are clicked.

4

well, i just took an pragmatic aproach and made a small demo.

There are 2 Grids, one for companies one for contacts.

I made two classes for each of them

public class CompanyGrid extends Grid<Company> {

    public CompanyGrid() {
    }

    public CompanyGrid(final Collection<Company> companies) {
        this();
        // the Value is Long, the lambda declares how to present it
        addColumn(Company::getId, i -> String.valueOf(i))
                .setCaption("Id");

        addColumn(Company::getName)
                .setCaption("Name");

        setSelectionMode(SelectionMode.SINGLE);
        setItems(companies);
    }

    public Optional<Company> getSelectedItem() {
        return getSelectionModel().getFirstSelectedItem();
    }

}

same for contacts.

On click “show companys” simply list of companies wil be shown (i only made 2 because im lazy :slight_smile:

on click "show contacts, we take the selected item from the companies grid.
It’s an optional, so if it is present, we create the showContacts grid.

private void handleContactsClick() {
       final Optional<Company> selectedCompany = companyGrid.getSelectedItem();
       if (selectedCompany.isPresent()) {
           showContacts(selectedCompany.get().getContacts());
       } else {
           Notification.show("Please select a Company First");
       }
   }

Use selectedCompany.ifPresentOrElse() if you have newer Java Version :slight_smile:

to remove the previous grid, i just pur them in an extra container, and clear it before greating new ones.
There are for sure optimisation potential, but i dont want to do all the job for ya :slight_smile:

[LiveDemo (may Take time to start, is on sleeping mode)]
(https://differentgrids.herokuapp.com/)

[Code on gitHub]
(https://github.com/Vilkaz/differentGrids/)

have fun playing around :wink:

5

Wow that is awesome. I didn’t read the full post first time through. Now I see what you are doing and read the code.

That was so awesome of you to do that. THANK YOU SO MUCH!!!

6

You are welcome :slight_smile:

Im just lazy, sometimes it is faster to speak in code then in english :wink: