@progress/kendo-treeview-react-wrapper
Version:
Kendo UI TreeView wrapper for React
220 lines (181 loc) • 7.58 kB
Markdown
---
title: Overview
page_title: TreeView Overview - Components - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI TreeView wrapper for React delivers and use the component in React projects."
slug: overview_treeview
position: 0
---
# TreeView Overview
The TreeView displays hierarchical data in a traditional tree structure.
It supports user interaction through mouse or touch events and performs re-ordering operations by using the drag-and-drop functionality.
The TreeView wrapper for React is a client-side wrapper for the [Kendo UI TreeView](http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview) widget.
## Basic Usage
The following example demonstrates the TreeView in action.
{% meta height:460 %}
```jsx-preview
class TreeViewContainer extends React.Component {
constructor(props) {
super(props);
this.dataSource = [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
this.checkedNodes = []
this.state = {
message: "",
};
this.onCheck = this.onCheck.bind(this);
this.checkedNodeIds = this.checkedNodeIds.bind(this);
this.checkboxes = {
checkChildren: true
}
}
onCheck = (e) => {
this.checkedNodes = [];
var treeView = $("[data-role='treeview']").data("kendoTreeView")
this.checkedNodeIds(treeView.dataSource.view(), this.checkedNodes);
if (this.checkedNodes.length > 0) {
this.setState({
message : "IDs of checked nodes: " + this.checkedNodes.join(",")
})
} else {
this.setState({
message : "No nodes checked."
})
}
}
checkedNodeIds = (nodes, checkedNodes) => {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
this.checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
this.checkedNodeIds(nodes[i].children.view(), this.checkedNodes);
}
}
}
render() {
return (
<div>
<div>
<h4>Check nodes</h4>
<TreeView checkboxes={this.checkboxes}
check={this.onCheck}
dataSource={this.dataSource} />
</div>
<div>
<h4>Status</h4>
<p>{this.state.message}</p>
</div>
</div>
);
}
}
ReactDOM.render(
<TreeViewContainer/>,
document.querySelector('my-app')
);
```
{% endmeta %}
## Installation
1. Download and install the package.
```sh
npm install --save /kendo-treeview-react-wrapper
```
2. Once installed, import the TreeView component from the package.
```sh
import { TreeView } from '@progress/kendo-treeview-react-wrapper';
```
3. You are required to install one of the Kendo UI themes to style your components.
## Dependencies
The TreeView package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:
* /kendo-ui
## Features and Functionalities
* [Data binding]({% slug databinding_treeview %})
* [Dragging and dropping]({% slug drag_and_drop_treeview %})
* [Item properties]({% slug item_properties_treeview %})
## Events
The following example demonstrates basic TreeView events. You can subscribe to [all TreeView events](http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#events) by the handler name.
```jsx
class TreeViewContainer extends React.Component {
constructor(props) {
super(props);
this.dataSource = [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
this.onDataBound = this.onDataBound.bind(this);
this.onSelect = this.onSelect.bind(this);
this.onChange = this.onChange.bind(this);
}
onDataBound = (e) => {
console.log("event :: dataBound");
console.log(e);
}
onSelect = (e) => {
console.log("event :: select");
console.log(e);
}
onChange = (e) => {
console.log("event :: change");
console.log(e);
}
render() {
return (
<div>
<TreeView select={this.onSelect}
change={this.onChange}
dataBound={this.onDataBound}
dataSource={this.dataSource}/>
</div>
);
}
}
ReactDOM.render(
<TreeViewContainer/>,
document.querySelector('my-app')
);
```
## Suggested Links
* [Kendo UI TreeView for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/treeview/overview)
* [API Reference of the TreeView Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview)