Howto: TreeTable

Vaadin 6 / 7 / 8 Framework UI
1

Hi!
Can someone please write a short snippet on how to:

  1. Fill a treeviewtable with data (f.e. Name, icon, description, dropdown). Especially focus on how to have different components in the columns of a row. The samples provided hide that kind of details…

  2. How to use a Collapsible (?) container, to use as datasource for a treeViewTable.

?!

TIA

2

Sorry for my confusion… I am talking about:
Vaadin TreeTable - http://vaadin.com/directory#addon/vaadin-treetable

3

When I add a Resource column to my TreeTable:

       table.addContainerProperty("Enabled", Resource.class, 0);

and add an element, setting this property to a ThemeResource:

item.getItemProperty("Enabled").setValue(imgCheckedOff);

It is rendered as Text, the name of the picture, but not the picture itself!?

4

I see that

table.setItemIconPropertyId("Type");

makes a image-column for the “type”-column.

Can I add further image columns to a TreeTable - and how do I do that?

5

Okay, no reply so long… anyway.

I see that it is possible to set at least on picture per row:

table.setItemIconPropertyId("Type");

But how can I prevent that column then from rendering twice: once as icon column and once as default text column?

TIA

6

Come on - anyone!?

7

Can I have every component at the TreeTable rows/columns as at the default vaadin table? How?
How can I hide columns from being displayed?

TIA

8

Okay, I can see I can display buttons and checkboxes in a TreeTable. How do I show one or more images?
The only way I found so long by:

setItemIconPropertyId

just allows one single image?
Is it supported with more than one image-columns on vaadin table / TreeTable?

9

Hi!

You can add images to cells if you use Embedded component.

cheers,
matti

10

Thanks a lot. That worked it out!
Examples show use of “Resource” as column type - which does not work for me.

THANKS!

11

Another question, vaadin TreeTable:

Assuming[code]
Node0

  • SubNode0
  • SubNode1
    [/code]

When SubNode1 is clicked in a TreeTable, how can I detect all nodes that are “above” Subnode1 as which node being the parent of SubNode1 - out of the EventHandler:

treeTable.addListener(new ItemClickEvent.ItemClickListener() {
            public void itemClick(ItemClickEvent e) {
            //impl goes here
            }
}

?

TIA

12

Another question: Sorting.

in http://vaadin.com/book/-/page/components.table.html sorting is mentioned, but its not shown how to implement custom sorting for table/treeTable.

Please post a sample on how to sort rows of a table.

Thanks!

13

Q1: Table.getParent(ItemId) does the trick.

Any help on Q2 (sorting) appreciated!!!

14

Which columns are sortable depends on what Table.getSortablePropertyIds() returns, so you can simply click the table header cells to sort those columns. You can override the method if necessary.

If I remember correctly, by default, columns whose types in the container implement Comparable are sortable. Therefore, if using a custom data type, you can implement custom sorting by implementing Comparable in your data type.

You can also handle custom sorting by implementing your own com.vaadin.data.util.ItemSorter and setting it for the container of the table. See com.vaadin.data.util.DefaultItemSorter. One test using a custom sorter is in
http://dev.vaadin.com/svn/versions/6.6/tests/src/com/vaadin/tests/Components.java
.

15

Perfect - thank you!!

16

Two more comments after using vaadin treeTable now for a while:

  1. I think its quite “nifty” to set TreeNode-Properties on the table itself for each node, instead of setting properties on the nodes, which are added to the table on the way…
  2. The behaviour of disabling children for an item, adding children for that item, which will we attached to the next node having children allowed is strange. And can quickly lead to unexpected behaviour. Consequently I would runtime expect to throw an exception when adding children to a node that does not allow it. Or just drop that property, and render the child expander just in case children exist - most feasible and intuitive.

Pretty great work anyway - Thanks Vaadin Team!!

17

If adding works as you say, I would consider that a bug - please
file a ticket
.

As for the latter suggestion, I believe it would in practice eliminate much of lazy loading in many applications, as you would have to do a large number of checks to see if certain nodes actually have children - sometimes that check can be very expensive.

18

Okay, want to - but my forum login does not apply there? What is the login to use then?

I think this is the default behaviour of all other TreeViews if been working with so long. Even, as traversing the tree server side, should not be the big deal…

19

Did not see the “register” menu entry at first…

Ticket is here: http://dev.vaadin.com/ticket/7066

Rock on - Vaadin Team!!!

20

Hi,

How did you put icons in the table? Do you have code snippet?

The other two problems that I have on my hand are that I have to show data in Pivots and I am using TreeTable for this.

I am posting two images to elaborate what I am asking.

One is how to put text “Grand Totals” in the last row as I have show in image pivot.png

the code I am using is…

    if(hasGrandTotals){
	    Object [] totalsPos = new Object [pivotDepth]

;
for(int i =0;i<headers.length;i++){
if(totals.containsKey(headers[i]
)){
totalsPos[i]
= totals.get(headers[i]
);
}else{
totalsPos[i]
= “”;
}
}
///////////////// This is here that I am putting value in the last row that is grand totals row
Object addGrandTotals = tr.addItem(totalsPos,“GTOT”);
// tr.setColumnHeader(“GTOT”, “G. Totals”);
//System.out.println(" tr.getContainer "+ tr.getContainerProperty(addItems[1]
,“School”).getValue());
tr.setChildrenAllowed(“GTOT”, false);
}

The other problem is that when now I have to show pivot like this in TreeTable or using some other idea like using Labels etc or other API to show Pivot like in the image file pivot2.gif

Is there a way that will enable us to use wrapper around GWT component so that GWT Pivot api can be used to display Pivot tables in Vaadin…

Thanks

Adil
11716.png
11717.gif