All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Overview

The TreeView UI component is a tree-like representation of textual data.

View Demo

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.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.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