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.
Table in GridDetailRow Problem with Table column width
Hi Guys,
I have the requerement to have a Table in the detail Row of another Grid.
However, if I put a table in the detail row, the first Column will use up 100% of the available space. All other columns will have a width of 0px:
see my code:
package com.example.myapplication;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.data.Item;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.table.CollapseMenuContent;
import com.vaadin.ui.Component;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Grid.DetailsGenerator;
import com.vaadin.ui.Grid.RowReference;
import com.vaadin.ui.Table;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
@Theme("mytheme")
@Widgetset("com.example.myapplication.MyAppWidgetset")
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
Grid gridWithInnerTable = getGridWithInnerTable();
layout.addComponent(gridWithInnerTable);
this.setContent(layout);
}
private Grid getGridWithInnerTable() {
Grid grid = new Grid();
grid.setContainerDataSource(getLocaleContainer());
grid.setDetailsGenerator(new DetailsGenerator() {
@Override
public Component getDetails(RowReference rowReference) {
Table innerTable = new Table();
innerTable.setSizeFull();
innerTable.setHeight("100px");
innerTable.setContainerDataSource(getLocaleContainer());
innerTable.setColumnCollapsingAllowed(true);
innerTable.setColumnCollapsible(Locale_PROPERTY_language, true);
innerTable.setColumnCollapsible(Locale_PROPERTY_country, true);
innerTable.setColumnCollapsible(Locale_PROPERTY_NAME, true);
innerTable.setCollapseMenuContent(CollapseMenuContent.ALL_COLUMNS);
return innerTable;
}
});
Object itemId = grid.getContainerDataSource().firstItemId();
grid.setDetailsVisible(itemId, !grid.isDetailsVisible(itemId));
grid.getColumn(Locale_PROPERTY_language).setHidable(true);
grid.getColumn(Locale_PROPERTY_NAME).setHidable(true);
grid.getColumn(Locale_PROPERTY_NAME).setHidable(true);
grid.setSizeFull();
return grid;
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
public static final Object Locale_PROPERTY_language = "language";
public static final Object Locale_PROPERTY_country = "country";
public static final Object Locale_PROPERTY_NAME = "name";
private static final String Locales =
{ { "fi", "FI", "Finnish" }, { "de", "DE", "German" }, { "en", "US", "US - English" }, { "sv", "SE", "Swedish" } };
/**
* @return test container with Locale
*/
public static IndexedContainer getLocaleContainer() {
IndexedContainer localeContainer = new IndexedContainer();
localeContainer.addContainerProperty(Locale_PROPERTY_language, String.class, null);
localeContainer.addContainerProperty(Locale_PROPERTY_country, String.class, null);
localeContainer.addContainerProperty(Locale_PROPERTY_NAME, String.class, null);
for (int i = 0; i < Locales.length; i++) {
String id = Locales[i][2];
Item item = localeContainer.addItem(id);
item.getItemProperty(Locale_PROPERTY_language).setValue(Locales[i][0]);
item.getItemProperty(Locale_PROPERTY_country).setValue(Locales[i][1]);
item.getItemProperty(Locale_PROPERTY_NAME).setValue(Locales[i][2]);
}
return localeContainer;
}[/i][/i][/i][/i]
this was supposed to be a workaround for: https://vaadin.com/forum#!/thread/13546513
Would it be possible to give the columns fixed widths? E.g.
innerTable.setColumnWidth(Locale_PROPERTY_language, 200);
Hallo Anna,
thanks for the suggestion.
It works with this example (although it was not working in my production).
But this is not a solution for me as the required width is unknow.