All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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