Daniel833
(Daniel Becker)
March 27, 2019, 5:50pm
1
Hi,
I have an grid with a inner detail which is also a grid.
Now it comes that the headline floats over the results. And the headline isn’t always the same size. For the first result the headline is as big as one result-line and after that it has 1.5 result-lines.
I try to manipulate it via css and gave the inner grid an own className, but the problem seems to be something deeper I’m not able to find. I tried to set the visibility of thead to hidden, but my own css isn’t active.
Can someone help me.
Best regards
Daniel Becker
Tatu2
(Tatu Lund)
March 27, 2019, 7:34pm
2
Could you tell us which version of Vaadin you are using and possibly include screen shot to illustrate your problem. I think that it is difficult to explain your issue fully just by words.
Daniel833
(Daniel Becker)
March 28, 2019, 10:07am
3
Hi,
okay, this won’t be a problem. I’m using vaadin 12.0.7 with grid 5.3.2.
The screenshot in the attachment shows in the first circle the headline, the second circle the headline but with an other hight and for the third circle I have made the visibility hidden so you can see that there are five detail rows not only four.
This is the code for the inner Grid:
private Grid<ReferenceElement> makeInlineGrid(SearchResultElement searchResultElement) {
Map<String,String> outputMapping = getOutputMapping();
List<ReferenceElement> dataList = makeDataList(searchResultElement);
Grid<ReferenceElement> inlineGrid = new Grid<>();
inlineGrid.setDataProvider(new ListDataProvider<>(dataList));
inlineGrid.addColumn(referenceElement -> referenceElement.getReferenceSystem().displayName()).setHeader("System");
for(String key : outputMapping.keySet()) {
String field = outputMapping.get(key);
inlineGrid.addColumn(referenceElement -> referenceElement.getValue(field)).setHeader(key);
}
inlineGrid.addColumn(referenceElement -> referenceElement.getState().displayName()).setHeader("Status");
inlineGrid.setSizeFull();
inlineGrid.setHeightByRows(true);
inlineGrid.addThemeVariants(GridVariant.LUMO_NO_BORDER);
inlineGrid.setClassName("inlineGrid");
return inlineGrid;
}
Hope this makes it clearer.
Regards Daniel
Stuart
(Stuart Robinson)
March 28, 2019, 11:04am
4
Hi Tatu,
Just to add, I have a Grid in the GridDetails, but I wrap mine in a VerticalLayout with a Span (Label) and I hide the headers and I have no format issues.
Daniel833
(Daniel Becker)
March 28, 2019, 12:45pm
5
Hi Stuart,
I’ve tried wrapping it, but result was the same.
Stuart
(Stuart Robinson)
March 28, 2019, 12:46pm
6
Hi Daniel,
Did you try without headers? I can not remember if you did.
S.
Daniel833
(Daniel Becker)
March 28, 2019, 1:48pm
7
Hi,
I’ve trieb before, but the headers didn’t go away. Maybe you can give me your code and I try it with your solution?
D.
Stuart
(Stuart Robinson)
March 28, 2019, 2:09pm
8
Ok, I’ve attached my grid styles (grid.html)
I’ve created a new GridProvider component which extends Grid which I can apply the styles too…
@Tag("vaadin-grid")
@HtmlImport("bower_components/grid-provider/grid.html")
public class GridProvider<T> extends Grid<T> { }
Then I use the following…
GridProvider<Hdphdrp> grid = new GridProvider<>(Hdphdrp.class); // hdphdrp is just my class to use in the grid
My detailsRenderer looks like this…
grid.setItemDetailsRenderer(new ComponentRenderer<>(item -> {
VerticalLayout div = new VerticalLayout();
div.getStyle().set("padding", "5px");
List<Hdphdrp> list = caseRepository.findByParent(item.getChiden()); // Getting the contents for the subgrid
if (!list.isEmpty()) {
GridProvider<Hdphdrp> details = new GridProvider<>(Hdphdrp.class); // Same kind of grid
details.setSizeFull();
details.getElement().setAttribute("theme", "compact no-headers");
Span children = new Span("Child Cases");
children.getStyle().set("font-weight", "bold");
children.getStyle().set("margin", "5px");
details.setDataProvider(new ListDataProvider<>(list));
details.setHeightByRows(true);
div.setSizeFull();
div.add(children, details);
} else {
Span nochildren = new Span("No Child Cases Found.");
div.add(nochildren);
}
return div;
}));
Hope that makes sense.
I guess the key bits are:
details.setSizeFull();
details.getElement().setAttribute("theme", "compact no-headers");
details.setHeightByRows(true);
and the VerticalLayout wrapping it up.
S.
17586213.html (10.2 KB)
Daniel833
(Daniel Becker)
March 29, 2019, 8:55am
9
Hi,
doesn’t change a thing. And I can’t find a solution to make it in another way.
Regards Daniel
Stuart
(Stuart Robinson)
March 29, 2019, 10:32am
10
Hi Daniel,
Are you able to send over your code so I can have a look at it?
S.
Daniel833
(Daniel Becker)
April 1, 2019, 3:01pm
11
Hi,
I have my code attached.
Thanks for looking.
D
17591332.java (6.41 KB)
Stuart
(Stuart Robinson)
April 3, 2019, 9:29am
12
Hi Daniel,
I added your code to my project and the grid and in-line grid look fine. I’ll try a fresh project later today.
Stuart
Daniel833
(Daniel Becker)
April 5, 2019, 10:37am
13
Hi,
thanks for testing. But have you tried it in Firefox or Chrome. I have some issues in this firefox at work with vaadin.
I have the html attached.
The inlineGrid is in lines 84, 118 and 152.
Thanks for helping.
D.
17598278.html (73.5 KB)