The Grid component available since vaadin 7.5 is great and solves lots of issues encountered in big editable Tables. Unfortunately the TreeGrid component does not exist yet.
This component provides a simple wrapper around the Grid component making it possible to send a Hierarchical Container. EverproTreeGrid manages an internal Indexed Container sent to a plain Grid.
A specific column is rendered in a way to look like a button with an expand collapse icon, and a with indentation.
Using EverproTreeGrid is exactly the same as the Grid component, the only difference is the following:
1- In the constructor send 2 propertyNames (or propertyIds): one represents the property that identifies the ItemID and the other represents the displayed information. They obviously can be identical.
example: new EverproTreeGrid(“ID”, “DESCRIPTION”);
ID would be your item unique identifier,
DESCRIPTION would be what you want to see as node title.
2- When you send the Container Data Source, send a Hierarchical one:
setContainerDataSource(Hierarchical dataSource);
3- You need to add the following in your styles.scss:
@import “…/everprotreegrid/everprotreegridaddons.scss”;
yourtheme {
…
@include everprotreegridaddons;
…
}
the styles used are the following:
.v-foc-gridtree-node-expanded
.v-foc-gridtree-node-collapsed
.v-foc-gridtree-node-leaf
you should be able to change the icons by overwriting these styles and setting the background image as follows:
background-image: url(“icons/tree-node-expanded.png”);