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.
Use the DxTreeDataState, DxCustomTreeData and DxTableTreeColumn plugins to set up a Grid with simple tree data structure.
Specify the expanded row IDs in the DxTreeDataState plugin’s 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 DxCustomTreeData plugin’s getChildRows property to parse the given array.
You can also transform tree data defined as a plain array.
The DxTableTreeColumn plugin allows showing hierarchical selection controls.
Do the following to enable this feature:
DxSelectionState plugin. See Selection.DxTableTreeColumn plugin’s showSelectionControls property 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:
DxTableHeaderRow plugin. See Fundamentals.DxIntegratedSelection plugin. See Selection.DxTableTreeColumn plugin’s showSelectAll property 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 DxTreeDataState plugin’s 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 DxGrid component’s rows property.