【Vaadin14】如何替TreeGrid加上水平的Scroll Bar

tags: Vaadin

¹

Common

• 原始TreeGrid設計，只有垂直的scroll bar，沒有水平的scroll bar
• 元件要求1：The width should be in a format understood by the browser, e.g. “100px” or “2.5em”.
  • 必須給TreeGrid有單位的寬度
  • 若使用%，例如100%，則沒有作用
• 元件要求2：TreeGrid needs an explicit width, hence “100%” does not work.
  • 必須給TreeGrid一個固定寬度
  • 當內容超過此寬度後，超過的內容會被隱藏或遮蔽
  • 若TreeGrid沒有設定寬度或null，則寬度就是0
• 相關衍伸元件都會遇到一樣的問題
  • Tree²
  • TreeComboBox³

How to add the Horizontal Scroll?

• 步驟1：先將欄位設定成autoWidth

treeGrid = new TreeGrid<>();
treeGrid.addHierarchyColumn(valueProvider).setAutoWidth(true);

• 步驟2：找到可能發生內容寬度改變的時機，例如
  • 第一次生成元件
  • addItem
  • setParent

TreeGrid Event

強迫元件重新計算寬度

treeGrid.addExpandListener(e -> treeGrid.recalculateColumnWidths());

recalculateColumnWidths⁴

• 強迫元件於render後，再次調整元件寬度

/**
* You need to call this after the items inside the Grid are rendered
*/
private void recalculateColumnWidths() {
    final UI currUI = UI.getCurrent();
    CompletableFuture.runAsync(() -> {
        try {
            Thread.sleep(1000); // 秒數自行調整
        }
        catch (Exception ex) {
        }
        currUI.access(() -> treeGrid.recalculateColumnWidths());
    });
}

Result

---

1. 圖片來源
   https://vaadin.com/components/vaadin-tree-grid/java-examples ↩︎

2. Tree
   https://vaadin.com/directory/component/tree ↩︎

3. TreeComboBox
   https://vaadin.com/directory/component/treecombobox ↩︎

4. Horziontal Scroller in the TreeGrid is missing #471
   https://github.com/vaadin/vaadin-grid-flow/issues/471#issuecomment-543571025 ↩︎