Grid Details does not show Table component

Marika Mörsky

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;
    }

Simo Tuokko

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;
            }
        });

Simo Tuokko

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

layout.set

there.

Marika Mörsky

Hi!

not as such :) 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?

Simo Tuokko

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

Simo Tuokko

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.

Teemu Suo-Anttila

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 :)

Was there still something off with this Table case?

//Teemu

Simo Tuokko

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

Teemu Suo-Anttila

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

Simo Tuokko

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.

@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;
    }

Simo Tuokko

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.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Grid Details does not show Table component

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Grid Details does not show Table component

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.