@progress/kendo-layout-react-wrapper/docs/panelbar/index.md

Kendo UI Layout wrapper for React

---
title: Overview
page_title: Overview - PanelBar - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI PanelBar wrapper for React delivers and use the component in React projects."
slug: overview_panelbar
position: 1
---

# 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](https://demos.telerik.com/kendo-ui/panelbar/index) widget.

## Basic Usage

The following example demonstrates the PanelBar in action.

{% meta height:380 %}
```jsx-preview
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')
);
```
{% endmeta %}

## Features and Functionalities

* [Data binding]({% slug databinding_panelbar %})
* [Templates]({% slug templates_panelbar %})
* [Animations]({% slug animations_panelbar %})
* [Keyboard navigation]({% slug keyboard_navigation_panelbar %})

## Events

The following example demonstrates basic PanelBar events. You can subscribe to [all PanelBar events](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar#events) by the handler name.

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

## Suggested Links

* [Kendo UI PanelBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview)
* [API Reference of the PanelBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)