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.

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

Basic Usage

The following example demonstrates the TreeView in action.

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

Installation

  1. Download and install the package.

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

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

  • @progress/kendo-ui

Features and Functionalities

Events

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

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