Directory

← Back

EverproTreeGrid

EverproTreeGrid is a wrapper around the Grid component that allows to send 'Hierarchical' Container Data Source using the setContainerDataSource() method

Author

Rating

Popularity

<100

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

Compatibility

(Loading compatibility data...)

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.

Version

Implements the Container.Filterable DataSource

Released
2016-11-16
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.5+
Browser
Browser Independent

EverproTreeGrid - Vaadin Add-on Directory

EverproTreeGrid is a wrapper around the Grid component that allows to send 'Hierarchical' Container Data Source using the setContainerDataSource() method EverproTreeGrid - Vaadin Add-on Directory
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");
Online