As the title states, I’m having trouble getting a TreeGird to show the collapse/expand toggles, as well as indent children elements in the grid.
Looking at the generated HTML in the browser, vaadin-grid-tree-toggle elements do exist with thin hierarchy column, so it seems TreeGrid is at least trying to display the toggles. The aria-level property is also set to the appropriate value, given the row’s level in the tree, so I believe the data is properly hierarchical.
In the browser JS console, the following warning appears when showing/interacting with the TreeGrid: Make sure you have imported the required module for <vaadin-grid-tree-toggle> element.
Relevant code (simplified):
// getItems() returns a TreeData<Item>
TreeGrid<Item> grid = new TreeGrid(new TreeDataProvider(getItems()));
grid.addHierarchyColumn(Item::getItemDate).setHeader("Item Date");
grid.addColumn(Item::getItemDescription).setHeader("Description");
grid.addColumn(Item::getItemComment).setHeader("Comment");
grid.setHeightByRows(true);
grid.setSelectionMode(Grid.SelectionMode.SINGLE);
grid.expandRecursively(getItems().getRootItems(), 4);
add(grid);
Notes:
- The TreeGrid is ultimately rendered within a Dialog
- Theme is Lumo dark
When the TreeGrid is expanded programmatically via grid.expandRecursively(getItems().getRootItems(), 4);, the child items are shown. However, there still aren’t any expand/collapse toggles, and visually each child appears at the root level (there is no indentation for items lower in the hierarchy). The fact that expandRecursively results in child items appearing (with correct aria-level), is another indiciation that the data TreeGrid receives is properly hierarchical.
More notes:
- Vaadin version for this project is 14.0.4, however the same issues occured after updating to 14.0.10
- This has been tested in multiple browsers, so I don’t believe this is a browser JS issue.
- Both vaadin-bom and vaadin-core are imported (which I believe is what is required for using TreeGrid)
Any ideas why this isn’t working?