Problem with thead for a grid in a grid

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

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.

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
17585616.jpg

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.

17585749.png

Hi Stuart,

I’ve tried wrapping it, but result was the same.

Hi Daniel,

Did you try without headers? I can not remember if you did.

S.

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.

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)

Hi,

doesn’t change a thing. And I can’t find a solution to make it in another way.

Regards Daniel

Hi Daniel,

Are you able to send over your code so I can have a look at it?

S.

Hi,

I have my code attached.

Thanks for looking.

D
17591332.java (6.41 KB)

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
17594230.png

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)