All docs
V21.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery TreeView - Use Hierarchical Data

For an example of hierarchical data, see the following code snippet.

JavaScript
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' }
    ]
}];

View Demo

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
JavaScript
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
HTML
TypeScript
<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
App.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
App.js
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
JavaScript
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
HTML
TypeScript
<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
App.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
App.js
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