This project is deprecated. Use DevExtreme Vue instead.

Vue Grid - Tree Data

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.

Basic Setup

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.

Custom Tree Data

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.

Configuring Hierarchical Selection Controls

The DxTableTreeColumn plugin allows showing hierarchical selection controls.

Basic Selection

Do the following to enable this feature:

  • Configure the DxSelectionState plugin. See Selection.
  • Set the 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.

Select All

Do the following to show the Select All checkbox in the header row:

  • Configure the DxTableHeaderRow plugin. See Fundamentals.
  • Configure the DxIntegratedSelection plugin. See Selection.
  • Set the DxTableTreeColumn plugin’s showSelectAll property to true to show Select All checkbox.

Remote Data Loading on Demand

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.