1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
title: TreeTable
order: 23
layout: page
---
[[components.treetable]]
= [classname]#TreeTable#
ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/tree-table"]
endif::web[]
[classname]#TreeTable# is an extension of the [classname]#Table# component with
support for a tree-like hierarchy in the first column. As with
[classname]#Tree#, the hierarchy is determined by the parent-children
relationships defined in the [interfacename]#Container.Hierarchical# interface.
The default container is [classname]#HierarchicalContainer#, but you can bind
[classname]#TreeTable# to any container implementing the interface.
[[figure.components.treetable.basic]]
.[classname]#TreeTable# Component
image::img/treetable-basic.png[]
As with [classname]#Tree#, you can define the parent-child relationships with
[methodname]#setParent()#, as is shown in the following example with numeric
item IDs:
[source, java]
----
TreeTable ttable = new TreeTable("My TreeTable");
ttable.addContainerProperty("Name", String.class, null);
ttable.addContainerProperty("Number", Integer.class, null);
// Create the tree nodes and set the hierarchy
ttable.addItem(new Object[]{"Menu", null}, 0);
ttable.addItem(new Object[]{"Beverages", null}, 1);
ttable.setParent(1, 0);
ttable.addItem(new Object[]{"Foods", null}, 2);
ttable.setParent(2, 0);
ttable.addItem(new Object[]{"Coffee", 23}, 3);
ttable.addItem(new Object[]{"Tea", 42}, 4);
ttable.setParent(3, 1);
ttable.setParent(4, 1);
ttable.addItem(new Object[]{"Bread", 13}, 5);
ttable.addItem(new Object[]{"Cake", 11}, 6);
ttable.setParent(5, 2);
ttable.setParent(6, 2);
----
Some container types may allow defining hierarchies if the container data
itself, without explicitly setting the parent-child relationships with
[methodname]#setParent()#.
Unlike [classname]#Tree#, a [classname]#TreeTable# can have components in the
hierarchical column, both when the property type is a component type and when
the tree table is in editable mode.
For other features, we refer you to documentation for [classname]#Table#, as
given in
<<dummy/../../../framework/components/components-table#components.table,"Table">>.
[[components.treetable.collapsed]]
== Expanding and Collapsing Items
As in [classname]#Tree#, you can set the expanded/collapsed state of an item
programmatically with [methodname]#setCollapsed()#. Note that if you want to
expand all items, there is no [methodname]#expandItemsRecursively()# like in
[classname]#Tree#. Moreover, the [methodname]#getItemIds()# only returns the IDs
of the currently visible items for ordinary [interfacename]#Hierarchical# (not
[interfacename]#Collapsible#) containers. Hence you can not use that to iterate
over all the items, but you need to get the IDs from the underlying container.
[source, java]
----
// Expand the tree
for (Object itemId: ttable.getContainerDataSource()
.getItemIds()) {
ttable.setCollapsed(itemId, false);
// As we're at it, also disallow children from
// the current leaves
if (! ttable.hasChildren(itemId))
ttable.setChildrenAllowed(itemId, false);
}
----
In large tables, this explicit setting becomes infeasible, as it needs to be
stored in the [classname]#TreeTable# (more exactly, in the
[classname]#HierarchicalStrategy# object) for all the contained items. You can
use a [interfacename]#Collapsible# container to store the collapsed states in
the container, thereby avoiding the explicit settings and memory overhead. There
are no built-in collapsible containers in the Vaadin core framework, so you
either need to use an add-on container or implement it yourself.
|
