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.

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