All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

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 widget.

Basic Usage

The following example demonstrates the TreeList in action.

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

Installation

  1. Download and install the package.

    npm install --save @progress/kendo-treelist-react-wrapper
  2. Once installed, import the TreeList component from the package.

    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 in your application:

  • @progress/kendo-ui

Features and Functionalities

Events

The following example demonstrates basic TreeList events. You can subscribe to all TreeList events by the handler name.

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')
);
In this article