Getting Started with KendoReact PanelBar

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

You can describe the children items:

The KendoReact PanelBar component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-layout 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')
);
 /