Multiple Grid Lines Detail

Hi,

I’m using a Grid to present a searchresult for the user.
The customer wants that there are only few fields in the result-table and the user should be able to expand the result to see the other fields.
I found the expanding grid was the perfect solution for this demand.
But at the moment I’m only able to expand one line at the time, but the customer wants that the user should be able to expand all lines at the same time. Is it possible to configure the grid that lines won’t close when I open another and is it possible to expand the lines by code so that I’m able to make a button to expand/collapse all lines at once.

And when I’m on itemDetailRenderer:
is it possible that I don’t use the fulltext component?
My resultset consists of one ore more objects where each represents a result out of another query. At coding time I do not know how many objects there are in my resultset so I have to iterate over it until there are no more objects. Same with the columns because the user is able to deactivate columns. So I have a resultset with an unknown number of columns and an unknown number of rows.
Anybody an idea how to build it?
I have an pure java to html code example out of my first project (without Vaadin) but now I want to use pure Vaadin 12.

Thanks for your help and advice.
Regards Daniel

Hi Daniel,

I disable visibleOnClick and then use a click listener to toggle the itemDetails to be displayed or not.

grid.setDetailsVisibleOnClick(false);
grid.addItemClickListener(new ComponentEventListener<ItemClickEvent<MyObject>> () {	
			@Override
			public void onComponentEvent(ItemClickEvent<MyObject> event) {
			if (event.getItem() != null) {
					MyObject toShow = event.getItem();
					if (toShow.hasSomethingToShow()) {
						grid.setDetailsVisible(toShow, !grid.isDetailsVisible(toShow)); //Switches between show and hide.
					}
			}
		});

I also use another grid as the itemDetailsRenderer and hide the headers…

grid.setItemDetailsRenderer(new ComponentRenderer<>(item -> {
			VerticalLayout div = new VerticalLayout();
			List<MyObject> list = repository.findWhateverImLookingFor();
			
			Grid<MyObject> details = new Grid<>();
			details.setSizeFull();
			details.addThemeNames("no-row-borders", "row-stripes", "no-headers");
			if (!list.isEmpty()) {				
				details.setDataProvider(new ListDataProvider<>(list));
				details.setHeightByRows(true);
				div.setSizeFull();			
				div.add(details);				
			}
			return div;
		}));

Regards,

Stuart

Hi,

wow. That was almost completely everything I wanted to know. I find the API is very hard to read. The only thing I can’t find is a method for opening all details.

And is it possible to set a column bold without using CSS?

But thank you very much this far.

Best regards
Daniel

There is one thing in the format I don’t understand I have a Screenshot in the attatchment.
The first detail is formatted perfectly, but the other ones aren’t and I don’t know why.

Best regards
Daniel
17538700.png

Hi Daniel,

There isn’t a method for opening all the details, but you can use the following if you’ve populated your grid from a list…

		Button b = new Button("Expand", VaadinIcon.EXPAND_FULL.create(), click -> {
			myList.forEach(item -> grid.setDetailsVisible(item, true)); // true, or !repository.findWhateverI'mLookingFor().isEmpty()
		});

Though it only works after the grid has been displayed, hence why I’ve put it into a button.

For the bold column, you need a componentRenderer…

		grid.addColumn(new ComponentRenderer<Component, MyObject>(item  ->  {		
			Span span = new Span(item.theBoldField());
			span.getElement().getStyle().set("font-weight", "bold");
			return span;
		}));

Regards,

Stuart

Regarding the screenshot, which version of Vaadin are you using?

You may want to set the grid size to the number of rows…

	grid.setHeightByRows(true);

Or maybe setSizeFull();

I found the details formatting was fixed in Vaadin 12.3/4 IIRC.

Stuart

Hi,

I thought about the iterator myself but hoped to find a more elegant way.

Here’s my 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);

		return inlineGrid;
	}

I’m using Vaadin Core 12.0.4 and Vaadin Grid 5.2.5.
And while testing I’ve seen that the headline is in front of the first real gridline so the two results you can see in the screenshot are three.

Best regards
Daniel

Perhaps it was 12.0.5 that fixed the formatting for me :slight_smile: :slight_smile:

I’m on 2.0.7 now and the formatting is fine. Prior to that the ‘details’ covered the entire row.

Stuart

Hi,

I upgraded now to Core 12.0.7 and newest Grid but still looks the same.

Daniel

Interesting. The only difference I can see is that I’ve wrapped my grid in a VerticalLayout.

Edit:
I set the div (verticallayout) to full size too.

Now i’ve tried it with Div and VerticalLayout but t stays the same. The Grid itself is the problem in the HTML but I can’t find the css tag which makes the problem.

How odd. From your screenshot it seems its the headers in the 2nd and 3rd grid that are causing the problems. (I’m not using headers in my details grids… I can give it a try with headers tomorrow.)

S.

No the first Grid is incorrect either. there should be a third row behind the header.
And deleting the header didn’t work for me with your code.
Then try tomorrow and I hope you get the same problem so that isn’t my fault.

Daniel

There seems to be a major bug in interpreting the css in Firefox and IE.
I have the same issue on this page.

In Chrome everything is okay, but in Firefox and IE I cant see the line under the Menubar where I can switch to My Posts or Recent Posts. It’s behind the Menu.

Should be a Problem in the Flex-Layout. But I can’t find the correct setting to show it right.

Can somebody with a better css understanding please fix this?

Regards Daniel

Hi Stuart, Daniel,

just want to thank both of you. Saved me probably a lot of time.

Dirk

My way:

	/**
	 * diro, 20200428
	 * expand all Details
	 */
	private void expandAll() {
		gvReport.getRows().stream().forEach(pvReportRow -> {
			gvMainView.getGvGrid().setDetailsVisible(pvReportRow, true);
		});
	}
	
	
	/**
	 * diro, 20200428
	 * close all
	 */
	private void closeAll() {
		gvReport.getRows().stream().forEach(pvReportRow -> {
			gvMainView.getGvGrid().setDetailsVisible(pvReportRow, false);
		});
	}