|
|
@@ -87,25 +87,16 @@ The caption and the icon of tree items is generated by the [classname]#ItemCapti |
|
|
|
object, which supports selection listeners and data binding. For more details, see link:<<dummy/../../../framework/datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>. |
|
|
|
The [classname]#Tree# also supports the shortcut method [methodname]#addSelectionListener()#. |
|
|
|
|
|
|
|
//// |
|
|
|
todo not implemented yet. |
|
|
|
[classname]#Tree# also emits [classname]##ItemClickEvent##s when items are clicked. |
|
|
|
This way you can handle item clicks also when selection is not enabled or you want special user interaction specifically on clicks. |
|
|
|
|
|
|
|
This way you can handle item clicks also when you want special user interaction specifically on clicks. |
|
|
|
|
|
|
|
[source, Java] |
|
|
|
---- |
|
|
|
tree.addItemClickListener( |
|
|
|
new ItemClickEvent.ItemClickListener() { |
|
|
|
public void itemClick(ItemClickEvent event) { |
|
|
|
// Pick only left mouse clicks |
|
|
|
if (event.getButton() == ItemClickEvent.BUTTON_LEFT) |
|
|
|
Notification.show("Left click", |
|
|
|
Notification.Type.HUMANIZED_MESSAGE); |
|
|
|
} |
|
|
|
}); |
|
|
|
tree.addItemClickListener(event -> |
|
|
|
Notification.show("Click", |
|
|
|
Notification.Type.HUMANIZED_MESSAGE) |
|
|
|
); |
|
|
|
---- |
|
|
|
//// |
|
|
|
|
|
|
|
[[components.tree.expandcollapse]] |
|
|
|
== Expanding and Collapsing Nodes |
|
|
@@ -138,13 +129,11 @@ tree.addCollapseListener(event -> log("Item collapsed: " + event.getCollapsedIte |
|
|
|
The return types of the methods `getExpandedItem` and `getCollapsedItem` are the same as the type of the [classname]#Tree# the events originated from. |
|
|
|
Note that collapse listeners will not be triggered for any expanded subtrees of the collapsed item. |
|
|
|
|
|
|
|
//// |
|
|
|
todo not implemented yet |
|
|
|
[[components.tree.node.collapsing]] |
|
|
|
== Prevent Node Collapsing |
|
|
|
|
|
|
|
[classname]#Tree# supports setting a callback method that can allow or prevent the user from collapsing an expanded node. |
|
|
|
It can be set with [methodname]#setItemCollapseAllowedProvider# method, that takes a [interfacename]#SerializablePredicate#. |
|
|
|
It can be set with [methodname]#setItemCollapseAllowedProvider# method, that takes a [interfacename]#ItemCollapseAllowedProvider#. |
|
|
|
For nodes that cannot be collapsed, the [literal]#++collapse-disabled++# class name is applied to the expansion element |
|
|
|
|
|
|
|
Avoid doing any heavy operations in the method, since it is called for each item when it is being sent to the client. |
|
|
@@ -156,7 +145,6 @@ Set<Person> alwaysExpanded; |
|
|
|
personTree.setItemCollapseAllowedProvider(person -> |
|
|
|
!alwaysExpanded.contains(person)); |
|
|
|
---- |
|
|
|
//// |
|
|
|
|
|
|
|
[[components.treegrid.keyboard]] |
|
|
|
== Keyboard Navigation and Focus Handling in TreeGrid |
|
|
@@ -164,48 +152,47 @@ personTree.setItemCollapseAllowedProvider(person -> |
|
|
|
The user can navigate through rows with kbd:[Up] and kbd:[Down], collapse rows with kbd:[Left], |
|
|
|
and expand them with kbd:[Right]. |
|
|
|
|
|
|
|
//// |
|
|
|
todo styling documentation |
|
|
|
[[components.tree.css]] |
|
|
|
== CSS Style Rules |
|
|
|
|
|
|
|
[source, css] |
|
|
|
---- |
|
|
|
.v-tree {} |
|
|
|
.v-tree-node {} /* A node (item) */ |
|
|
|
.v-tree-node-caption {} /* Caption of the node */ |
|
|
|
.v-tree-node-children {} /* Contains child nodes */ |
|
|
|
.v-tree-node-root {} /* If node is a root node */ |
|
|
|
.v-tree-node-leaf {} /* If node has no children */ |
|
|
|
.v-tree8 { |
|
|
|
.v-tree8-scroller, .v-tree8-scroller-horizontal { } |
|
|
|
.v-tree8-tablewrapper { |
|
|
|
.v-tree8-body { |
|
|
|
.v-tree8-row, |
|
|
|
.v-tree8-stripe, |
|
|
|
.v-tree8-row-focused, |
|
|
|
.v-tree8-row-has-data { |
|
|
|
.v-tree8-expander, expanded {} |
|
|
|
.v-tree8-cell-content {} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
---- |
|
|
|
|
|
|
|
[[components.tree.css.itemstyles]] |
|
|
|
=== Generating Item Styles |
|
|
|
|
|
|
|
You can style each tree item individually by generating a style name for them with a [interfacename]#Tree.ItemStyleGenerator#, which you assign to a tree with [methodname]#setItemStyleGenerator()#. |
|
|
|
You can style each tree item individually by generating a style name for them with a [interfacename]#StyleGenerator#, which you assign to a tree with [methodname]#setStyleGenerator()#. |
|
|
|
The generator should return a style name for each item or `null`. |
|
|
|
|
|
|
|
[source, Java] |
|
|
|
---- |
|
|
|
// Show all leaf nodes as disabled |
|
|
|
tree.setItemStyleGenerator(new Tree.ItemStyleGenerator() { |
|
|
|
@Override |
|
|
|
public String getStyle(Tree source, Object itemId) { |
|
|
|
if (! tree.hasChildren(itemId)) |
|
|
|
return "disabled"; |
|
|
|
tree.setStyleGenerator(item -> { |
|
|
|
if (!tree.getDataProvider().hasChildren(item)) |
|
|
|
return "leaf"; |
|
|
|
return null; |
|
|
|
} |
|
|
|
}); |
|
|
|
); |
|
|
|
---- |
|
|
|
|
|
|
|
The style names are prefixed with `v-tree-node-caption-`. |
|
|
|
You could thereby define the item styling as follows: |
|
|
|
|
|
|
|
[source, CSS] |
|
|
|
[source, css] |
|
|
|
---- |
|
|
|
.v-tree-node-caption-disabled { |
|
|
|
color: graytext; |
|
|
|
font-style: italic; |
|
|
|
.leaf .v-tree8-cell-content { |
|
|
|
background-color:green |
|
|
|
} |
|
|
|
---- |
|
|
|
//// |