Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Grid Details does not show Table component
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;
}
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;
}
});
Sorry there is little mistake in my code... I accidentally left extra:
layout.set
there.
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?
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
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.
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
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
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
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;
}
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.