DevExtreme React - Use Plain Data
If you use plain data in the TreeView, set the dataStructure option to "plain". For an example of plain data, see the following code snippet.
jQuery
var plainData = [ { id: '1', text: 'Fruits' }, { id: '1_1', text: 'Apples', parentId: '1' }, { id: '1_2', text: 'Oranges', parentId: '1' }, { id: '2', text: 'Vegetables' }, { id: '2_1', text: 'Cucumbers', parentId: '2' }, { id: '2_2', text: 'Tomatoes', parentId: '2' } ]; $(function() { $("#treeViewContainer").dxTreeView({ dataSource: plainData, dataStructure: 'plain' }); });
Angular
<dx-tree-view [dataSource]="plainData" dataStructure="plain"> </dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { plainData = [ { id: '1', text: 'Fruits' }, { id: '1_1', text: 'Apples', parentId: '1' }, { id: '1_2', text: 'Oranges', parentId: '1' }, { id: '2', text: 'Vegetables' }, { id: '2_1', text: 'Cucumbers', parentId: '2' }, { id: '2_2', text: 'Tomatoes', parentId: '2' } ]; } @NgModule({ imports: [ // ... DxTreeViewModule ], // ... })
As you can see, all items in a plain data source have the id and text fields, and items that have a parent, have the parentId field. Those are conventional field names defined by the Default Item Template pattern. To use other names, change the keyExpr, displayExpr and parentIdExpr options, respectively.
jQuery
var plainData = [ { key: '1', name: 'Fruits' }, { key: '1_1', name: 'Apples', parent: '1' }, { key: '1_2', name: 'Oranges', parent: '1' }, { key: '2', name: 'Vegetables' }, { key: '2_1', name: 'Cucumbers', parent: '2' }, { key: '2_2', name: 'Tomatoes', parent: '2' } ]; $(function() { $("#treeViewContainer").dxTreeView({ dataSource: plainData, dataStructure: 'plain', keyExpr: 'key', displayExpr: 'name', parentIdExpr: 'parent' }); });
Angular
<dx-tree-view [dataSource]="plainData" dataStructure="plain" keyExpr="key" displayExpr="name" parentIdExpr="parent"> </dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { plainData = [ { key: '1', name: 'Fruits' }, { key: '1_1', name: 'Apples', parent: '1' }, { key: '1_2', name: 'Oranges', parent: '1' }, { key: '2', name: 'Vegetables' }, { key: '2_1', name: 'Cucumbers', parent: '2' }, { key: '2_2', name: 'Tomatoes', parent: '2' } ]; } @NgModule({ imports: [ // ... DxTreeViewModule ], // ... })
Frequently, the id of an item is also its text. In this case, set both the keyExpr and displayExpr options to a single value.
jQuery
var plainData = [ { name: 'Fruits' }, { name: 'Apples', parentId: 'Fruits' }, { name: 'Oranges', parentId: 'Fruits' }, { name: 'Vegetables' }, { name: 'Cucumbers', parentId: 'Vegetables' }, { name: 'Tomatoes', parentId: 'Vegetables' } ]; $(function() { $("#treeViewContainer").dxTreeView({ dataSource: plainData, dataStructure: 'plain', keyExpr: 'name', displayExpr: 'name' }); });
Angular
<dx-tree-view [dataSource]="plainData" dataStructure="plain" keyExpr="name" displayExpr="name"> </dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { plainData = [ { name: 'Fruits' }, { name: 'Apples', parentId: 'Fruits' }, { name: 'Oranges', parentId: 'Fruits' }, { name: 'Vegetables' }, { name: 'Cucumbers', parentId: 'Vegetables' }, { name: 'Tomatoes', parentId: 'Vegetables' } ]; } @NgModule({ imports: [ // ... DxTreeViewModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.