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:
- 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.
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.
Example
<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.
Example
<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.
Example
$("#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.
Example
$("#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.
Example
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 <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.
Example
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.
Example
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.
Example
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.
Example
<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.
Example
var treeView = $("#treeView").data("kendoTreeView");
See Also
Other articles and how-to examples on Kendo UI TreeView:
- Overview of the ASP.NET MVC HtmlHelper Extension for the TreeView
- Overview of the TreeView JSP Tag
- Overview of the TreeView PHP Class
- Bind to Flat Tables
- How to Attach Methods to Data Items
- How to Check Nodes Programmatically
- How to Combine Local Data with Remote Loading
- How to Edit Nodes via Form
- How to Expand All Nodes upon Check
- How to Expand Nodes during Drag
- How to Filter Out Search Results
- How to Hide Checkboxes for Root Level
- How to Persist Expanded State
- How to Prevent Dragging Nodes to Root Level
- How to Render Multiple TreeViews Using HTML Source Binding
- How to Scroll to Selected Item
- How to Show Lines between Nodes
- How to Show Node Context Menu
- How to Sort Child Nodes
- How to Use FontAwesome Icons
- TreeView JavaScript API Reference
How-to examples on Kendo UI TreeView in AngularJS: