The TreeView widget displays hierarchical data in a traditional tree structure, with support for interactive drag-and-drop reordering operations. A TreeView can be defined statically using HTML lists, or it can be dynamically bound to hierarchical data.

Getting Started

There are two primary ways to create a TreeView:

1. Define a hierarchical list with static HTML
2. Use dynamic data binding

Static HTML definition is appropriate for small hierarchies and for data that does not change frequently. Data binding should be used for larger data sets and for data that changes frequently.

Creating a treeview from HTML

<ul id="treeview">
    <li>Item 1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

var treeview = $("#treeview").kendoTreeView();

Creating a TreeView with data binding (local data source)

<div id="treeview"></div>

$("#treeview").kendoTreeView({
    dataSource: [
        { text: "Item 1", items: [
            { text: "Item 1.1" },
            { text: "Item 1.2" }
        ]},
        { text: "Item 2" }
    ]
});

Configuring TreeView behavior

A number of TreeView behaviors can be easily controlled by simple configuration properties, such as animation behaviors and drag-and-drop behaviors. Refer to the demo Configuration tab for more API details.

$("#treeview").kendoTreeView({
    dragAndDrop: true
});

When drag-and-drop is enabled, TreeView nodes can be dragged and dropped between all levels, with useful tooltips helping indicate where the node will be dropped.