You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
TreeGrid · Vaadin
Vaadin Framework - Server-Side Components - TreeGrid
 Edit This Page

TreeGrid

Live Demo

The TreeGrid component is currently being developed and only available in the Framework 8.1 prerelease versions, starting from 8.1.0.alpha1.

Overview

TreeGrid is for displaying hierarchical tabular data laid out in rows and columns. It is otherwise identical to the Grid component, but it adds the possibility to show hierarchical data, allowing the user to expand and collapse nodes to show or hide data.

See the documentation for Grid for all the shared features between Grid and TreeGrid.

tree grid basic
Figure 1. A TreeGrid

Binding to Data

TreeGrid is used by binding it to a hierarchical data provider. The data provider can be based on in-memory or back end data. For in-memory data, the InMemoryHierarchicalDataProvider can be used, and for loading data from a back end, you need to implement three methods from the HierarchicalDataProvider interface. Usage of both data providers is described in Hierarchical Data.

Populating a TreeGrid with in-memory data can be done as follows

Project rootProject = getRootRroject();

HierarchyData<Project> data = new HierarchyData<>();
// add a root level item with null parent
data.addItem(null, rootProject);

// Add all children for root item
rootProject.flattened().forEach(
       project -> data.addItems(project, project.getSubProjects()));

TreeGrid<Project> treeGrid = new TreeGrid<>();
treeGrid.setDataProvider(new InMemoryHierarchicalDataProvider<>(data));

// the first column gets the hierarchy indicator by default
treeGrid.addColumn(Project::getName).setCaption("Project Name");
treeGrid.addColumn(Project::getHoursDone).setCaption("Hours Done");
treeGrid.addColumn(Project::getdLastModified).setCaption("Last Modified");

The HierarchyData class can be used to build the hierarchical data structure, and it can then be passed on to InMemoryHierarchicalDataProvider. It is simply a hierarchical collection, that the data provider uses to populate the TreeGrid.

The setItems method in TreeGrid can be used to set the root level items. Internally an InMemoryHierarchicalDataProvider with HierarchyData is used. If at any time you want to modify the in-memory data in the grid, you may do it as follows

InMemoryHierarchicalDataProvider<Project> dataProvider = (InMemoryHierarchicalDataProvider<Project>) treeGrid.getDataProvider();

HierarchyData<Project> data = dataProvider.getData();
// add new items
data.addItem(null, newProject);
data.addItems(newProject, newProject.getChildren());

// after adding / removing data, data provider needs to be refreshed
dataProvider.refreshAll();

Note that for adding or removing nodes, you always need to call the refreshAll method in the data provider you are using. The refreshItem method can only be used when just the data for that item is updated, but not for updates that add or remove items.

Changing the Hierarchy Column

By default, the TreeGrid shows the hierarchy indicator by default in the first column of the grid. You can change it with with the setHierarchyColumn, method, that takes as a parameter the column’s ID specified with the setId method in Column.

// the first column gets the hierarchy indicator by default
treeGrid.addColumn(Project::getLastModified).setCaption("Last Modified");
treeGrid.addColumn(Project::getName).setCaption("Project Name").setId("name");
treeGrid.addColumn(Project::getHoursDone).setCaption("Hours Done");

treeGrid.setHierarchyColumn("name");

Listening to Events

In addition to supporting all the listeners of the standard Grid, TreeGrid supports listening to the expansion and collapsing of items in its hierarchy. The expand and collapse listeners can be added as follows:

treeGrid.addExpandListener(event -> log("Item expanded: " + event.getExpandedItem()));
treeGrid.addCollapseListener(event -> log("Item collapsed: " + event.getCollapsedItem()));

The return types of the methods getExpandedItem and getCollapsedItem are the same as the type of the TreeGrid the events originated from. Note that collapse listeners will not be triggered for any expanded subtrees of the collapsed item.