You can use the corresponding plugins to show tree data in the Grid component and manage the expanded rows’ state programmatically or via the UI (a column that contains UI elements to expand/collapse rows).
The following plugins implement tree data support:
Note that the plugin order is important.
DxTableTreeColumn plugins to set up a Grid with simple tree data structure.
Specify the expanded row IDs in the
expandedRowIds property and subscribe to the
update:expandedRowIds event. Use the
.sync modifier for two-way binding.
In the following example, the data is specified as grouped array. Specify the
getChildRows property to parse the given array.
You can also transform tree data defined as a plain array.
DxTableTreeColumn plugin allows showing hierarchical selection controls.
Do the following to enable this feature:
DxSelectionStateplugin. See Selection.
showSelectionControlsproperty to true to show checkboxes.
You can also combine the
DxTableTreeColumn plugin with the
DxTableSelection plugin to highlight the selected rows and handle the click event on the entire row.
Do the following to show the Select All checkbox in the header row:
DxTableHeaderRowplugin. See Fundamentals.
DxIntegratedSelectionplugin. See Selection.
showSelectAllproperty to true to show Select All checkbox.
You can handle the Grid’s tree data state changes to request nested data from the server according to the expanded row ID.
Tree data options are updated once an end-user interacts with the UI. Handle option changes using the
update:expandedRowIds event and request data from the server using the applied tree data options. Once the page data is received from the server, pass it to the