I am currently using the excellent WrappingGrid in https://vaadin.com/directory/component/gridextensionpack-add-on/1.1.1 (org.vaadin.teemusa.gridextensions.wrappinggrid.WrappingGrid). The wrapping of the header looks rather good, but it seems the frontend code is confused as to the amount of space between the header and the footer. I think this because even with a super simple class that mimics a demo I found, it won’t show the last line when I enable wrapping via a button. What am I doing wrong?
Example class, easy to repeat by calling HeaderWrappingDemoWindow.open(false):
import java.util.Random;
import org.vaadin.teemusa.gridextensions.cachestrategy.CacheStrategyExtension;
import org.vaadin.teemusa.gridextensions.client.tableselection.TableSelectionState.TableSelectionMode;
import org.vaadin.teemusa.gridextensions.tableselection.TableSelectionModel;
import org.vaadin.teemusa.gridextensions.wrappinggrid.WrappingGrid;
import com.vaadin.event.ShortcutAction.KeyCode;
import com.vaadin.server.Responsive;
import com.vaadin.shared.ui.MarginInfo;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Component;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.themes.ValoTheme;
@SuppressWarnings("serial")
public class HeaderWrappingDemoWindow extends Window {
public static final String ID = "plan-info-window";
private HeaderWrappingDemoWindow(boolean wrapInitially ) {
addStyleName("profile-window");
setId(ID);
Responsive.makeResponsive(this);
setModal(true);
addCloseShortcut(KeyCode.ESCAPE, null);
setResizable(true);
setHeight(90.0f, Unit.PERCENTAGE);
setWidth(75.0f, Unit.PERCENTAGE);
setClosable(false);
VerticalLayout content = new VerticalLayout();
content.setSizeFull();
content.setMargin(new MarginInfo(true, false, false, false));
setContent(content);
content.addComponent(buildHeader());
HeaderWrapExtensionLayout info = new HeaderWrapExtensionLayout(wrapInitially);
content.addComponent(info);
content.setExpandRatio(info, 1f);
content.addComponent(buildFooter());
}
private Component buildHeader() {
HorizontalLayout footer = new HorizontalLayout();
footer.addStyleName(ValoTheme.WINDOW_BOTTOM_TOOLBAR);
footer.setWidth(100.0f, Unit.PERCENTAGE);
Button ok = new Button("Close");
ok.addStyleName(ValoTheme.BUTTON_PRIMARY);
ok.addClickListener(e->close());
ok.focus();
footer.addComponent(ok);
footer.setComponentAlignment(ok, Alignment.TOP_RIGHT);
return footer;
}
private Component buildFooter() {
HorizontalLayout footer = new HorizontalLayout();
footer.addStyleName(ValoTheme.WINDOW_BOTTOM_TOOLBAR);
footer.setWidth(100.0f, Unit.PERCENTAGE);
return footer;
}
public static void open(boolean wrapInitially ) {
Window w = new HeaderWrappingDemoWindow(wrapInitially);
UI.getCurrent().addWindow(w);
w.focus();
}
private class HeaderWrapExtensionLayout extends VerticalLayout {
private static final String BUTTON_WRAPPING_ENABLED_TEXT = "Turn wrapping off";
private static final String BUTTON_WRAPPING_DISABLED_TEXT = "Turn wrapping on";
private int state;
public HeaderWrapExtensionLayout(boolean wrapInitially) {
setMargin(true);
final Grid grid = new Grid();
final WrappingGrid wrap = WrappingGrid.extend(grid);
TableSelectionModel selectionModel = new TableSelectionModel();
selectionModel.setMode(TableSelectionMode.SHIFT);
grid.setSelectionModel(selectionModel);
generateData(grid, 5, 100);
Grid.HeaderRow headerRow = grid.prependHeaderRow();
headerRow.join(grid.getColumns().get(1).getPropertyId(), grid.getColumns().get(2).getPropertyId());
Grid.HeaderRow headerRow1 = grid.appendHeaderRow();
headerRow1.join(grid.getColumns().get(2).getPropertyId(), grid.getColumns().get(3).getPropertyId());
grid.appendFooterRow();
grid.setSizeFull();
final Button button = new Button(BUTTON_WRAPPING_DISABLED_TEXT);
button.addClickListener(new Button.ClickListener() {
// int state = 0;
public void buttonClick(ClickEvent event) {
// state = (state + 1) % 2;
switch (state) {
case 0:
// Disable wrapping, attempt to restore original behavior
wrap.setWrapping(false);
button.setCaption(BUTTON_WRAPPING_DISABLED_TEXT);
state = 1;
break;
case 1:
// Apply wrapping rules
wrap.setWrapping(true);
button.setCaption(BUTTON_WRAPPING_ENABLED_TEXT);
state = 0;
break;
}
}
});
addComponent(button);
addComponent(grid);
setSizeFull();
setExpandRatio(grid, 1.0f);
CacheStrategyExtension.extend(grid, 5, 0.2d);
if(wrapInitially)
{
addAttachListener(e->{
wrap.setWrapping(true);
wrap.setWrapping(false);
wrap.setWrapping(true);
button.setCaption(BUTTON_WRAPPING_ENABLED_TEXT);
state = 0;
});
}
}
private void generateData(Grid g, int cols, int rows) {
g.addColumn("#");
for (int x = 1; x < cols; ++x) {
g.addColumn("Column with really long title " + (x + 1), String.class);
}
Random r = new Random();
for (int y = 0; y < rows; ++y) {
String[] values = new String[cols];
values[0] = "" + (y + 1);
for (int x = 1; x < cols; ++x) {
values[x] = "" + r.nextInt() + " babies born last year";
}
g.addRow(values);
}
}
}
}
My production code is different, of course, but this is the simplest approximation I could come up with. If you run it by calling HeaderWrappingDemoWindow.open(true), it is even worse on initial load because header rows are spaced apart, sort of covering top row, although at least this time you can see bottom row. Once you click button 2 times, header rows look good, but bottom row or two goes away (covered by footer).