We have been wrestling with the designer (10) with Java for a while now. I have a fairly simple template with a vertical-layout which contains a label, a grid (default but then I deleted the columns) and another label. I have given the grid an ID of “grid” and ticked the Java check box. In my Java companion class I have set a data provider and added 2 columns. All that appears in the browser (FF) is both labels with a horizontal line between them, which I think is the grid. The data provider is called. It reads a DB with over 10,000 records. The offset and limit are 0 and 50. My Java companion class looks like:
@Tag("work-with-cases")
@HtmlImport("src/work-with-cases.html")
public class WorkWithCases extends PolymerTemplate<WorkWithCases.WorkWithCasesModel> {
@Id("grid")
private Grid<CaseModel> grid;
/** Creates a new WorkWithCases. */
public WorkWithCases() {
grid.setDataProvider(new CaseDataProvider<Object>());
Column<CaseModel> col_ref = grid.addColumn(CaseModel::getId);
col_ref.setHeader("Ref");
Column<CaseModel> col_cust_name = grid.addColumn(CaseModel::getCustomerName);
col_cust_name.setHeader("Customer name");
}
/** This model binds properties between WorkWithCases and work-with-cases.html */
public interface WorkWithCasesModel extends TemplateModel {
// Add setters and getters for template properties here.
}
}
Is what I am trying reasonable or is there an obvious mistake?
Following up from this thread https://vaadin.com/forum/thread/17114273/17132518, in any case, if you are using the work-with-cases as a sub template, you need to use Java tick for work-with-cases in your parent template or use @Uses(WorkWithCases.class) in your parent template’s java companion file.
I had connected the Java grid via the tick in work-with-cases. The template displays okay, and both labels display above and below the grid. I put the label there as a diagnostic. The grid appear collapsed into a single grey line between the 2 labels. If I check the option in the design for height-by-rows then I do see the grid, and my data but as there are 10015 records in the DB table the height of the grid seems to be very large. I just want it to fill the browser window with a scroll bar, just like in all the examples. This is the only way I can get it to show any content, but obviously not what I want. I have tried very hard to set the height of the grid in the style but this seems to be ignored. If I look in the browser inspector then it is all there including my columns with there headings. It is just that the height is 0. My template file is:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/vaadin-ordered-layout/src/vaadin-vertical-layout.html">
<link rel="import" href="../bower_components/vaadin-grid/src/vaadin-grid.html">
<dom-module id="work-with-cases">
<template>
<vaadin-vertical-layout style="width: 100%; height: 100%;" id="vertical-layout-1">
<label>Welcome to CaseView WWWWWWWWWWWWWWWWWWW</label>
<vaadin-grid id="grid" style="width: 100%; height: 100%;"></vaadin-grid>
<label>The bottom of the page</label>
</vaadin-vertical-layout>
</template>
<script>
class WorkWithCases extends Polymer.Element {
static get is() {
return 'work-with-cases';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(WorkWithCases.is, WorkWithCases);
</script>
</dom-module>
Have you tried to set size 100% for the work-with-cases in your parent template?
For example: With your template, I added the work-with-cases to MainView, my code looks like
@HtmlImport("styles/shared-styles.html")
@Route("")
public class MainView extends VerticalLayout {
public MainView() {
WorkWithCases workWithCases = new WorkWithCases();
add(workWithCases);
workWithCases.getElement().getStyle().set("width", "100%");
workWithCases.getElement().getStyle().set("height", "100%");
setSizeFull();
setClassName("main-layout");
}
}
That did work, but the trouble is that I have mainview, then my top menu (tabs with iron-pages) then work-with-cases. If I skip top-menu like in your example above it works fine, but if have top-menu (and I will need it or something like it) then the only way I can get the grid to appear is to set the size specifically by px or vh. I could not get % to work at all. The same applies with width. It will be as wide as the labels I have unless I use px or vw.
I have attached my source if it helps. I do appreciate your help and want to assure you that I have spent some hours trying all sorts of combinations of style settings on the various elements.
I have played with it a bit, the problem is that you need to make the iron-pages and page expand to its full size. I have attached the webapp folder in the attachment. You also need to set your TopMenu template in MainView.java to be full size. e.g.
I tried it on my phone (Samsung 6 edge) and it looks good. The only thing is that the grid didn’t scroll (either side to side as the right hand edge was cut off, or vertically through the records). Should we expect that or is there something else we need to do?
