Openable table row

Vaadin 6 / 7 / 8 Framework UI
1

Hi,
is there any easy way to implement a table that has rows that can be opened, like in here: [url=http://img265.imageshack.us/img265/8572/itmilldemozs0.jpg]
[img=http://img265.imageshack.us/img265/8572/itmilldemozs0.jpg]

[/img]
[/url]
I have tried with getTable().addItemAfter(timeTable.getId(), rowLayout); without much success because when I click open button it opens one row after current row, but in this case it’s empty and the row where I clicked also lost some content, see [url=http://img401.imageshack.us/img401/5167/itmilldemo2yo6.jpg]
[img=http://img401.imageshack.us/img401/5167/itmilldemo2yo6.jpg]

[/img]
[/url]

Here’s my getTable().addContainerProperty(PROPERTY_IS_SELECTED, Button.class, "", "", null, null); getTable().addContainerProperty(PROPERTY_NAME, CustomLayout.class, null, "", null, null); [code]
for (TimeTable timeTable : timeTables) {
CheckBox checkbox = new CheckBox(“”, this, “checkboxClick”);
checkbox.setData(timeTable);

		Button button = new Button("Näytä", this, "buttonClick");
		button.setData(timeTable);

		CustomLayout rowLayout = new CustomLayout("rema/time_table_row");
		rowLayout.addComponent(new Label(timeTable.getName()), "nameLabel");
		rowLayout.addComponent(button, "infoButton");

		// This is much faster than adding item properties one by one
		getTable().addItem(new Object[] { checkbox, rowLayout },
			timeTable.getId());

		counter++;
	}

[/code][code]
public void buttonClick(Button.ClickEvent event) {
TimeTable timeTable = (TimeTable) event.getButton().getData();

	CustomLayout rowLayout = new CustomLayout("rema/time_table_row");
	rowLayout.addComponent(new Label("TESTIII"), "nameLabel");

	getTable().addItemAfter(timeTable.getId(), rowLayout);
}

[/code]

  • markus
2

Would PopupView be good enough solution for your problem? Instead of expanding the table row, it would show a popup with all the info you want to present. The implementation is lightweight (as lazy as possible) and should be suitable for tables with a lot of data.

3

That was also my suggestion but we have to wait until monday when our graphic returns back to office and see what he things about the idea. I’m sure that he would rather expand the table row but lets see…

  • markus
4

To be specific: it’s not possible to make such a thing with the current Table implementation, mainly due to the client-side implementation: it’s lazy-loading, and needs the rows to be equally high to be able to figure out when to load more stuff, and how much. It’s conceivable that a future version could support variable-height rows, but not right now - with all the current features, it’s already quite complex…

There is a “paging” table in the works, which will be less dynamic than the current table (probably no d&d columns and such), but will support things like your example. It’s quite high on the list of new components to do once we get 5.3 out the door.

Another solution would be to actually not use Table, but a layout with some styling. This might be the best solution - judging from the mockup, you do not actually need the advanced features that Table provides.

(I’ll take this opportunity to brag a little: what some other frameworks call ‘table’ is feature-wise closer to our layouts in some cases; our Table is a real table ™ with scrolling, row/column headers, d&d columns, column collapsing, data binding, etc… :wink:

Best Regards,
Marc