DevExtreme Angular - Use Hierarchical Data

If you use hierarchical data, set the dataStructure option to 'tree'. For an example of hierarchical data, see the following code.

TypeScript
HTML
  • import { DxTreeListModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • hierarchicalData = [{
  • fullName: "John Heart",
  • position: "CEO",
  • city: "Los Angeles",
  • items: [{
  • fullName: "Samantha Bright",
  • position: "COO",
  • city: "Los Angeles",
  • items: [{
  • fullName: "Kevin Carter",
  • position: "Shipping Manager",
  • city: "Los Angeles"
  • }]
  • }]
  • }, {
  • fullName: "Robin Cosworth",
  • position: "Shipping Assistant",
  • city: "Los Angeles"
  • }];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTreeListModule
  • ],
  • // ...
  • })
  • <dx-tree-list
  • [dataSource]="hierarchicalData"
  • dataStructure="tree">
  • </dx-tree-list>

All items with children have the items field. If you use another name for this field, specify it in the itemsExpr option.

HTML
TypeScript
  • <dx-tree-list
  • [dataSource]="hierarchicalData"
  • dataStructure="tree"
  • itemsExpr="children">
  • </dx-tree-list>
  • import { DxTreeListModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • hierarchicalData = [{
  • fullName: "John Heart",
  • position: "CEO",
  • city: "Los Angeles",
  • children: [{
  • fullName: "Samantha Bright",
  • position: "COO",
  • city: "Los Angeles",
  • children: [{
  • fullName: "Kevin Carter",
  • position: "Shipping Manager",
  • city: "Los Angeles"
  • }]
  • }]
  • }];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTreeListModule
  • ],
  • // ...
  • })

When you load data from a remote source, and your data objects have a field that defines whether a row has nested rows, assign this field name to the hasItemsExpr option. It will notify the widget which rows do not need the expand button.

See Also