All Components

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

Features and Functionalities

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