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:

@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");


Link to this version
BetaReleased 16 November 2016Apache License 2.0
Framework Support
Vaadin 7.5+
Browser Independent
Install with
Release notes - Version 1.1.0

Implements the Container.Filterable DataSource