Grid in Vertical layout

Flow
1

Hello guys,

I’ve been trying to create a table in my Vaadin app and been debugging for a while, when I realized that my Grid (used as table) wasn’t showing on the page because it was added to a VerticalLayout (directly). I haven’t found anything on why this happens, or how to solve it, but I wouldn’t guess it’s the expected behavior.

Any words on this? I’m pretty new to Vaadin, so forgive my lack of knowledge

2

I don’t think the problem is related to VerticalLayout. What do you mean with, “wasn’t showing on the page”? Can you see the Grid element on the body? The Grid is present in body but doesn’t show the data?
Follow an example:

@Route("foo")
public class MyView extends VerticalLayout implements RouterLayout {

    public class Foo {
        private String key;
        private String value;

        public Foo(String key, String value){
            this.key = key;
            this.value = value;
        }

        public String getKey() {
            return key;
        }

        public String getValue() {
            return value;
        }
    }

    public MyView(){
        VerticalLayout verticalLayout = new VerticalLayout();
        /* Another way to define the Grid */
        /**
         * Grid<Foo> grid = new Grid<>(Foo.class);
         */
        Grid<Foo> grid = new Grid<>();
        grid.addColumn(Foo::getKey);
        grid.addColumn(Foo::getValue);
        
        grid.setItems(new Foo("foo","bar"),new Foo("bar","foo"));
        verticalLayout.add(grid);
        add(verticalLayout);
    }
}
3 
@Route("")
public class MyView extends Div {
	
	public MyView() {
		VerticalLayout vl = new VerticalLayout();
		add(v1);
		
		Grid<Foo> grid = new Grid<>()
		Grid<Foo> grid2 = new Grid<>()
		/*
		...
		*/
		add(grid);
		v1.add(grid2);
	}
}

I was just quickly dropping it together, not really a fully working code, but what I want to say with that is I see grid1 normally, like I’d expect, however, I can’t see grid2, like it was never added in the first place.

4

Could you paste your full code. I can’t replicate the issue, you example works like a charm here.

5

I’m starting to think that I didn’t include the required artifacts in maven.

Could you show the pom.xml for which the example works correctly?

6

I don’t think the problem is related to the artifacts.

 <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <type>pom</type>
                <scope>import</scope>
                <version>10.0.0.beta11</version>
            </dependency>
        </dependencies>
    </dependencyManagement>
	
	 <dependency>
		<groupId>com.vaadin</groupId>
		<artifactId>vaadin-core</artifactId>
	</dependency>
7

I only had that thought because in some other case (I don’t remember exactly) including the right dependency solved a similar problem, especially when messing around with NodeJS and Polymer elements. I think I did download the grid polymer element, as well as the vertical-layout one, so I still don’t know where the problem might lie in.

I can’t post any actual code right now, but it was this exact same scenario, where if I had the Grid layout added to the constructor directly it worked, if I added it to a vertical layout it didn’t show a thing.

Similarly, when the base element (MyView in this case) was extended from VerticalLayout, the Grid didn’t show again, only if it was extended from Div, like in the example.

I’m using the beta7 version IRC

8

Try to update vaadin-flow to latest version.

9

The problem was indeed with my messy maven imports. I double checked it from a starter project, now everything is flawless.

Thanks for your time

10

Hi László Stahorszki, I’ve a requirement PFA.how can we achieve this using grid if not than what will be alternative. can you please provide code snippet. can you please help me out here. We are using vaadin-8.

17597598.png