TreeView Overview
The Kendo UI TreeView widget displays hierarchical data in a traditional tree structure.
It supports user interaction through mouse or touch events to perform re-ordering operations by using the drag-and-drop functionality.
The TreeView is part of Kendo UI for jQuery, a
professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the TreeView
To create a TreeView, you can use either of th efollowing approaches:
- Define a hierarchical list by using static HTML. This approach is suitable for small hierarchies and for data that does not frequently change.
- Use dynamic data binding either to a local or a remote data source. This approach is suitable for larger data sets and for data that frequently changes.
Create the TreeView within a
$(document).ready()statement because it has to be initialized after the DOM is fully loaded.
The following example demonstrates how to initialize the TreeView through a hierarchical list in 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>
<script>
$(document).ready(function() {
$("#treeView").kendoTreeView();
});
</script>
Functionality and Features
Referencing Existing Instances
To refer to an existing TreeView instance, use the jQuery.data() method. Once you establish a reference, use the TreeView API to control its behavior.
The following example demonstrates how to access an existing TreeView instance.
var treeView = $("#treeView").data("kendoTreeView");