Loading...
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.

Product icon
TUTORIAL

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

Gridlayout's components drawn on top of each other when used in grid's deta

Simo Tuokko
6 years ago Feb 11, 2016 7:47am

Hi,

We are trying to use GridLayout to show details in grid. When opening detail by clicking on a row all components in the GridLayout are drawn on top of each other. When opening another row the previous one is drawn correctly. Tried also setting column expandratios but that didn't help.

Here is simple sample program to demonstrate the problem.

@Override
    protected void init(VaadinRequest vaadinRequest) {
        GridLayout gridLayout = new GridLayout(1,1);
        
        final Grid grid = new Grid();
        grid.setWidth("1000px");
        // Define some columns
        grid.addColumn("text", String.class);
        grid.addColumn("number", Integer.class);

        // Add some data rows
        grid.addRow("Row 1", 1);
        grid.addRow("Row 2", 2);
        grid.addRow("Row 3", 3);
        
        grid.getColumn("text").setExpandRatio(2);
        grid.getColumn("number").setExpandRatio(2);
        
        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) {

                GridLayout layout = new GridLayout(3,1);
                
                layout.setSizeFull();
                
                /*layout.setColumnExpandRatio(0, 2);
                layout.setColumnExpandRatio(1, 2);
                layout.setColumnExpandRatio(2, 2);*/
                
                layout.addComponent(new Label("One"),0 , 0);
                layout.addComponent(new Label("Two"),1 , 0);
                layout.addComponent(new Label("Three"),2 , 0);
                
                return layout;
            }
        });
        gridLayout.addComponent(grid, 0, 0);
        this.setContent(gridLayout);
    }

Br,
Simo Tuokko

Ilia Motornyi
6 years ago Feb 11, 2016 2:08pm
Simo Tuokko
6 years ago Feb 12, 2016 6:33am
Mario Van Steenberghe
5 years ago Nov 28, 2016 1:09pm
wenxiang tao
4 years ago Aug 04, 2017 6:55pm