All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

PanelBar Overview

The PanelBar displays hierarchical data as a multi-level, expandable component.

You can describe the children items:

The PanelBar is part of the kendo-react-layout NPM package.

Basic Usage

The following example demonstrates the PanelBar in action.

<style>
    .teamMate:after {
        content: ".";
        display: block;
        height: 0;
        line-height: 0;
        clear: both;
        visibility: hidden;
    }
    .teamMate h2 {
        font-size: 1.3em;
        font-weight: normal;
        padding-top: 17px;
        margin: 0;
    }
    .teamMate p {
        margin: 0;
        font-size: .8em;
    }
    .teamMate img {
        display: inline-block;
        vertical-align: top;
        width: 50px;
        height: 50px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 50%;
    }
    .mate-info {
        display: inline-block;
        vertical-align: top;
    }
    .panelbar-wrapper {
        max-width: 300px;
        margin: 0 auto;
    }
</style>
class App extends React.Component {
       imageUrl(imageName) {
           let baseImageUrl = 'https://demos.telerik.com/kendo-ui/content/web/panelbar/';
           return baseImageUrl + imageName + '.jpg';
       }
       render(){
           return (
               <div class="panelbar-wrapper">
                   <PanelBar >
                       <PanelBarItem expanded={true} title="My Teammates">
                           <div>
                               <div className="teamMate">
                                   <img src={this.imageUrl('andrew')} alt="Andrew Fuller" />
                                   <span className="mate-info">
                                       <h2>Andrew Fuller</h2>
                                       <p>Team Lead</p>
                                   </span>
                               </div>
                               <div className="teamMate">
                                   <img src={this.imageUrl('nancy')} alt="Nancy Leverling" />
                                   <span className="mate-info">
                                       <h2>Nancy Leverling</h2>
                                       <p>Sales Associate</p>
                                   </span>
                               </div>
                               <div className="teamMate">
                                   <img src={this.imageUrl('robert')} alt="Robert King" />
                                   <span className="mate-info">
                                       <h2>Robert King</h2>
                                       <p>Business System Analyst</p>
                                   </span>
                               </div>
                           </div>
                       </PanelBarItem>
                       <PanelBarItem title={'Projects'} >
                           <PanelBarItem title={'New Business Plan'} />
                           <PanelBarItem title={'Sales Forecasts'}  >
                               <PanelBarItem title={'Q1 Forecast'} />
                               <PanelBarItem title={'Q2 Forecast'} />
                               <PanelBarItem title={'Q3 Forecast'} />
                               <PanelBarItem title={'Q4 Forecast'} />
                           </PanelBarItem >
                           <PanelBarItem title={'Sales Reports'} />
                       </PanelBarItem>
                       <PanelBarItem title="Programs">
                           <PanelBarItem title="Monday" />
                           <PanelBarItem title="Tuesday" />
                           <PanelBarItem title="Wednesday" />
                           <PanelBarItem title="Thursday" />
                           <PanelBarItem title="Friday" />
                       </PanelBarItem>
                       <PanelBarItem title="Communication" disabled={true} />
                   </PanelBar>
               </div>
           );
       }
   }
   ReactDOM.render(
       <App/>,
       document.querySelector('my-app')
   );

Functionality and Features

Events

The following example demonstrates basic PanelBar events.

class App extends React.Component {
       constructor(props){
           super(props);

           this.state = {
               logs: []
           }
       }
       renderLogs = () => {
           return this.state.logs.map((log, index)=> {
               return(<li key={index}>{log}</li>)
           })
       }
       handleSelect = (e) => {
           const calls = this.state.logs.slice();

           calls.unshift(`${e.action} ${e.target.props.title}`);

           this.setState({
               logs: calls
           });
       }
       render(){
           return(
               <div className="row">
                   <div className="col-md-6">
                       <PanelBar onSelect={this.handleSelect}>
                           <PanelBarItem title="First item">
                               <div
                                   className="custom-template"
                                   style={{padding: '30px', textAlign:'center'}}
                               >
                                   <h4>Custom template: </h4>
                                   <p>Item content</p>
                               </div>
                           </PanelBarItem>
                           <PanelBarItem title={"Second item"}>
                               <PanelBarItem title={"Child item"}/>
                           </PanelBarItem>
                       </PanelBar>
                   </div>
                   <div className="example-config col-md-6" style={{height:'180px'}}>
                     <h5>Log: </h5>
                     <ul className="event-log">
                       {this.renderLogs()}
                     </ul>
                   </div>
               </div>
           )
       }
   }
   ReactDOM.render(
       <App/>,
       document.querySelector('my-app')
   );
In this article