EverproTreeGrid is a wrapper around the Grid component that allows to send 'Hierarchical' Container Data Source using the setContainerDataSource() method
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:
.. @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");
Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.
Implements the Container.Filterable DataSource
- Apache License 2.0
- Vaadin 7.5+
- Browser Independent