Angular TreeView - Overview
The TreeView UI component is a tree-like representation of textual data.
The following code adds a simple TreeView to your page:
jQuery
HTML
JavaScript
<div id="treeViewContainer"></div>
$(function() { $("#treeViewContainer").dxTreeView({ dataSource: [{ id: '1', text: 'Fruits', expanded: true, items: [ { id: '1_1', text: 'Apples' }, { id: '1_2', text: 'Oranges' } ] }, { id: '2', text: 'Vegetables', expanded: true, items: [ { id: '2_1', text: 'Cucumbers' }, { id: '2_2', text: 'Tomatoes' } ] }] }); });
Angular
HTML
TypeScript
<dx-tree-view [dataSource]="hierarchicalData"> </dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { hierarchicalData = [{ id: '1', text: 'Fruits', expanded: true, items: [ { id: '1_1', text: 'Apples' }, { id: '1_2', text: 'Oranges' } ] }, { id: '2', text: 'Vegetables', expanded: true, items: [ { id: '2_1', text: 'Cucumbers' }, { id: '2_2', text: 'Tomatoes' } ] }]; } @NgModule({ imports: [ // ... DxTreeViewModule ], // ... })
Vue
App.vue
<template> <DxTreeView :items="hierarchicalData" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxTreeView } from 'devextreme-vue/tree-view'; const hierarchicalData = [{ id: '1', text: 'Fruits', expanded: true, items: [ { id: '1_1', text: 'Apples' }, { id: '1_2', text: 'Oranges' } ] }, { id: '2', text: 'Vegetables', expanded: true, items: [ { id: '2_1', text: 'Cucumbers' }, { id: '2_2', text: 'Tomatoes' } ] }]; export default { components: { DxTreeView }, data() { return { hierarchicalData }; }, }; </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import TreeView from 'devextreme-react/tree-view'; const hierarchicalData = [{ id: '1', text: 'Fruits', expanded: true, items: [ { id: '1_1', text: 'Apples' }, { id: '1_2', text: 'Oranges' } ] }, { id: '2', text: 'Vegetables', expanded: true, items: [ { id: '2_1', text: 'Cucumbers' }, { id: '2_2', text: 'Tomatoes' } ] }]; class App extends React.Component { render() { return ( <TreeView items={hierarchicalData} /> ); } } export default App;
Note that the data source in the code above has a hierarchical structure, however, it also supports data sources with a plain structure. See the Use Hierarchical Data and Use Plain Data articles to learn how you can customize hierarchical and plain data sources.
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- TreeView - Access a Node
- TreeView - Search Nodes
- TreeView - Expand and Collapse Nodes
- TreeView - Customize Node Appearance
- TreeView - Enhance Performance on Large Datasets
- TreeView - Keyboard Support
- TreeView API Reference
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.