@progress/kendo-treelist-react-wrapper
Version:
Kendo UI TreeList wrapper for React
178 lines (148 loc) • 6.87 kB
Markdown
title: Overview
page_title: TreeList Overview - Components - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI TreeList wrapper for React delivers and use the component in React projects."
slug: overview_treelist
position: 0
# TreeList Overview
The TreeList enables you to display self-referencing tabular data and to sort, filter, and edit its data.
It also shows a parent-child relation between the TreeList data items.
The TreeList wrapper for React is a client-side wrapper for the [Kendo UI TreeList](http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist) widget.
## Basic Usage
The following example demonstrates the TreeList in action.
{% meta height:660 %}
```jsx-preview
class TreeListContainer extends React.Component {
constructor(props) {
super(props);
this.columns = [
{ field: "Position" },
{ field: "Name" },
{ field: "Phone" }
]
this.data = [
{ id: 1, Name: "Daryl Sweeney", Position: "CEO", Phone: "(555) 924-9726", parentId: null },
{ id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", Phone: "(438) 738-4935", parentId: 1 },
{ id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Phone: "(699) 838-6121", parentId: 2 },
{ id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Phone: "(889) 345-2438", parentId: 32 },
{ id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Phone: "(738) 136-2814", parentId: 11 },
{ id: 78, Name: "Rinah Simon", Position: "Software Developer", Phone: "(285) 912-5271", parentId: 11 },
{ id: 42, Name: "Gage Daniels", Position: "Software Architect", Phone: "(107) 290-6260", parentId: 32 },
{ id: 43, Name: "Constance Vazquez", Position: "Director, Engineering", Phone: "(800) 301-1978", parentId: 32 },
{ id: 46, Name: "Darrel Solis", Position: "Team Lead", Phone: "(327) 977-0216", parentId: 43 },
{ id: 47, Name: "Brian Yang", Position: "Senior Software Developer", Phone: "(565) 146-5435", parentId: 46 },
{ id: 50, Name: "Lillian Bradshaw", Position: "Software Developer", Phone: "(323) 509-3479", parentId: 46 },
{ id: 51, Name: "Christian Palmer", Position: "Technical Lead", Phone: "(490) 421-8718", parentId: 46 },
{ id: 55, Name: "Summer Mosley", Position: "QA Engineer", Phone: "(784) 962-2301", parentId: 46 },
{ id: 56, Name: "Barry Ayers", Position: "Software Developer", Phone: "(452) 373-9227", parentId: 46 },
{ id: 59, Name: "Keiko Espinoza", Position: "Junior QA Engineer", Phone: "(226) 600-5305", parentId: 46 },
{ id: 61, Name: "Candace Pickett", Position: "Support Officer", Phone: "(120) 117-7475", parentId: 46 },
{ id: 63, Name: "Mia Caldwell", Position: "Team Lead", Phone: "(848) 636-6470", parentId: 43 },
{ id: 65, Name: "Thomas Terry", Position: "Senior Enterprise Support Officer", Phone: "(764) 831-4248", parentId: 63 },
{ id: 67, Name: "Ruth Downs", Position: "Senior Software Developer", Phone: "(138) 991-1440", parentId: 63 },
{ id: 70, Name: "Yasir Wilder", Position: "Senior QA Enginner", Phone: "(759) 701-8665", parentId: 63 },
{ id: 71, Name: "Flavia Short", Position: "Support Officer", Phone: "(370) 133-9238", parentId: 63 },
{ id: 74, Name: "Aaron Roach", Position: "Junior Software Developer", Phone: "(958) 717-9230", parentId: 63 }
]
this.dataSource = new kendo.data.TreeListDataSource({
data: this.data,
schema: {
model: {
id: "id",
expanded: true
}
}
});
}
render() {
return (
<div>
<TreeList height={600}
columns={this.columns}
dataSource={this.dataSource}
/>
</div>
);
}
}
ReactDOM.render(
<TreeListContainer/>,
document.querySelector('my-app')
);
```
{% endmeta %}
## Installation
1. Download and install the package.
```sh
npm install --save @progress/kendo-treelist-react-wrapper
```
2. Once installed, import the TreeList component from the package.
```sh
import { TreeList } from '@progress/kendo-treelist-react-wrapper';
```
3. You are required to install one of the Kendo UI themes to style your components.
## Dependencies
The TreeList package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:
* @progress/kendo-ui
## Features and Functionalities
* [Data binding]({% slug databinding_treelist %})
* [Editing]({% slug editing_treelist %})
* [Methods]({% slug methods_treelist %})
## Events
The following example demonstrates basic TreeList events. You can subscribe to [all TreeList events](https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events) by the handler name.
```jsx
class TreeListContainer extends React.Component {
constructor(props) {
super(props);
this.columns = [
{ field: "Position" },
{ field: "Name" },
]
this.data = [
{ id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
{ id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
{ id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
]
this.dataSource = new kendo.data.TreeListDataSource({
data: this.data,
schema: {
model: {
id: "id",
expanded:true
}
}
});
this.onChange = this.onChange.bind(this);
this.onDataBound = this.onDataBound.bind(this);
}
onChange = (e) => {
console.log("event :: change");
console.log(e);
}
onDataBound = (e) => {
console.log("event :: dataBound");
console.log(e);
}
render() {
return (
<div>
<TreeList height={300}
columns={this.columns}
selectable={true}
dataSource={this.dataSource}
dataBound={this.onDataBound}
change={this.onChange}
/>
</div>
);
}
}
ReactDOM.render(
<TreeListContainer/>,
document.querySelector('my-app')
);
```
## Suggested Links
* [Kendo UI TreeList for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/treelist/overview)
* [API Reference of the TreeList Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist)