Component not displaying

Darren28 · April 26, 2018, 7:00pm

I’m new to Vaadin, and trying out Vaadin 10 to see if it’s a fit for our company. I have used the Base Starter for Vaadin Flow and am trying to simply display a list of Contacts from our database (Just JDBC, no JPA)

This works:

MainView.java

@HtmlImport("styles/shared-styles.html")
@Route("")
@PageTitle("q-contact")
public class MainView extends VerticalLayout 
{
    public MainView() 
    {
		try
		{
	    	String sQuery = "SELECT * FROM t_contact where firstname != '' and lastname != '' and city != '' LIMIT 10";
	        List<Contact> contactList = DbAccess.getContactList(sQuery);  
	        
	        Grid<Contact> contactGrid = new Grid<Contact>();
	        contactGrid.setItems(contactList);
	        
	        contactGrid.addColumn(Contact::getFirstName).setComparator((contact1, contact2) -> contact1.getFirstName()
	                .compareToIgnoreCase(contact2.getFirstName())).setHeader("First Name").setSortable(true);
	        contactGrid.addColumn(Contact::getLastName).setHeader("Last Name").setSortable(true);

	    	HorizontalLayout main = new HorizontalLayout(contactGrid);
			
	    	main.setAlignItems(Alignment.START);
		    main.setSizeFull();
		    
		    this.setHeight("100%");
		    this.setWidth("100%");
	    	
	    	this.add(main);
	    	    	
	        setClassName("main-layout");
        }
		catch(Exception e)
		{
			 System.out.println(e.getMessage());
		}
    }
}

The list displays as expected.

This does not work:

MainView.java

@HtmlImport("styles/shared-styles.html")
@Route("")
@PageTitle("q-contact")
public class MainView extends VerticalLayout 
{
    public MainView() 
    {
		try
		{
	    	ContactList contactList = new ContactList();
	    	HorizontalLayout main = new HorizontalLayout(contactList);
	    		    	
	    	main.setAlignItems(Alignment.START);
		    main.setSizeFull();
		    
		    this.setHeight("100%");
		    this.setWidth("100%");
	    	
	    	this.add(main);
	    	    	
	        setClassName("main-layout");
		}
		catch(Exception e)
		{
			 System.out.println(e.getMessage());
		}
    }
 }

ContactList.java

@Tag("contact-list")
@HtmlImport("contact-list.html")
public class ContactList extends PolymerTemplate<ContactList.ContactListModel> {

	@Id("contactGrid")
	private Grid<Contact> contactGrid;
    
	public interface ContactListModel extends TemplateModel {

    }
    
    public ContactList()
    {
        try
        {
          String sQuery = "SELECT * FROM t_contact where firstname != '' and lastname != '' and city != '' LIMIT 10";
          List<Contact> contactList = DbAccess.getContactList(sQuery);  
          
          contactGrid.setItems(contactList);
          
	      contactGrid.addColumn(Contact::getFirstName).setComparator((contact1, contact2) -> contact1.getFirstName()
          .compareToIgnoreCase(contact2.getFirstName())).setHeader("First Name").setSortable(true);
		  contactGrid.addColumn(Contact::getLastName).setHeader("Last Name").setSortable(true);
        }
        catch(Exception e)
        {
          System.out.println(e.getMessage());
        }
    }
}

contact-list.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-grid/src/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-ordered-layout/src/vaadin-horizontal-layout.html">

<dom-module id="contact-list">
    <template>
<vaadin-grid items="[[items]
]" id="contactGrid"></vaadin-grid>
</template>

    <script>
        class ContactList extends Polymer.Element {
            static get is() {
                return 'contact-list';
            }
        }
        customElements.define(ContactList.is, ContactList);
    </script>
</dom-module>

The list does not display. There is a vertical line on the left side of the browser screen. Inspecting the html source for both the working and non-working screens in the browser (Chrome) indicates very similar markup.

The non-working screen has this markup:

<contact-list>
#shadow-root (open)
<vaadin-grid id="contactGrid" overflow="right" style="touch-action: none;">
	<vaadin-grid-column>
		<template> </template>
		<template class="header">
			<vaadin-grid-sorter path="col0">First Name</vaadin-grid-sorter>
		</template>
	</vaadin-grid-column>
	<vaadin-grid-column>
		<template> </template>
		<template class="header">
			<vaadin-grid-sorter path="col1">Last Name</vaadin-grid-sorter>
		</template>
	</vaadin-grid-column>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-0">
		<vaadin-grid-sorter path="col0">First Name</vaadin-grid-sorter>
	</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-1">
		<vaadin-grid-sorter path="col1">Last Name</vaadin-grid-sorter>
	</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-2"/>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-3"/>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-4"> </vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-5"> </vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-6"> </vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-7"> </vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-8">first</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-9">last</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-10">kim</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-11">Stewart</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-12">Jane</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-13">Kididlehoffer</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-14">SANDY</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-15">THOMAS</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-16">Alan</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-17">Johnson</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-18">ALLAN</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-19">SMITH</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-20">P.D.</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-21">Lion</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-22">Jesse</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-23">Winter</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-24">freeda</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-25">jethro</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-26">BRUCE D.</vaadin-grid-cell-content>
	<vaadin-grid-cell-content slot="vaadin-grid-cell-content-27">ROBERTS</vaadin-grid-cell-content>
</vaadin-grid>
</contact-list>

The working example has almost the same markup, only it doesn’t have the and #shadow-root (open)

From what I see, the only difference is putting the vaadin-grid in my contact-list component. I can not spot the problem. Anyone have any ideas? Thanks.

Gilberto15 · April 27, 2018, 5:19am

Hi Darren,

The problem is that Grid needs to have a parent with a well defined size. You can set the size directly to your ContactGrid component from the server (by making it implement the HasSize interface) or you can make it on the template file.

You can also make your component to have a display: block, like this:

<dom-module id="contact-list">
    <template>
	    <style>
		  :host {
			display: block;
		  }
		</style>
        <vaadin-grid items="[[items]
]" id="contactGrid"></vaadin-grid>
    </template>
<!-- ... -->

That should do it.

You can find more information about how to style the shadow-DOM over here: https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom

Jouni1 · April 27, 2018, 6:12am

When you create a new custom element (using a dom-module in Polymer/Flow), you should always explicitly set the display property in CSS to either block, flex, inline-block or inline-flex. It’s very rare that you want it to be the default inline, which can’t be given explicit size with CSS.

Darren28 · April 27, 2018, 2:36pm

Thank you both for the help. That solved it. Knew it would be something simple… now on to list pagination