Kendo UI for jQuery 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.

Kendo UI for jQuery Kendoka image

The TreeView is part of Kendo UI for jQuery, a professional grade UI library with 110+ 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
            <li>Item 1.1</li>
            <li>Item 1.2</li>
    <li>Item 2</li>

$(document).ready(function() {

Functionality and Features

Referencing Existing Instances

To refer to an existing TreeView instance, use the 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");

See Also

In this article