Grid Details does not show Table component

Vaadin 6 / 7 / 8
1

Hi!

A have a slight problem with using the Grid Details view. I have a DetailsGenerator which creates a HorizontalLayout with two components: a Label and a Table. When the detail row is open, it does not show the table component. Looking at the HTML, all the correct elements seem to be in place, but the table body wrapper div has heigth and width of zero pixels.

It seems like the detail element gets some fixed size, how do we decide the size of the detail container? Could this be some kind of timing problem that the detail component is not aware of the size of the components inside the layout?

    @Override
    public Component getDetails(Grid.RowReference rowReference) {
        HorizontalLayout layout = new HorizontalLayout();
        layout.setSpacing(true);
        layout.setMargin(true);

        String text = "some label text";

        Label label = new Label(text);
        layout.addComponent(label);
        
        Table table = new Table("TABLE");
        table.addContainerProperty("column1", String.class, null);
        table.addContainerProperty("column2", String.class, null );

        table.setColumnHeader("column1", "COLUMN1");
        table.setColumnHeader("column2", "COLUMN2");
        table.addItem(new Object {
                        "testing column1",
                        "testing column2"},
                new Integer(0));

        layout.addComponent(table);
        return layout;
    }
2

Hi,

Did you resolve this problem? We have very similar situation that table is not drawn when detail is opened. When opening details for another row then the previous one is drawn but it still doesn’t take the space that it needs.

Here is similar sample as yours:

        @Override
            public Component getDetails(Grid.RowReference rowReference) {

                VerticalLayout layout = new VerticalLayout();
                
                Table table = new Table();
                table.setSizeFull();
                table.addContainerProperty("column1", String.class, null);
                table.addItem(new Object[]{ "text1"}, 0);
                layout.addComponent(table);
                
                //layout.setHeight("100px");
                layout.set
                return layout;
            }
        });
3

Sorry there is little mistake in my code… I accidentally left extra: layout.set there.

4

Hi!

not as such :slight_smile: I created a “custom table” with Vertical and Horizontal layouts to display my “table”.

However, I think they have done some fixes for the Grid Detaild view in Vaadin version 7.6.2, have you tried that version? At least in the release notes they say they have fixed something for GridLayout in detail view, so maybe you could use that instead of a Table component, if that still doesn’t work?

5

Hi,

Thanks for the info. I tested these same scenarios with 7.6.2 and doesn’t seem to help.

We already thought of creating table from GridLayout but then we encountered this: https://vaadin.com/forum#!/thread/12287348

6

I don’t know what I messed up yesterday when testing 7.6.2 but now I retested and now my scenario seems to work.

7

Hi,

As Ilya mentioned in the other thread, we had a related fix in 7.6.2 and now more components should work in the details generator. If you encounter further problems, please report them so we can fix them :slight_smile:

Was there still something off with this Table case?

//Teemu

8

Hi,

I think at least the table and gridlayout components started to work. Table component was what we wanted at the start. I also quickly tested the example that Marika posted and that too started to work when I set some height and width to the table. Not sure if that is a bug or not?
-Simo

9

Autodetecting the height to display is relatively hard, so at least for now I’d call it “missing feature”. Good to hear that it’s working at least!

//Teemu

10

One thing that I noticed is that table doesn’t draw scrollbar if it is inside Grid’s Detail. Here is sample program where table is in Details and no scrollbar. And also same table inside HorizontalLayout where scrollbar is shown.

[code]

@Override
protected void init(VaadinRequest vaadinRequest) {

    final Grid grid = new Grid();
    grid.setWidth("1000px");
    // Define some columns
    grid.addColumn("name", String.class);

    // Add some data rows
    grid.addRow("Test1");
    grid.addRow("Test2");
    grid.addRow("Test3");
    grid.setSelectionMode(Grid.SelectionMode.NONE);

    grid.getColumn("name").setExpandRatio(1);
    HorizontalLayout layout = new HorizontalLayout();

    layout.addComponent(new Label("Grid"));
    layout.addComponent(grid);
    layout.addComponent(new Label("Table"));
    layout.addComponent(createTable());
    setContent(layout);

    grid.addItemClickListener(new ItemClickEvent.ItemClickListener() {

        @Override
        public void itemClick(ItemClickEvent event) {
            Object itemdId = event.getItemId();
            if (!grid.isDetailsVisible(itemdId)) {
                grid.setDetailsVisible(itemdId, true);
            } else {
                grid.setDetailsVisible(itemdId, false);
            }
        }
    });

    grid.setDetailsGenerator(new Grid.DetailsGenerator() {
        @Override
        public Component getDetails(Grid.RowReference rowReference) {
            VerticalLayout layout = new VerticalLayout();
            layout.setHeight("200px");
            Table table = createTable();

            layout.addComponent(table);
            return layout;
        }

    });

}

public Table createTable() {
    Table table = new Table("My Table");
    table.setSizeFull();
    table.addContainerProperty("col1", Integer.class, null);
    for (int i = 0; i < 10; i++) {
        table.addItem(i); // Create item by explicit ID
        Item item1 = table.getItem(i);
        Property property1 = item1.getItemProperty("col1");
        property1.setValue(i);
    }
    return table;
}

[/code]

11

Also if you change previous example’s table height so that all rows are shown

table.setHeight("500px"); And then try to change the row order by clicking “col1” then only three rows are drawn.