treeDataGrid

LIVE DEMO

treeDataGrid is a component for displaying hierarchical tabular data grouped into expandable and collapsible nodes.

  • XML element: treeDataGrid

  • Java class: TreeDataGrid

Basics

treeDataGrid primarily replicates the functionality of the dataGrid component.

An example of treeDataGrid declaration in the XML view descriptor is shown below:

<data readOnly="true">
    <collection id="departmentsDc"
                class="com.company.onboarding.entity.Department"> (1)
        <fetchPlan extends="_base">
            <property name="hrManager" fetchPlan="_base"/>
            <property name="parentDepartment" fetchPlan="_base"/>
        </fetchPlan>
        <loader id="departmentsDl">
            <query>
                <![CDATA[select e from Department e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <treeDataGrid id="departmentsTable"
                  hierarchyProperty="parentDepartment"
                  width="100%"
                  minHeight="20em"
                  dataContainer="departmentsDc"> (2)
        <columns> (3)
            <column property="name"/>
            <column property="hrManager"/>
        </columns>
    </treeDataGrid>
</layout>
1 Collection container for the Department entity.
2 treeDataGrid is bound to the departmentsDc container using the dataContainer attribute.
3 The columns element defines which entity attributes are shown in the tree data grid columns.
tree data grid basics

Attributes

id - alignSelf - allRowsVisible - classNames - colspan - columnReorderingAllowed - css - dataContainer - detailsVisibleOnClick - dropMode - editorBuffered - enabled - height - hierarchyProperty - maxHeight - maxWidth - metaClass - minHeight - minWidth - nestedNullBehavior - pageSize - rowDraggable - selectionMode - showOrphans - tabIndex - themeNames - visible - width

hierarchyProperty

The hierarchyProperty attribute is required. It defines the name of the entity attribute, which refers to the same entity.

showOrphans

An orphan record is a child record that refers to a parent that doesn’t exist. Usually it’s a result of loading only a part of data from the database due to filtering or paging.

The showOrphans attribute is used to control the visibility of orphan records. If it’s set to false, the component doesn’t show orphan records. If showOrphans is set to true, orphan records are displayed on the top level as roots.

The default value is false.

Not showing orphans looks like a natural choice when using filters. However, it doesn’t help with paging (some pages will be empty or half-populated). So do not use the SimplePagination component together with treeDataGrid.

Handlers

AttachEvent - BlurEvent - CellFocusEvent - CollapseEvent - ColumnReorderEvent - ColumnResizeEvent - DetachEvent - ExpandEvent - FocusEvent - GridDragEndEvent - GridDragStartEvent - GridDropEvent - ItemClickEvent - ItemDoubleClickEvent - SortEvent - classNameGenerator - dataGenerator - dragFilter - dropFilter

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

CollapseEvent

com.vaadin.flow.component.treegrid.CollapseEvent is fired when the item is collapsed.

ExpandEvent

com.vaadin.flow.component.treegrid.ExpandEvent is fired when the item is expanded.

Elements

actions - columns

See Also

See the Vaadin Docs for more information.