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

PanelBar Overview

The PanelBar displays hierarchical data in a multi-level, expandable format.

The PanelBar wrapper for React is a client-side wrapper for the Kendo UI PanelBar widget.

Basic Usage

The following example demonstrates the PanelBar in action.

class PanelBarContainer extends React.Component {
render() {
    return (
     <PanelBar>
         <PanelItem className="k-state-active">
             <span className="k-link k-state-selected">My Teammates</span>
             <div>
                <p>Andrew Fuller - Team Lead</p>
                <p>Nancy Leverling - Sales Associate</p>
                <p>Robert King - Business System Analyst</p>
             </div>
         </PanelItem>
         <PanelItem>
             Programs
             <SubItems>
                 <PanelItem>Monday</PanelItem>
                 <PanelItem>Tuesday</PanelItem>
                 <PanelItem>Wednesday</PanelItem>
                 <PanelItem>Thursday</PanelItem>
                 <PanelItem>Friday</PanelItem>
             </SubItems>
         </PanelItem>
     </PanelBar>
    );
  }
}

ReactDOM.render(
  <PanelBarContainer/>,
  document.querySelector('my-app')
);

Features and Functionalities

Events

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

class PanelBarContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataTextField = props.dataTextField;
        this.dataSource = new kendo.data.HierarchicalDataSource({
            data: props.data
        });
        this.onActivate = this.onActivate.bind(this);
        this.onCollapse = this.onCollapse.bind(this);
        this.onContentLoad = this.onContentLoad.bind(this);
        this.onDataBound = this.onDataBound.bind(this);
        this.onExpand = this.onExpand.bind(this);
        this.onDaonSelecttaBound = this.onSelect.bind(this);
    }

    onActivate = (e) => {
         console.log("event :: activate");
    }

    onCollapse = (e) => {
        console.log("event :: collapse");
    }

    onContentLoad = (e) => {
        console.log("event :: contentLoad");
    }

    onDataBound = (e) => {
        console.log("event :: dataBound");
    }

    onExpand = (e) => {
        console.log("event :: expand (" + $(e.item).find("> .k-link").text() + ")");
    }

    onSelect = (e) => {
        console.log("event :: select (" + $(e.item).find("> .k-link").text() + ")" );
    }

    render() {
        return (
            <PanelBar
                activate={this.onActivate}
                collapse={this.onCollapse}
                contentLoad={this.onContentLoad}
                dataBound={this.onDataBound}
                expand={this.onExpand}
                select={this.onSelect}
                dataSource={this.dataSource}
                dataTextField={this.dataTextField}/>
        );
    }
}
ReactDOM.render(
    <PanelBarContainer data={
          [{
            CategoryName: 'Tea',
            items: [{ ProductName: 'Green Tea' },{ ProductName: 'Black Tea' }]
          },{
            CategoryName: 'Coffee',
            items: [{ ProductName: 'Espresso' },{ ProductName: 'Latte' },{ ProductName: 'Cappuccino' }]
          }]
        }
        dataTextField= {['CategoryName', 'ProductName']}/>,
    document.querySelector('my-app')
);
In this article