Widgets / Navigation / TreeView

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.

Getting Started

Initialize the TreeView

To create a TreeView, you can either:

  1. Define a hierarchical list by using static HTML. This approach is suitable for small hierarchies and for data that does not frequently change.
  2. 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.

Important

Make sure that you create the TreeView within a $(document).ready() statement because it has to be initialized after the DOM is fully loaded.

Through Hierarchical HTML List

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>

Through Data Binding to Local Array

The following example demonstrates how to create a TreeView and bind it to a local data source.

<div id="treeView"></div>

<script>
$(document).ready(function() {
    $("#treeView").kendoTreeView({
        dataSource: [
            {
                text: "Item 1",
                items: [
                    { text: "Item 1.1" },
                    { text: "Item 1.2" }
                ]
            },
            { text: "Item 2" }
        ]
    })
});
</script>

Through Data Binding to Remote Service

The following example demonstrates how to create a TreeView and bind it to a remote HierarchicalDataSource.

$("#treeView").kendoTreeView({
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Employees",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "EmployeeId",
                hasChildren: "HasEmployees"
            }
        }
    }
})

For a complete reference on how to bind the TreeView to different service end-points, refer to the API article on HierarchicalDataSource.

Configuration

Drag-and-Drop Functionality

When the drag-and-drop feature is enabled, the nodes of a TreeView can be dragged and dropped between all levels. The functionality also features useful tooltips that help users indicate where the node is going to be dropped.

The following example demonstrates how to enable the drag-and-drop functionality for TreeView nodes.

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

Item Properties

When binding the TreeView through the dataSource configuration option, each item can acquire the properties demonstrated in the example below.

var item = {
    text: "Item text",

    // If specified, renders the item as a link (<a href=""></a>)
    url: "/",

    // Renders a <img class="k-image" src="/images/icon.png" />
    imageUrl: "/images/icon.png",

    // Renders a HTML attribites to the DOM element
    attr: {
        "data-myattr": "test"
    },

    // Renders a <span class="k-sprite icon save" />
    spriteCssClass: "icon save",

    // Specifies whether the node text should be encoded, or not
    //(useful when rendering node-specific HTML)
    encoded: false,

    // Specifies whether the item is initially expanded
    // (applicable when the item has child nodes)
    expanded: true,

    // Specifies whether the item checkbox is initially checked
    // (applicable for items with checkboxes using the default checkbox template)
    checked: true,

    // Specifies whether the item is initially selected
    selected: true,

    // Indicates the sub-items of the item
    items: [
        { text: "Subitem text" }
    ]
};

You can configure text, imageUrl, spriteCssClass, and url fields through the datatextfield, dataimageurlfield, dataspritecssclassfield, and dataurlfield options respectively.

To add arbitrary fields when binding, use the dataSource configuration. The fields are stored in the HierarchicalDataSource and can be easily accessed through the TreeView dataItem method.

Common Scenarios

Get the Node Data

You can get the TreeView node data in the select event handler

The following example demonstrates how to achieve this behavior.

function onSelect(e) {
    // this refers to the TreeView object
    var dataItem = this.dataItem(e.node);

    console.log("Selected node with id=" + dataItem.id);
}

$("#treeview").kendoTreeView({
    dataSource: [
        { id: 1, text: "Item 1", items: [
            { id: 3, text: "Item 3" }
        ] },
        { id: 2, text: "Item 2" }
    ],
    select: onSelect
});

Reload Child Nodes When Nodes Expand

Since dataItem is of the Node type, you are able to use its loaded flag to force the reloading of nodes from the server. The Node.loaded method sets the loaded flag of the node and indicates that it needs to be refreshed.

The following example demonstrates how to reload child nodes when nodes are expanded.

function onExpand(e) {
    var dataItem = this.dataItem(e.node);

    dataItem.loaded(false);
}

$("#treeview").kendoTreeView({
    dataSource: remoteDataSource,
    expand: onExpand
});

Gather Checked Nodes from TreeView

The following example demonstrates how to gather the checked nodes from a Kendo UI TreeView. You can also use this approach to gather expanded nodes.

var treeview = $("#treeview").data("kendoTreeView");
var checkedNodes = [];

function gatherStates(nodes) {
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
            checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
           gatherStates(nodes[i].children.view());
        }
    }
}

gatherStates(treeview.dataSource.view());

Project the TreeView State

The HierarchicalDataSource does not support data projection. Therefore, you might need to remap the state fields by using the schema.parse configuration option.

The following example demonstrates how to project a TreeView state.

<div id="tree">
<script>
  $("#tree").kendoTreeView({
    dataSource: {
      transport: {
        read: function (options) {
          setTimeout(function() {
            options.success([
              { hasChildren: false, text: "Node 1", Downloaded: false },
              { hasChildren: true, text: "Node 2", Downloaded: true, items: [
                { hasChildren: false, text: "Node 2.1", Downloaded: false },
              ] }
            ]);
          }, 1000);
        }
      },
      schema: {
        parse: function(response) {
          return $.map(response, function(x) {
            x.expanded = x.Downloaded;
            return x;
          });
        },
        model: {
          id: "id",
          hasChildren: "hasChildren",
          children: "items"
        }
      }
    }
  });

</script>

Reference

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");

See Also

In this article
Related articles
Not finding the help you need? Improve this article