Vue TreeView - Use Hierarchical Data
For an example of hierarchical data, see the following code snippet.
var hierarchicalData = [{ id: '1', text: 'Fruits', items: [ { id: '1_1', text: 'Apples' }, { id: '1_2', text: 'Oranges' } ] }, { id: '2', text: 'Vegetables', items: [ { id: '2_1', text: 'Cucumbers' }, { id: '2_2', text: 'Tomatoes' } ] }];
As you can see, all items in a hierarchical data source have the id and text fields, and items with children have the items field. Those are conventional field names. To use other names, change the keyExpr, displayExpr and itemsExpr properties, respectively.
jQuery
var hierarchicalData = [{ key: '1', name: 'Fruits', children: [ { key: '1_1', name: 'Apples' }, { key: '1_2', name: 'Oranges' } ] }, { key: '2', name: 'Vegetables', children: [ { key: '2_1', name: 'Cucumbers' }, { key: '2_2', name: 'Tomatoes' } ] }]; $(function() { $("#treeViewContainer").dxTreeView({ dataSource: hierarchicalData, keyExpr: 'key', displayExpr: 'name', itemsExpr: 'children' }); });
Angular
<dx-tree-view [dataSource]="hierarchicalData" keyExpr="key" displayExpr="name" itemsExpr="children"> </dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { hierarchicalData = [{ key: '1', name: 'Fruits', children: [ { key: '1_1', name: 'Apples' }, { key: '1_2', name: 'Oranges' } ] }, { key: '2', name: 'Vegetables', children: [ { key: '2_1', name: 'Cucumbers' }, { key: '2_2', name: 'Tomatoes' } ] }]; } @NgModule({ imports: [ // ... DxTreeViewModule ], // ... })
Vue
<template> <DxTreeView key-expr="key" display-expr="name" items-expr="children" :data-source="hierarchicalData" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTreeView } from 'devextreme-vue/tree-view'; const hierarchicalData = [{ key: '1', name: 'Fruits', children: [ { key: '1_1', name: 'Apples' }, { key: '1_2', name: 'Oranges' } ] }, { key: '2', name: 'Vegetables', children: [ { key: '2_1', name: 'Cucumbers' }, { key: '2_2', name: 'Tomatoes' } ] }]; export default { components: { DxTreeView }, data() { return { hierarchicalData }; }, }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeView from 'devextreme-react/tree-view'; const hierarchicalData = [{ key: '1', name: 'Fruits', children: [ { key: '1_1', name: 'Apples' }, { key: '1_2', name: 'Oranges' } ] }, { key: '2', name: 'Vegetables', children: [ { key: '2_1', name: 'Cucumbers' }, { key: '2_2', name: 'Tomatoes' } ] }]; class App extends React.Component { render() { return ( <TreeView keyExpr="key" displayExpr="name" itemsExpr="children" dataSource={hierarchicalData} /> ); } } export default App;
Frequently, the id of an item is also its text. In this case, set both the keyExpr and displayExpr properties to a single value.
jQuery
var hierarchicalData = [{ name: 'Fruits', items: [ { name: 'Apples' }, { name: 'Oranges' } ] }, { name: 'Vegetables', items: [ { name: 'Cucumbers' }, { name: 'Tomatoes' } ] }]; $(function() { $("#treeViewContainer").dxTreeView({ dataSource: hierarchicalData, keyExpr: 'name', displayExpr: 'name' }); });
Angular
<dx-tree-view [dataSource]="hierarchicalData" keyExpr="name" displayExpr="name"> </dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { hierarchicalData = [{ name: 'Fruits', items: [ { name: 'Apples' }, { name: 'Oranges' } ] }, { name: 'Vegetables', items: [ { name: 'Cucumbers' }, { name: 'Tomatoes' } ] }]; } @NgModule({ imports: [ // ... DxTreeViewModule ], // ... })
Vue
<template> <DxTreeView key-expr="name" display-expr="name" :data-source="hierarchicalData" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTreeView } from 'devextreme-vue/tree-view'; const hierarchicalData = [{ name: 'Fruits', items: [ { name: 'Apples' }, { name: 'Oranges' } ] }, { name: 'Vegetables', items: [ { name: 'Cucumbers' }, { name: 'Tomatoes' } ] }]; export default { components: { DxTreeView }, data() { return { hierarchicalData }; }, }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeView from 'devextreme-react/tree-view'; const hierarchicalData = [{ name: 'Fruits', items: [ { name: 'Apples' }, { name: 'Oranges' } ] }, { name: 'Vegetables', items: [ { name: 'Cucumbers' }, { name: 'Tomatoes' } ] }]; class App extends React.Component { render() { return ( <TreeView keyExpr="name" displayExpr="name" dataSource={hierarchicalData} /> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.